聊聊数组遍历方法

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

秒客网

聊一聊数组的map、reduce、foreach等方法