聊一聊数组的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