js數組中的高階函數

0、什么是高階函數

高階函數英文叫Higher-order function。JavaScript的函數其實都指向某個變量。既然變量可以指向函數，函數的參數能接收變量，那么一個函數就可以接收另一個函數作為參數，這種函數就稱之為高階函數。

1、filter函數的使用（過濾數組）

MDN：filter() 方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。

filter中的回調函數有一個要求：必須返回一個boolean值
true：當返回為true時，函數內部自動將這次回調的n加入到新的數組中
false：當返回為false時，函數內部會過濾掉這次的n

• 示例：獲取集合中小於100的數

const nums = [10, 20, 30, 111, 222, 333]
let newNums = nums.filter(function(n){
    return n<100
})

• 示例：js中獲取素數

function get_primes(arr) {
    return arr.filter(num => {
        // 1不是素數
        if(num === 1) {
            return false;
        }
        // 從2開始，取到該數的平方根即可
        for(var i=2; i<=Math.sqrt(num); i++) {
            // 如果可以整除，證明不是素數
            if(num % i === 0) {
                return false;
            }
        }
        return true;
    });
}

2、map函數的使用（對數組每個元素進行操作）

MDN：map()方法創建一個新數組，其結果是該數組中的每個元素是調用一次提供的函數后的返回值。

• 示例：將新集合中的所有數*2

let new2Nums = newNums.map(function(n){
    return n*2
})

3、reduce函數的使用（匯總數組的內容）

MDN：reduce()方法對數組中的每個元素執行一個由您提供的reducer函數(升序執行)，將其結果匯總為單個返回值。

• 示例：計算集合所有數據的和

// new2Nums數組的和，preValue為上一次function的返回值，0為preValue初始值
new2Nums.reduce(function(preValue, n){
    return preValue + n
}, 0)

// 簡化
let total = nums.filter(function(n){
    return n<100
}).map(function(n){
    return n*2
}).reduce(function(preValue, n){
    return preValue + n
}, 0)

// 進一步簡化：
let total = nums.filter(n => n<100).map(n => n*2).reduce((preValue, n) => preValue +n)

4、sort函數的使用（數組排序）

MDN：sort()方法用原地算法對數組的元素進行排序，並返回數組。默認排序順序是在將元素轉換為字符串，然后比較它們的UTF-16代碼單元值序列時構建的。深入理解字符編碼

對於兩個元素x和y，如果認為x < y，則返回-1，如果認為x == y，則返回0，如果認為x > y，則返回1。sort()方法會直接對Array進行修改，它返回的結果仍是當前Array。

• 示例：使用sort默認排序

['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];

['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']

//  Array的sort()方法默認把所有元素先轉換為String再排序
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

• 示例：將數組從小到大排序 [10, 20, 1, 2]

var arr = [10, 20, 1, 2];
// 正數相當於1，負數相當於-1
arr.sort((x, y) => x-y); // [1, 2, 10, 20]

5、every函數的使用（判斷數組的所有元素是否滿足測試條件）

MDN：every()方法測試一個數組內的所有元素是否都能通過某個指定函數的測試。它返回一個布爾值。

若收到一個空數組，此方法在一切情況下都會返回 true。

• 示例：

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.every(function (s) {
    return s.length > 0;
})); // true, 因為每個元素都滿足s.length>0

console.log(arr.every(function (s) {
    return s.toLowerCase() === s;
})); // false, 因為不是每個元素都全部是小寫

6、find函數的使用（查找符合條件的第一個元素，返回值）

MDN： find()方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回undefined。

• 示例：

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.find(function (s) {
    return s.toLowerCase() === s;
})); // 'pear', 因為pear全部是小寫

console.log(arr.find(function (s) {
    return s.toUpperCase() === s;
})); // undefined, 因為沒有全部是大寫的元素

7、findIndex函數的使用（查找符合條件的第一個元素，返回索引）

MDN：findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引。若沒有找到對應元素則返回-1。

• 示例：

var arr = ['Apple', 'pear', 'orange'];
console.log(arr.findIndex(function (s) {
    return s.toLowerCase() === s;
})); // 1, 因為'pear'的索引是1

console.log(arr.findIndex(function (s) {
    return s.toUpperCase() === s;
})); // -1

findIndex與indexOf的區別

• findindex丟進去的是一個函數，找滿足函數關系的元素。
• indexof丟進去的是要找的元素，直接找元素。

8、forEach函數的使用（對數組每個元素進行操作，沒有返回值）

MDN：forEach()方法對數組的每個元素執行一次給定的函數。

forEach()和map()類似，它也把每個元素依次作用於傳入的函數，但不會返回新的數組。forEach()常用於遍歷數組，因此，傳入的函數不需要返回值。

• 示例：

var arr = ['Apple', 'pear', 'orange'];
arr.forEach(console.log); // 依次打印每個元素

forEach方法可以接收兩個參數array.forEach(function(currentValue, index, arr), thisValue)：

1. 回調函數，必需，回調函數中有三個參數
   1. currentValue，必需，當前元素
   2. index，可選，當前元素的索引值
   3. arr，可選，當前元素所屬的數組對象
2. thisValue，可選，傳遞給參數的值一般用“this”值，如果這個參數為空，“undefined”會傳遞給“this”值簡單點來說，就是我們可以直接使用第二個參數來指定函數里的this的值，而不需要使用箭頭函數或者在外面定義var that = this;等操作。 在加上第二個參數前，forEach函數里的this默認是指向window的，在加了第二個參數this之后則指向forEach函數所在的對象了。