forEach与map区别及使用场景

forEach

• 遍历数组中的元素
• 为每个元素执行回调
• 无返回值

  const a = [1,2,3]
  const b = a.forEach((num,index) => {
      // 执行 num、index 相关的代码
  })
  
      // b = undefined 

  map

• 遍历数组中的元素

• 通过对每个元素调用函数，将每个元素 “ 映射（map) ” 到一个新元素，从而创建一个新数组

  const a = [a,b,c]
  const b = a.map((num)=>{
         return num*2
  })
  
  //b=[2,4,6]

  .forEach和.map 主要区别在于：.map( ) 返回一个新数组，如你想得到一个结果，但不想改变原始数组，用map；如你只需要在数组上做迭代修改，用forEach。

 语法和用法：

    1、forEach

array.forEach(callback(element, index, array));

• callback 是在数组的每个元素上执行的函数。
• element 代表当前数组元素。
• index 代表当前元素的索引。
• array 是调用 forEach 的数组本身。

  const fruits = ['苹果', '香蕉', '橙子', '葡萄'];
  
  fruits.forEach((fruit, index) => {
    console.log(`第${index + 1}个水果是${fruit}`);
  });
  
  

  2、map

  const newArray = array.map(callback(element, index, array));
  

• callback 是在数组的每个元素上执行的函数。
• element 代表当前数组元素。
• index 代表当前元素的索引。
• array 是调用 map 的数组本身。

  const numbers = [1, 2, 3, 4, 5];
  const squaredNumbers = numbers.map((num) => num * num);
  
  console.log(squaredNumbers); // 输出 [1, 4, 9, 16, 25]
  

使用场景：

• 使用 forEach 当你需要在数组元素上执行操作，但不需要生成一个新的数组。例如，你可能会使用 forEach 来更新原始数组的值，而不关心返回的结果。
• 使用 map 当你需要创建一个新的数组，其中包含根据原始数组的元素生成的新值。这在将原始数据映射到新数据时非常有用，例如从一个数组中提取特定属性并创建一个包含这些属性的新数组。