js遍历数组篇（一）-forEach

更详细的各种数组遍历方法在这里js遍历数组篇（二）-遍历数组的各种方法

forEach改变原数据

let arr = [1, 2, 3, 4, 5]

// 无效修改
arr.forEach(num => {
  num = 123
})
console.log(arr); // [ 1, 2, 3, 4, 5 ]

// 有效修改
arr.forEach((num, index) => {
  arr[index] = 123
})
console.log(arr); // [ 123, 123, 123, 123, 123 ]

forEach中每次遍历的num为值传递 所以改变num值不会影响arr[index]

forEach中实现continue/break

forEach方法无法中途终止遍历 不能直接使用continue/break（因为forEach中传入的是回调函数 没有continue/break 要用return返回）

let arr = [1, 2, 3, 4, 5]

// 实现continue效果
arr.forEach(num => {
  if (num === 3) return   
  console.log(num); // 1 2 4 5
})

// 手动break （看看就好 不建议这么写 还是用for循环吧）
let isBreak = false
arr.forEach(num => {
  if (isBreak) return
  if (num === 3) {
    isBreak = true
    return
  }
  console.log(num); // 1 2
})

map/set中的forEach

let set = new Set(['a', 'b', 'c', 'd', 'e'])
set.forEach((value, key) => { // set中 key和value相同 一般写一个就可以了
  console.log('key:' + key + '  ' + 'value:' + value);
})
// key:a  value:a
// key:b  value:b
// key:c  value:c
// key:d  value:d
// key:e  value:e

let arr2 = [ [1, 'a'], [2, 'b'], [3, 'c'], [4, 'd'], [5, 'e'] ]
let map = new Map(arr2) 
console.log(map);
map.forEach((value, key) => { // forEach中value在key前面 不要写反
  console.log('key:' + key + '  ' + 'value:' + value);
})
// Map(5) { 1 => 'a', 2 => 'b', 3 => 'c', 4 => 'd', 5 => 'e' }
// key:1  value:a
// key:2  value:b
// key:3  value:c
// key:4  value:d
// key:5  value:e

forEach和map方法的对比

let res = arr.forEach(num => ++num)
console.log(arr); // [ 1, 2, 3, 4, 5 ]
console.log(res); // undefined

let res2 = arr.map(num => ++num)
console.log(arr); // [ 1, 2, 3, 4, 5 ]
console.log(res2); // [ 2, 3, 4, 5, 6 ]

forEach	map
返回undefined	返回处理后的新数组

相同点
原数组不会被改变
都有参数item,index,arr