ES6操作数组的高级函数map()、filter()、reduce()

本文最后更新于:星期五, 十一月 5日 2021, 5:43 下午

arr.map() – 更新数组

  1. 原数组不变
  2. 回调函数参数:item(数组元素)、index(序列)、arr(原数组)
  3. 循环原数组,使用return操作输出项,返回新数组,新数组长度和原数组一样
1
2
3
4
5
6
7
const originalArr = [1, 2, 3, 4, 5]

const newArr = originalArr.map((item, index, arr) => {
return item * 2 // 将原数组的每一项都乘以2,输出新数组,原数组不变
})

console.info(newArr) // [2, 4, 6, 8, 10]

arr.filter() – 筛选数组

  1. 原数组不变
  2. 回调函数参数:item(数组元素)、index(序列)、arr(原数组)
  3. 循环原数组,使用return判断是否输出元素,返回新数组,新数组长度小于或等于原数组
1
2
3
4
5
6
7
const originalArr = [1, 2, 3, 4, 5]

const newArr = originalArr.filter((item, index, arr) => {
return item % 2 == 0 // 将原数组的偶数项输出为新数组,原数组不变
})

console.info(newArr) // [2, 4]

arr.reduce() – 叠加数组

  1. 原数组不变
  2. 回调函数参数:pre(初始值为数组第一项,此后是上一次操作的返回值)、item(数组元素)、index(序列,下标从1开始)、arr(原数组)
  3. 循环原数组,使用return操作输出,直到循环结束,返回一个输出值
1
2
3
4
5
6
7
8
9
10
11
const originalArr = [1, 2, 3, 4, 5]

const newArr = originalArr.reduce((pre, item, index, arr) => {
// 第一次循环:pre:1, item:2, index:1, pre+item:3
// 第二次循环:pre:3, item:3, index:2, pre+item:6
// 第三次循环:pre:6, item:4, index:3, pre+item:10
// 第四次循环:pre:10, item:5, index:4, pre+item:15
return pre + item
})

console.info(newArr) // 15

更多编程教学请关注公众号:潘高陪你学编程

image



本文标题:ES6操作数组的高级函数map()、filter()、reduce()
文章作者:
发布时间:2021年11月05日 - 17:33:22
最后更新:2021年11月05日 - 17:43:55
原始链接:https://blog.pangao.vip/ES6%E6%93%8D%E4%BD%9C%E6%95%B0%E7%BB%84%E7%9A%84%E9%AB%98%E7%BA%A7%E5%87%BD%E6%95%B0map()%E3%80%81filter()%E3%80%81reduce()/
许可协议:署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

如果这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。
潘高 微信支付

微信支付

潘高 支付宝

支付宝