JavaScript 数组的 6种 遍历方式

数组的 6 中 遍历方式介绍

forEach、map、filter、some、every、reduce

除 reduce 外 的共同语法

arr.xxx((item, index, arr) => { … }, thisArg)

第一个参数为回调函数：callbackfn(item, index, arr)
item: 遍历的当前元素
index: 当前元素的下标
arr: 原数组
第二个参数为 thisArg（可选）: 表示在回调函数中 this 的指向：默认指向 window

6 中方法简介

方法一: forEach() : 没有返回结果，返回结果为undefined，本质上等同于 for 循环
方法二: map() : 返回一个新数组：新数组的元素为回调函数的返回结果
方法三: filter() : 返回一个新数组，返回满足条件的元素（即过滤数组并返回新数组，不会改变原数组）
方法四: some() : 返回一个boolean值，如果有一个条件满足，则表达式返回true
方法五: every() : 返回一个boolean值，所有满足条件，返回true，只要有一个不满足就返回false
方法六: reduce() : 遍历数组，并构建返回一个最终值

6种遍历方法示例

forEach

let arr = [1,2,3,4,5]
arr.forEach((item, index, arr) => {
  arr[index] = item * 2
})
console.log(arr) // [ 2, 4, 6, 8, 10 ]

map

let arr = [1,2,3,4,5]
let newArr = arr.map((item, index, arr) => {
  return item * 2;
})
console.log(arr) // [ 1, 2, 3, 4, 5 ]
console.log(newArr) // [ 2, 4, 6, 8, 10 ]

filter

let arr = [1,2,3,4,5]
let newArr = arr.filter((item, index, arr) => {
  return item % 2 === 1
})

console.log(arr) // [ 1, 2, 3, 4, 5 ]
console.log(newArr) // [ 1, 3, 5 ]

some

// some: 只要有一个满足条件，就返回true
let arr = [1,2,3,4,5]
let result = arr.some((item, index, arr)=> {
  return item >= 5;
})
console.log(arr) // [ 1, 2, 3, 4, 5 ]
console.log(result) // true

every

// some: 只要有一个满足条件，就返回true
let arr = [1,2,3,4,5]
let result = arr.some((item, index, arr)=> {
  return item >= 5;
})
console.log(arr) // [ 1, 2, 3, 4, 5 ]
console.log(result) // true

reduce

// 语法: array.reduce(function(previous, current, index, arr), initValue)
// 第一个参数：回调函数：
//           previous: 每次循环返回的结果
//           current: 当前循环的元素
//           index: 当前循环元素的数组下标
//           arr: 原数组
// 第二个参数：previous 每次遍历返回的元素，
//    若没有initValue参数，则第一次为第一个元素
// 返回结果：最后一次循环的返回结果就是整个表达式的返回结果

let arr = [1,2,3,4,5]
let result = arr.reduce((previous, current, index, arr) => {
  return previous + current // 累加求和
}, 0)

let result2 = arr.reduce((previous, current, index, arr) => {
   previous.push(current * 2) // 每个元素 ✖️ 2
   return previous
}, [])

console.log(arr) // [ 1, 2, 3, 4, 5 ]
console.log(result) // 15
console.log(result2) // [ 2, 4, 6, 8, 10 ]

总结

（1）forEach方法没有返回值，一般用于直接修改原数组；
（2）map方法会返回新的数组，在处理元素为引用数据类型的数组时可以通过数据的拷贝不修改原数组，并且可以结合其他方法执行更多层的操作；
（3）filter()方法用于过滤数组，返回的结果就是过滤后的新数组；
（4）some()方法用于判断数组中是否有满足条件的元素，返回结果是布尔值，只要有一个符合就是true；
（5）every()方法用于判断数组中的元素是否都符合判断条件，返回结果是布尔值，都符合才会返回true。
（6）reduce()方法在一般需要对数组元素的数据进行一些运算处理时使用，返回的值就是最终的结果；