知识：用代码说清js的forEach与map

一、js中的定义：

1. map() ：创建一个新的数组，新数组中的每个元素由调用原数组中每一个元素执行匿名函数得来。
2. forEach() ：针对每一个元素执行匿名函数。

二、同：

1. 都相当于封装好的单层for循环，只能遍历数组；
2. 都是循环遍历数组中的每一项；
3. 每次执行匿名函数都支持三个参数：分别为 item （当前每一项）、 index （索引值）、 arr （原数组）；
4. 匿名函数中的this都是指向window；
5. 都允许 arr[index] 更改原始数组的元素。

三、异：

1. map() 函数内每一项执行时都会默认return undefined，若每一项执行时指定了 return，则新数组对应的每一项都是对应的 return 值；
2. forEach() 函数内没有 return ，不论是否显式的写明 return ，都不会返回数据。

四、适用场景：

1. map() 适用于需要根据原数组 arr 映射处理得到新的数组 newArr ，并且原数组 arr 不改变；
2. forEach() 适用于改变原数组 arr。

注意：我个人会这样使用，因为这样一看我就知道我的原数组是否有被改变。

五、代码演示：

建议：以下代码试验时，最好全部注释，一个个放开试验，效果更好

1、forEach()

// forEach()：
const arr = [11, 22, 33, 44]

// 1、三个参数：item（每一项）、index（项索引）、arr（数组）
arr.forEach((item, index, arr) => {
  console.log(item, index, arr)
  // 打印结果 - 打印四次
  // 11 0 [11, 22, 33, 44]
  // 22 1 [11, 22, 33, 44]
  // 33 2 [11, 22, 33, 44]
  // 44 3 [11, 22, 33, 44]
})

// 2、无return时，无返回值
const newArr = arr.forEach((item, index, arr) => {
  item * 10
})
console.log('arr', arr) // [11, 22, 33, 44]
console.log('newArr', newArr) // undefined

// 3、有return时，无返回值
const newArr1 = arr.forEach((item, index, arr) => {
  return item * 10
})
console.log('arr', arr) // [11, 22, 33, 44]
console.log('newArr1', newArr1) // undefined

// 4、更改每一项，但并未改变原数组
arr.forEach((item, index, arr) => {
  // 打印结果 - 打印四次
  // 11
  // 22
  // 33
  // 44
  console.log(item)
  item = item * 10
  console.log(item)
  // 打印结果 - 打印四次
  // 110
  // 220
  // 330
  // 440
})
console.log('arr', arr) // [11, 22, 33, 44]

// 4、通过arr[index]可更改原数组
arr.forEach((item, index, arr) => {
  arr[index] = item * 10
})
console.log('arr', arr) // [110, 220, 330, 440]

2、map()

// map()：
const arr = [11, 22, 33, 44]

// 1、三个参数：item（每一项）、index（项索引）、arr（数组）
arr.map((item, index, arr) => {
  console.log(item, index, arr)
  // 打印结果 - 打印四次
  // 11 0 [11, 22, 33, 44]
  // 22 1 [11, 22, 33, 44]
  // 33 2 [11, 22, 33, 44]
  // 44 3 [11, 22, 33, 44]
})

// 2、无return时，无返回值
const newArr = arr.map((item, index, arr) => {
  item * 10
})
console.log('arr', arr) // [11, 22, 33, 44]
console.log('newArr', newArr) // [undefined, undefined, undefined, undefined]

// 3、有return时，无返回值
const newArr1 = arr.map((item, index, arr) => {
  return item * 10
})
console.log('arr', arr) // [11, 22, 33, 44]
console.log('newArr1', newArr1) // [110, 220, 330, 440]

// 4、更改每一项，但并未改变原数组
arr.map((item, index, arr) => {
  // 打印结果 - 打印四次
  // 11
  // 22
  // 33
  // 44
  console.log(item)
  item = item * 10
  console.log(item)
  // 打印结果 - 打印四次
  // 110
  // 220
  // 330
  // 440
})
console.log('arr', arr) // [11, 22, 33, 44]

// 4、通过arr[index]可更改原数组
arr.map((item, index, arr) => {
  arr[index] = item * 10
})
console.log('arr', arr) // [110, 220, 330, 440]