JS高階函數的使用

高階函數是對其他函數進行操作的函數，可以將它們作為參數或通過返回它們。簡單來說，高階函數是一個函數，它接收函數作為參數或將函數作為輸出返回。

簡單一張圖，方便理解全文。

 

 

 

常見的高階函數：

1、filter過濾函數

filter也是一個常用的操作，它用於把Array的某些元素過濾掉，然后返回剩下的元素。

filter把傳入的函數依次作用於每個元素，然后根據返回值是true還是false決定保留還是丟棄該元素。

const nums = [2,3,5,1,77,55,100,200];
let newArray = nums.filter(function (n) {
    //小於100就是true，進入newArray數組
    return n < 100;
})
console.log(newArray);//[2,3,5,1,77,55]

2、map高階函數

map函數同樣會遍歷數組每一項，傳入回調函數為參數，num是map遍歷的每一項，回調函數function返回值會被添加到新數組中

const nums = [2,3,5,1,77,55,100,200];
let new2Array = nums.map(function (num) {
    return n*2;//每過元素都乘2
})
console.log(new2Array);//[4,6,10,2,154,110,200,400];

3、reduce高階函數

reduce函數同樣會遍歷數組每一項，傳入回調函數和‘0’為參數，0表示回調函數中preValue初始值為0，回調函數中參數preValue是每一次回調函數function返回的值，currentValue是當前值

const nums = [2,3,5,1,77,55,100,200];

let new3Array = nums.reduce(function (preValue,currentValue) {
    //數組為[2,3,5,1,77,55,100,200]，則回調函數第一次返回值為0+2=2，第二次preValue為2，返回值為2+3=5，以此類推直到遍歷完成
    return preValue+currentValue;
},0);//第二個參數0是preValue的初始值
console.log(new3Array);//443

4、sort排序算法

因為Array的sort()方法默認把所有元素先轉換為String再排序，結果'10'排在了'2'的前面，因為字符'1'比字符'2'的ASCII碼小。如果不知道sort()方法的默認排序規則，直接對數字排序，絕對栽進坑里！

//要按數字大小排序，我們可以這么寫：
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
}); // [1, 2, 10, 20]

//如果要倒序排序，我們可以把大的數放前面：
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return 1;
    }
    if (x > y) {
        return -1;
    }
    return 0;
}); // [20, 10, 2, 1]