JS 數組高階函數 map、reduce、filter、sort等

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

一個最簡單的高階函數：

function add(x, y, f) {
    return f(x) + f(y);
}

Map

定義和用法：

map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。

map() 方法按照原始數組元素順序依次處理元素。map()作為高階函數，事實上它把運算規則抽象了。

arr.map(function(currentValue，index，arr),thisValue) 

參數：

currentValue 必須 當前元素值 

index 可選 當前元素的索引值 

arr 可選 當前元素屬於的數組對象。 

thisvalue 可選 對象作為該執行回調時使用，傳遞給函數，用作 "this" 的值。

實例：

function pow(x) {
    return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

reduce

reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。

語法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

total

必需。初始值, 或者計算結束后的返回值。

Array的reduce()把一個函數作用在這個Array的[x1, x2, x3...]上，這個函數必須接收兩個參數，reduce()把結果繼續和序列的下一個元素做累積計算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

比方說對一個Array求和，就可以用reduce實現：

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25
//第一步x=1 y=3 第二步 x=4 y=5 第三步 x=9 y=7 ……

要把[1, 3, 5, 7, 9]變換成整數13579，reduce()也能派上用場：

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x * 10 + y;
}); // 13579

練習：

一個字符串“13579"先變成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以寫出一個把字符串轉換為Number的函數。

不要使用JavaScript內置的parseInt()函數，利用map和reduce操作實現一個string2int()函數：

function string2int(s) {
    let arr = s.split('')    
    arr=arr.map(x=>{
            return x*1
    });
    return arr.reduce((x,y)=>{
           return x*10+y
    })
}

filter

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

和map()類似，Array的filter()也接收一個函數。map()不同的是，filter()把傳入的函數依次作用於每個元素，然后根據返回值是true還是false決定保留還是丟棄該元素。

例如，在一個Array中，刪掉偶數，只保留奇數，可以這么寫：

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

把一個Array中的空字符串刪掉，可以這么寫：

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
    return s && s.trim(); // 注意：IE9以下的版本沒有trim()方法
});
r; // ['A', 'B', 'C']

sort

無論使用冒泡排序還是快速排序，排序的核心是比較兩個元素的大小。如果是數字，我們可以直接比較，但如果是字符串或者兩個對象呢？直接比較數學上的大小是沒有意義的，因此，比較的過程必須通過函數抽象出來。通常規定，對於兩個元素x和y，如果認為x < y，則返回-1，如果認為x == y，則返回0，如果認為x > y，則返回1，這樣，排序算法就不用關心具體的比較過程，而是根據比較結果直接排序。

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});
console.log(arr); // [1, 2, 10, 20]

• 若 a 小於 b，在排序后的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值。
• 若 a 等於 b，則返回 0。
• 若 a 大於 b，則返回一個大於 0 的值。

注：sort()方法會直接對Array進行修改，它返回的結果仍是當前Array

 

var a1 = ['B', 'A', 'C'];
var a2 = a1.sort();
a1; // ['A', 'B', 'C']
a2; // ['A', 'B', 'C']
a1 === a2; // true, a1和a2是同一對象

every

every()方法可以判斷數組的所有元素是否滿足測試條件。

例如，給定一個包含若干字符串的數組，判斷所有字符串是否滿足指定的測試條件：

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, 因為不是每個元素都全部是小寫

find

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, 因為沒有全部是大寫的元素

findIndex

findIndex()和find()類似，也是查找符合條件的第一個元素，不同之處在於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

forEach

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

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

 原文地址:https://www.liaoxuefeng.com/wiki/1022910821149312/1023021271742944