js数组迭代之forEach、map、reduce、filter

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

数组不论作为那种语言来说都是非常重要的，而且实际工作中也经常用到，那么对它的一些常用API的掌握程度就是基础是否扎实的体现，让我们通过这篇文章来和它打打招呼吧！

不知道大伙在学习数组API的时候有没有把它搞混呢？小编在刚开始学的时候老是搞混这个，今天就来和它battle一下，直接把它拿下

一、forEach常见用法

MDN中是这样解释的：
forEach() 方法对数组的每个元素执行一次给定的函数。

那么我们就来看一下它到底是怎么使用滴

1、使用

array.forEach( function ( currentValue [, index [, array ] ] ){
//函数体
} [ , thisArg ] )

function为传入的回调函数，可传入四个参数:
currentValue：数组中正在处理的当前元素 必须传入的参数！
index：数组中正在处理的当前元素的索引 。（可以省略）
array:原数组，forEach方法调用的那个数组。（可以省略）
thisArg :当执行回调函数 function 时，用作 this 的值。(可以省略)

forEach() 为每个数组元素执行一次 callback 函数；与 map() 或者 reduce() 不同的是，它总是返回 undefined 值，并且不可链式调用
forEach() 被调用时，不会改变原数组，也就是调用它的数组（尽管 callback 函数在被调用时可能会改变原数组）。

代码示例：

数组扁平化（这里只拍平一层）

function flatten(arr) {
    if (!Array.isArray(arr)) return arr
    let res = []
    arr.forEach(item => {  //这里只传递一个参数
        if (Array.isArray(item)) {
            res = res.concat(item)
        } else {
            res.push(item)
        }
    })
    return res
}

二、map常见用法

map() 方法通过对每个数组元素执行函数来创建新数组。
不会对没有值的数组元素执行函数。（纯函数）
不会更改原始数组。

1、使用

var new_array = arr.map(function callback( currentValue [, index [, array ] ]) {
// Return element for new_array
}[, thisArg])

function为传入的回调函数，可传入四个参数:
currentValue：数组中正在处理的当前元素 必须传入的参数！
index：数组中正在处理的当前元素的索引 （可以省略）
array:原数组，即调用map的那个数组。(可以省略)
thisArg :当执行回调函数 function 时，用作 this 的值。(可以省略)

如果 thisArg 参数提供给map，则会被用作回调函数的this值。否则 undefined 会被用作回调函数的this值。
map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）

代码示例：

求数组每一项的平方根

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

三、reduce常见用法

MDN中是这样解释的：
reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

1、使用

arr.reduce( callback ( accumulator, currentValue [, index [, array ] ] ) {
} [, initialValue ] )

第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）。

其实就是第一个参数就是将数组已遍历参数全部相加的和（累加器）.

一个 “reducer” 函数，包含四个参数：

• accumulator：（必须）上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。
• currentValue：（必须）数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
• currentIndex：（可选）数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。
• array：（可选）用于遍历的数组。
• initialValue （可选）
  作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。

代码示例：

数组扁平化（这里只拍平一层）

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
 ( acc, cur ) => acc.concat(cur),
 [] //初始值，接下来将从第一个元素（索引0）开始遍历，如果不传则以第一个元素为初始累加值，从第二个值开始遍历
);
// [0, 1, 2, 3, 4, 5]

四、filter常见用法

filter顾名思义 过滤器，即筛选满足条件的元素组成一个新数组返回
MDN中是这样解释的：
filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

1、使用

var newArray = arr.filter( callback (currentValue[, index [, array ] ] ){
//函数体
}[ , thisArg ] )

currentValue（必须）：数组中当前正在处理的元素。
index（可选）：正在处理的元素在数组中的索引。
array（可选）：调用了 filter 的数组本身。
thisArg（可选）：执行 callback 时，用于 this 的值。

返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。
如果为 filter 提供一个 thisArg 参数，则它会被作为 callback 被调用时的 this 值。否则，callback 的 this 值在非严格模式下将是全局对象，严格模式下为 undefined。

代码示例：

筛选排除所有较小的值
下例使用 filter 创建了一个新数组，该数组的元素由原数组中值大于 10 的元素组成。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

总结

简单总结了一下，其实四个方法需要的参数都差不多，只需要记住reduce特殊一点就可以啦！其他的三个都是传递一样的参数！

例如：感谢大家花时间看到这里，希望大家有所收货，如果文章中存在不足，欢迎指出，一起交流一起进步！也欢迎大家关注点赞嘿嘿。这里仅仅简单介绍了API的简单使用，：更详细的了解可以参考MDN文档(可以点一点我！)