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

Mr_bean
112 阅读6分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

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” 函数，包含四个参数：

  • previousValue：（必须）上一次调用 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 将使用数组第二个元素。

可能大家大多数时候使用都是只传递两个参数，当前值和对应索引。 forEach() 为每个数组元素执行一次 callback 函数；与 map() 或者 reduce() 不同的是，它总是返回 undefined 值，并且不可链式调用 forEach() 被调用时，不会改变原数组，也就是调用它的数组（尽管 callback 函数在被调用时可能会改变原数组）。

代码示例：

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

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 ( element [, index [, array ] ] )[ , thisArg ] )

element（必须）：数组中当前正在处理的元素。 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]

总结

提示：这里对文章进行总结：

例如：时间关系就先写到这，后续还会更新数组的其他API，欢迎大家关注点赞嘿嘿。这里仅仅简单介绍了API的简单使用。

avatar
文章
阅读
粉丝