聊一聊數組的map、reduce、foreach等方法

聊聊數組遍歷方法

JS 數組的遍歷方法有好幾個：

• every
• some
• filter
• foreach
• map
• reduce

接下來咱們來一個個地交流下。

every()

arr.every(callback[, thisArg]) 返回值：true | false 是否改變原數組：不改變原數組

解析： every() 方法用來測試數組中的每一項是否都經過了callback函數的測試；只有所有經過才返回 true；不然 false。 本文出現的 callback 沒有特別聲明都是表示包含 element, index, array 三個參數的函數。

例子：

// 檢測數組中的全部元素是否都大於或等於100

[].every((ele) => ele >= 100);  // true

[1, 2, 3].every((ele) => ele >= 100);   // false

some()

arr.some(callback[, thisArg]) 返回值：true | false 是否改變原數組：不改變

解析： some() 跟 every() 相似，只是 every 要每一項都經過 callback 才返回 true，而 some 只要有經過 callback 的就返回 true；some 爲邏輯或，every 爲邏輯與。

例子：

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true

filter()

var newArr = arr.filter(callback[, thisArg]) 返回值：新數組 是否改變原數組：不改變原數組

解析： filter() 方法會對數組中的每一項（首先這項是有值的）進行調用 callback 函數，並根據調用結果返回的 true 或 false 來組建一個新的數組（該數組是原數組的子集）。 即過濾，只有符合的（調用 callback 返回 true 的）才加入到新數組中。

例子：

const isBigEnough = value => value >= 10;

let [...spread] = [12, 4, 8, 120, 44];

let filtered = spread.filter(isBigEnough);
// filtered: [12, 120, 44]
// spread: [12, 4, 8, 120, 44]

forEach()

array.forEach(callback[, thisArg]) 返回值：undefined 是否改變原數組：改不改變要看 callback

解析： forEach() 方法按升序爲數組中含有效值的每一項執行一次 callback 函數，那些已刪除（使用delete方法等狀況）或者未初始化的項將被跳過（但不包括那些值爲 undefined 的項）（例如在稀疏數組上）。反正它就是很死板。

例子：

// three 呢？它被跳過了，緣由是到two時，使數組發生了變化，致使全部剩下的項上移一個位置，因此three被跳過了
let words = ['one', 'two', 'three', 'four'];

words.forEach((word) => {
    console.log(word);
    if ( word === 'two' ) {
        words.shift();
    }
});
// one
// two
// four

map()

let newArr = arr.map(callback[, thisArg]) 返回值：新數組 是否改變原數組：不改變

解析： map() 方法就是數組中的每一項（有值）按順序都調用一次 callback 函數，而後每一項的返回結果組成一個新的數組做爲整個map方法的返回值。

例子：

let str = '12345';
Array.prototype.map.call(str, (x) => x).reverse().join('');
// '54321'

reduce()

arr.reduce(callback[, initialValue]) 返回值：callback函數累計處理的結果 是否改變原數組：

解析： reduce() 方法的 callback 有四個參數，比以前說的多了一個累計的返回值；四個參數：accumulator、currentValue、currentIndex、array；initialValue 是用做第一個調用 callback 的第一個參數的值，默認使用數組中的第一個元素。

reduce() 方法跟 map 有點類似，都是數組中的每個元素（有效值）一次執行 callback 函數，多就多在它會存上上一次 callback 計算結果做爲下一次的參數。

若是沒有提供 initialValue， reduce會從索引1的地方開始執行 callback方法，跳過第一個索引。若是提供 initialValue， 從索引0開始

例子：

// 求和
let sum = [0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr, 0);

// 計算數組中每一個元素出現的次數
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let countedNames = names.reduce((allNames, name) => {
    if ( name in allNames ) {
        allNames[name]++;
    } else {
        allNames[name] = 1;
    }
    return allNames;
}, {});
// countedNames:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

// 數組去重
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current) => {
    // 主要是排了序
    if ( init.length === 0 || init[init.length - 1] !== current ) {
        init.push(current);
    }
    return init;
}, []);
console.log(result);

參考

MDN Array