英文 |?https://medium.com/javascript-in-plain-english/4-practical-use-cases-of-using-filter-in-javascript-db46e2ec83b2

翻譯 | web前端開發(fā)（ID：web_qdkf)

創(chuàng)建一個包含給定數組元素子集的新數組是JavaScript中最常見的任務之一。

除了使用循環(huán)語句，我們還可以使用filter()，它是一種更短，更簡潔的方式。

1、刪除重復的值

這個有點棘手。我們將利用indexOf()功能。它是一個內置函數，該函數可以返回數組中給定元素的第一個索引。

我們可以使用它來形成一個條件，以刪除數組中的重復值，如下所示。

const numbers = [3, 12, 54, 12, 4, 4, 3, 12, 16];const filteredNumbers = numbers.filter((number, index) => numbers.indexOf(number) === index);console.log(filteredNumbers); // [3, 12, 54, 4, 16]

我們使用回調函數的第二個參數，它是當前元素的索引。

在這里，我們將indexOf（）函數返回的索引與當前元素的實際索引進行比較。如果它們不同，則當前元素為重復值。

以上面的代碼段中的數組為例。當實際索引為時3，相鄰元素的值為12。但是，如果我們使用indexOf()該元素，則返回的索引是1因為該元素12首次出現在index處1。因此12是重復值之一。

2、刪除無效值

無效值被認為是可能導致錯誤和意外行為的值。

以年齡為例。如果年齡是定義的數字，則該年齡有效。

現在，我們要求過濾所有有效年齡的人，請看下面的代碼。

const people = [  { name: ‘Amy’, gender: ‘female’, age: ‘28’ },  { name: ‘James’, gender: ‘male’, age: 13 },  { name: ‘Victor’, gender: ‘male’, age: null },  { name: ‘David’, gender: ‘male’, age: 28 },  { name: ‘Simon’, gender: ‘male’, age: undefined },  { name: ‘Anna’, gender: ‘female’, age: 21 },  { name: ‘Jane’, gender: ‘female’, age: NaN }];const filteredPeople = people.filter(person => person.age !== undefined && typeof person.age === ‘number’ && !isNaN(person.age));console.log(filteredPeople); // [{ name: ‘James’, gender: ‘male’, age: 13 }, { name: ‘David’, gender: ‘male’, age: 28 }, { name: ‘Anna’, gender: ‘female’, age: 21 }]

3、過濾數字數組

這是最簡單的用法。

假設你有一個數字數組，并且只需要從該數組中提取奇數。

const numbers = [23, 54, 1, 3, 72, 28];const oddNumbers = numbers.filter(number => number % 2 !== 0);console.log(oddNumbers); // [23, 1, 3]

或者你想創(chuàng)建一個包含給定數組中所有素數的新數組。

const isPrime = number => {  if (number === 1) return false;  if (number === 2) return true;  for (let i = 2; i < number; i++) {    if (number % i === 0) return false;  }
  return true;}const numbers = [23, 54, 1, 3, 72, 28];const oddNumbers = numbers.filter(isPrime);console.log(oddNumbers); // [23, 3]

4、過濾對象數組

盡管一個對象比數字更復雜，但是使用filter()仍然可以保持簡單。

例如，假設我們有很多人。要求是找到所有年齡大于18歲的人。

const people = [  { name: ‘Amy’, gender: ‘female’, age: 28 },  { name: ‘James’, gender: ‘male’, age: 13 },  { name: ‘Victor’, gender: ‘male’, age: 17 },  { name: ‘David’, gender: ‘male’, age: 28 },  { name: ‘Simon’, gender: ‘male’, age: 33 }];const filteredPeople = people.filter(person => person.age > 18);console.log(filteredPeople); // [{ name: ‘Amy’, gender: ‘female’, age: 28 }, { name: ‘David’, gender: ‘male’, age: 28 }, { name: ‘Simon’, gender: ‘male’, age: 33 }]

如果是，我們需要找出所有年齡大于18歲的女性，這時，我們只需向回調函數添加一個附加條件即可。

const people = [  { name: ‘Amy’, gender: ‘female’, age: 28 },  { name: ‘James’, gender: ‘male’, age: 13 },  { name: ‘Victor’, gender: ‘male’, age: 17 },  { name: ‘David’, gender: ‘male’, age: 28 },  { name: ‘Simon’, gender: ‘male’, age: 33 }];const filteredPeople = people.filter(person => person.age > 18 && person.gender === ‘female’);console.log(filteredPeople); // [{ name: ‘Amy’, gender: ‘female’, age: 28 }]

是不是很容易？

結論

以上就是一些關于在JS中使用filter()的4個實例。如果你還知道其他用例嗎？請在下面的評論留言區(qū)里告訴我們。

感謝閱讀。

在JavaScript中使用filter（）的4個實用案例

1、刪除重復的值

2、刪除無效值

3、過濾數字數組

4、過濾對象數組

結論

1、刪除重復的值

2、刪除無效值

3、過濾數字數組