使用 array.filter() 篩選數組中滿足條件的元素

一、概述

在 JavaScript 中，數組是一種十分常見的數據結構，在Web開發中更是應用廣泛。而篩選操作是數組中經常使用的操作之一。使用 Array.filter() 可以根據指定的規則篩選數組中滿足條件的元素，使操作更加靈活和高效。本文將詳細討論如何使用 Array.filter() 篩選數組中滿足條件的元素。

二、使用方法

Array.filter() 方法的使用非常簡單。它可用於任何數組，接收一個回調函數作為參數，並返回一個新數組，新數組只包含符合條件的元素。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function isEven(num) {
  return num % 2 === 0;
}

let evenArr = arr.filter(isEven); // [2, 4, 6, 8]

上述例子中，我們定義了一個 isEven() 回調函數，它判斷一個數字是否為偶數。然後我們使用 Array.filter() 方法篩選出原數組中的偶數元素。

三、回調函數

由於 Array.filter() 方法接受一個回調函數作為參數，這個回調函數將被應用到數組的每個元素上。回調函數接受三個參數：

• 當前元素的值
• 當前元素的下標
• 調用 filter() 的數組

回調函數應該返回布爾值。如果返回 true，當前元素將被篩選到新數組中；如果返回 false，將被濾除。

四、默認參數

另外一個有用的功能是使用默認參數，例如只篩選出數組中的前幾個元素。可以將限制條件作為第二個參數傳入 filter() 方法：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let evenArr = arr.filter(function(num, index) {
  return num % 2 === 0 && index < 4;
}); // [2, 4]

上述例子中，我們限制了只篩選出前四個偶數。

五、數組對象篩選

Array.filter() 也可以用於對象組成的數組。只需要將回調函數修改為相應的對象屬性即可：

let users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 }
];

let under30 = users.filter(function(user) {
  return user.age < 30;
});

console.log(under30); // [{name: "Alice", age: 25}, {name: "Charlie", age: 20}]

上述例子中，我們篩選出 users 數組中年齡小於 30 的對象。

六、數組去重

Array.filter() 方法也可以用於數組去重。我們可以利用 Array.filter() 和 indexOf() 方法實現這個功能：

let arr = [1, 2, 2, 3, 3, 4, 4, 5, 5];

let uniqueArr = arr.filter(function(item, index) {
  return arr.indexOf(item) === index;
}); // [1, 2, 3, 4, 5]

上述例子中，我們根據 indexOf() 方法返回的元素下標和當前下標比較，將不同的元素篩選出來，實現了數組去重。

七、總結

本文深入探討了 Array.filter() 方法的使用方法，包括回調函數、默認參數、數組對象篩選和數組去重等。使用 Array.filter() 方法可以大大提高數組操作的靈活性和效率，幫助我們更快更好地完成項目開發。