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

更多内容，请访问我的个人博客。

arr.map() -- 更新数组

原数组不变
回调函数参数：item(数组元素)、index(序列)、arr(原数组)
循环原数组，使用return操作输出项，返回新数组，新数组长度和原数组一样

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() -- 筛选数组

原数组不变
回调函数参数：item(数组元素)、index(序列)、arr(原数组)
循环原数组，使用return判断是否输出元素，返回新数组，新数组长度小于或等于原数组

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() -- 叠加数组

原数组不变
回调函数参数：pre(初始值为数组第一项，此后是上一次操作的返回值)、item(数组元素)、index(序列，下标从1开始)、arr(原数组)
循环原数组，使用return操作输出，直到循环结束，返回一个输出值

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

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