JavaScript 数组的各种遍历方式

ES5中遍历的方法

1. for循环

const arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]); // 1 2 3
}
复制代码

2. forEach -- 如果做操作是直接修原数组

   forEach 的代码块中不能使用 break、continue，它会抛出异常。

const arr = [1, 2, 3]
arr.forEach((elem, index, array) => {
    arr[index] = elem * 2
});
console.log(arr) // [ 2, 4, 6 ]
复制代码

和for循环的区别

• 不支持braek 和 continue -- 使用就会报错
• forEach() 没有返回值，只是针对每个元素调用func回调函数

3. map 返回新的数组，每个元素为调用func的结果

const arr = [1, 2, 3]
const result = arr.map(function(value) {
    value += 1
    console.log(value) // 2 3 4
    return value
})
console.log(arr, result) // [ 1, 2, 3 ] [ 2, 3, 4 ]
复制代码

4. filter() 返回符合func条件的元素数组

const arr = [1, 2, 3]
const result = arr.filter(function(value) {
    console.log(value) // 2
    return value == 2
})
console.log(arr, result) // [ 1, 2, 3 ] [ 2 ]
复制代码

5. some() 返回boolean，判断是否有元素符合func条件 -- 有一个满足就行 类似于 ||

const arr = [1, 2, 3]
const result = arr.some(function(value) {
    console.log(value)
    return value == 4
})
console.log(arr, result) // [ 1, 2, 3 ] false
复制代码

6. every() 返回boolean，判断每个元素都符合func条件 -- every中文每一个的意思，所以需要所有的都满足 类似于 &&

const arr = [1, 2, 3]
const result = arr.every(function(value) {
    console.log(value) // 1
    return value == 2 // 如果这里不写上面也是打印1 ，不写return函数里面默认返回undefined，所以第一个就已经不满足了，直接返回false
})
console.log(arr, result) // [ 1, 2, 3 ] false
复制代码

• 使用 every 遍历就可以做到 break 那样的效果，简单的说 return false 等同于 break，return true 等同于 continue。如果不写，默认是 return false。

• every 的代码块中不能使用 break、continue，它会抛出异常。

7. reduce -- 接收一个函数作为累加器

• prev上一次的结果

• cur 当前元素

• index 当前元素的索引

• array 当前的数组

  1. 求和

  const arr = [1, 2, 3]
  const sum = arr.reduce(function(prev, cur, index, array) {
      return prev + cur // 让上一次的结果加上当前的元素
  }, 0); // 初始值设置为0
  console.log(sum) // 6
  复制代码

  2. 求最大值

  const arr = [1, 2, 3]
  const max = arr.reduce(function(prev, cur) {
      return Math.max(prev, cur)
  })
  console.log(max)  // 3
  复制代码

  3. 数组去重

  const arr = [1,2,3,3,4,4]
  const res = arr.reduce(function(prev, cur) {
      prev.indexOf(cur) == -1 && prev.push(cur) // 上一次的结果里面是否包含了当前的，不包含则加入
      return prev
  }, []); // 传入一个初始值为空数组
  console.log(res)  // [1,2,3,4]
  复制代码

8. for in循环 -- 主要是原来遍历对象的

虽然for in可以遍历数组，但是最好不要用for in,他会把自定义的属性也会遍历到

const arr = [1, 2, 3]
arr.name = 'arr'
for (const key in arr) {
    console.log(arr[key]);
}
复制代码

• 最好不要用for...in去遍历数组。
• for...in代码块中不能有 return，不然会抛出异常。

ES6中遍历的方法

1. for of

for (const val of[1, 2, 3]) {
    console.log(val); // 1 2 3
}
复制代码

const arr = [1,2,3]
for (const item of arr) {
    console.log(item) // 1 2 3
}

for (const item of arr.values()) {
    console.log(item)// 1 2 3
}

for (const item of arr.keys()) {
    console.log(item) // 0 1 2
}

for (const [index, item] of arr.entries()) {
    console.log(index, item)
    //0 1
    //1 2
    //2 3
}


[1-3 数组的各种遍历方式](https://juejin.cn/post/7002081071525265444 )]