JS过滤对象中的属性

一、过滤空值属性

在处理对象时，可能会出现属性值为空的情况，这些属性在实际应用中可能没有太大的意义，甚至可能导致一些错误。因此，过滤空值属性是很有必要的。

const obj1 = { name: 'Lucy', age: null, sex: 'female' };
const obj2 = { height: undefined, weight: 50, age: 20 };

// 用Object.keys 和 reduce 方法过滤空值属性
const filterEmptyProps = obj => {
  return Object.keys(obj).reduce((acc, key) => {
    if (obj[key] !== null && obj[key] !== undefined) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});
}

console.log(filterEmptyProps(obj1)); // { name: 'Lucy', sex: 'female' }
console.log(filterEmptyProps(obj2)); // { weight: 50, age: 20 }

上述代码中， filterEmptyProps() 方法定义了一个 reduce() 函数，遍历对象的每一个属性，如果属性值不为空，则添加该属性到新对象中。最终返回一个过滤后的新对象。

二、过滤不需要的属性

有时候，我们需要从一个对象中过滤掉一些不需要的属性，这可以通过 delete 关键字实现。

const obj = { id: 1, name: 'Lucy', age: 20 };

// 过滤掉 id 属性
delete obj.id;

console.log(obj); // { name: 'Lucy', age: 20 }

上述代码中的 delete 关键字可以删除对象中的某一个属性。实现过滤不需要的属性的效果。

三、过滤数组对象的属性

当我们需要处理一个数组对象时，可以使用 Array.prototype.map() 方法过滤掉不需要的属性。

const users = [
  { name: 'Lucy', age: 20 },
  { name: 'Tom', age: 25 },
  { name: 'Jone', age: 30 }
];

// 过滤掉 age 属性
const filteredUsers = users.map(({ name }) => ({ name }));

console.log(filteredUsers);
// [{ name: 'Lucy' }, { name: 'Tom' }, { name: 'Jone' }]

上述代码中， Array.prototype.map() 方法将一个数组对象中的每一个元素转化为一个新的数组对象，新的数组对象只包含需要的属性。这里使用了对象解构，方便的获取到每个元素的属性。

四、过滤数组中选中的对象

有时候我们需要从一个数组中选出一个符合条件的对象，可以使用 Array.prototype.filter() 方法过滤。

const users = [
  { name: 'Lucy', age: 20 },
  { name: 'Tom', age: 25 },
  { name: 'Jone', age: 30 }
];

// 过滤出 age 大于 23 的元素
const filteredUsers = users.filter(({ age }) => age > 23);

console.log(filteredUsers);
// [{ name: 'Tom', age: 25 }, { name: 'Jone', age: 30 }]

上述代码中，使用 Array.prototype.filter() 方法过滤出 age 大于 23 的元素。

五、过滤数组对象

有时候我们需要过滤整个数组对象，而不是其中的一个属性或选中的对象。可以使用 Array.prototype.map() 方法和对象解构来实现这一效果。

const users = [
  { name: 'Lucy', age: 20 },
  { name: 'Tom', age: 25 },
  { name: 'Jone', age: 30 }
];

// 只保留 name 属性
const filteredUsers = users.map(({ name }) => ({ name }));

console.log(filteredUsers);
// [{ name: 'Lucy' }, { name: 'Tom' }, { name: 'Jone' }]

上述代码中，使用 Array.prototype.map() 方法和对象解构把每一个元素转化为新的数组对象，数组对象只保留了 name 属性。

六、过滤数组中重复的对象

处理数组对象时，有时需要过滤掉重复的元素。可以使用 Set 和 Array.prototype.filter() 方法来实现。

const users = [
  { name: 'Lucy', age: 20 },
  { name: 'Lucy', age: 25 },
  { name: 'Tom', age: 25 },
  { name: 'Jone', age: 30 }
];

// 过滤重复元素
const filteredUsers = users.filter((user, index, array) => {
  const firstIndex = array.findIndex(item => item.name === user.name);
  return firstIndex === index;
})

console.log(filteredUsers);
// [{ name: 'Lucy', age: 20 }, { name: 'Tom', age: 25 }, { name: 'Jone', age: 30 }]

上述代码中，使用 Array.prototype.filter() 方法和 Array.prototype.findIndex() 方法来过滤掉重复元素。

七、使用 filter() 过滤对象

JS中有一个 Array.prototype.filter() 方法，可以用于数组的过滤，通过一些小技巧，我们也可以使用它来对对象进行过滤。如下所示：

const obj = { name: 'Lucy', age: 20, sex: 'female' };

// 过滤年龄小于 25 的属性
const filteredObj = Object.fromEntries(
  Object.entries(obj).filter(([key, value]) => key !== 'age' || value >= 25)
);

console.log(filteredObj);
// { name: 'Lucy', age: 25, sex: 'female' }

上述代码中，使用 Object.entries() 方法将对象转化为一个键值对数组，然后使用 Array.prototype.filter() 方法筛选出需要的属性并返回一个新的数组，最后使用 Object.fromEntries() 方法将筛选后的数组转化为一个新的对象。

八、使用 Object.keys() 和 reduce() 过滤空属性

我们可以使用 Object.keys() 和 reduce() 方法来过滤对象空属性，如下所示：

const obj = { name: 'Lucy', age: null, sex: 'female' };

// 过滤空属性
const filteredObj = Object.keys(obj).reduce((acc, key) => {
  if (obj[key] !== undefined && obj[key] !== null) {
    acc[key] = obj[key];
  }
  return acc;
}, {});

console.log(filteredObj);
// { name: 'Lucy', sex: 'female' }

上述代码中，使用 Object.keys() 方法返回对象的属性名，再使用 reduce() 方法遍历对象，如果属性值不为空，则添加该属性到新对象中，最终返回包含非空属性的新对象。

九、使用 Object.keys() 和 reduce() 过滤符合条件的字段

我们可以使用 Object.keys() 和 reduce() 方法来过滤符合条件的字段，如下所示：

const obj = { name: 'Lucy', age: 20, sex: 'female' };

// 过滤属性名为 name 和 sex 的属性
const filteredObj = Object.keys(obj).reduce((acc, key) => {
  if (['name', 'sex'].includes(key)) {
    acc[key] = obj[key];
  }
  return acc;
}, {});

console.log(filteredObj);
// { name: 'Lucy', sex: 'female' }

上述代码中，使用 Object.keys() 方法返回对象的属性名，再使用 reduce() 方法遍历对象，筛选出满足条件的属性名，最终返回包含满足条件的属性的新对象。

十、使用 Array.prototype.filter() 过滤数组中的某个属性

我们可以使用 Array.prototype.filter() 过滤数组中的某个属性，如下所示：

const users = [
  { name: 'Lucy', age: 20 },
  { name: 'Tom', age: 25 },
  { name: 'Jone', age: 30 }
];

// 只保留 name 和 age 属性
const filteredUsers = users.filter(user => {
  const { name, age } = user;
  return { name, age }
});

console.log(filteredUsers);
// [{ name: 'Lucy', age: 20 }, { name: 'Tom', age: 25 }, { name: 'Jone', age: 30 }]

上述代码中，使用 Array.prototype.filter() 方法筛选出符合条件的元素，并返回一个包含需要的属性的新数组。