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() 方法篩選出符合條件的元素，並返回一個包含需要的屬性的新數組。