深入探究filter函數的用法

一、filter函數的基本用法

filter函數是數組對象中的一個方法，可以過濾出滿足某個條件的元素並返回一個新的數組。

語法：array.filter(function(currentValue,index,arr), thisValue)

第一個參數：回調函數，必須。規定數組中每個元素執行的函數，該函數返回true或false，true表示該元素通過過濾。

第二個參數：可選，傳遞給函數的值被視為”this”的值。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function(item) {
    return item % 2 === 0;
});
console.log(newArr); // [2,4]

二、filter函數與map函數的區別

filter函數與map函數類似，但是兩者有本質的區別：

map函數返回的是一個新的數組，該數組的元素為回調函數的返回值。

filter函數返回的是一個新的數組，該數組只包含通過回調函數測試的元素。

let arr = [1 ,2, 3, 4, 5];
let newArr1 = arr.map(function(item) {
    return item * 2;
});
console.log(newArr1); // [2, 4, 6, 8, 10]
let newArr2 = arr.filter(function(item) {
    return item % 2 === 0;
});
console.log(newArr2); // [2, 4]

三、使用箭頭函數簡化代碼

在ES6中，可以使用箭頭函數更快捷地編寫filter函數。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(item => item % 2 === 0);
console.log(newArr); // [2, 4]

四、filter函數實現去重

可以使用filter函數實現數組去重，如下：

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

五、filter函數組合使用

filter函數可以和其他高階函數組合使用，如下：

1)使用filter函數和map函數實現一個數組中所有偶數元素的平方：

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(item => item % 2 === 0).map(item => item * item);
console.log(newArr); // [4, 16]

2)使用filter函數和reduce函數實現數組中4的倍數的和：

let arr = [1, 2, 3, 4, 5];
let sum = arr.filter(item => item % 4 === 0).reduce((x, y) => x + y);
console.log(sum); // 4

六、filter函數在非同步操作中的應用

在非同步操作中，可以使用filter函數過濾出符合條件的非同步操作，例如：禁止用戶重複點擊按鈕的例子。

let btn = document.querySelector('#btn');
let flag = true;

btn.addEventListener('click', function() {
    if(flag) {
        flag = false;
        fetchData().then(function(data) {
            doSomething(data);
            flag = true;
        });
    }
});

function fetchData() {
    return new Promise(function(resolve, reject) {
        // 構造非同步操作，返回結果為data
        resolve(data);
    });
}

function doSomething(data) {
    let result = data.filter(item => item % 2 === 0)
                     .map(item => item * item);
    // 執行某個操作
}

七、小結

本文詳細介紹了filter函數的基本用法以及其與map函數、箭頭函數、reduce函數的組合使用等。

同時，我們也了解到了filter函數在非同步操作中的應用，可以有效地避免用戶重複點擊按鈕等問題。

filter函數是JavaScript中一個非常實用的函數，可以讓我們更好地操作數組，並提高開發效率。