使用array.filter篩選數組元素

一、什麼是array.filter()

在JavaScript中，我們可以使用數組過濾方法array.filter()來篩選對數組中的元素進行篩選。

    const arr = [1, 2, 3, 4, 5];
    const filteredArr = arr.filter((num) => num > 3);
    console.log(filteredArr); // Output: [4, 5]

在上面的代碼片段中，我們定義了一個數組arr，使用數組過濾方法array.filter()來匹配數組中的元素是否大於3，最終過濾出大於3的元素，並存儲在filteredArr中。

array.filter()方法接受一個回調函數作為參數，該回調函數用於檢查數組中的每個元素是否滿足條件。如果滿足條件，則該元素將被包含在結果數組中；否則，將被過濾掉。

二、array.filter()的使用方法

在使用array.filter()方法時，通常需要傳遞一個回調函數作為參數。下面是回調函數的格式：

    function callback(element, index, array) {
      // 邏輯處理
    }

其中：

• element：表示正在被處理的元素。
• index：表示正在被處理的元素的下標。
• array：表示正在被處理的數組。

回調函數中允許設置多個參數，但只有第一個參數是必需的。

三、示例

示例1：篩選出特定條件的元素

    const arr = [1, 2, 3, 4, 5];
    const filteredArr = arr.filter((num) => num > 3);
    console.log(filteredArr); // Output: [4, 5]

上面這個例子中，我們使用array.filter()方法來篩選出數組arr中大於3的元素，最終將大於3的元素存儲在filteredArr中，並通過console.log()方法輸出。

示例2：使用boolean值對元素進行篩選

    const arr = [1, 2, 3, 4, 5];
    const filteredArr = arr.filter((num) => num % 2);
    console.log(filteredArr); // Output: [1, 3, 5]

上面這個例子中，我們使用array.filter()方法來篩選出數組arr中是奇數的元素，找到所有滿足條件的元素並輸出。

示例3：獲得唯一值的數組

    const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
    const filteredArr = arr.filter((num, index, self) => self.indexOf(num) === index);
    console.log(filteredArr); // Output: [1, 2, 3, 4, 5]

在上面的例子中，我們使用array.filter()方法來從數組arr中篩選出唯一值的元素。我們可以通過數組的indexOf()方法來比較元素的下標，取出唯一值元素並輸出。

示例4：使用array.filter()方法將數組中的某些元素刪除

    const arr = [1, 2, 3, 4, 5];
    const arrToDelete = [2, 4, 5];
    const filteredArr = arr.filter((num) => arrToDelete.indexOf(num) < 0);
    console.log(filteredArr); // Output: [1, 3]

在上面的例子中，我們可以使用array.filter()方法將數組arr中的2、4和5刪除，並將剩餘元素輸出。使用indexOf()方法確定arrToDelete中所有元素的下標，再使用filter()方法過濾它們。

四、總結

在JavaScript中使用array.filter()方法可以輕鬆地篩選出數組中的元素。我們可以通過包含回調函數來指定要傳遞的篩選條件，從而很好地控制輸出的結果。通過示例，你已經了解了如何將回調函數用於使用array.filter()方法進行數組過濾。