面试题：JavaScript中数组的map和forEach方法的区别

Question

请详细阐述JavaScript数组的map方法和forEach方法在功能、返回值以及使用场景上有哪些区别，并举例说明。

Answer 1

功能区别

1. map方法：
   • map方法会创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。它不会改变原始数组。
   • 例如：

   const numbers = [1, 2, 3];
   const squaredNumbers = numbers.map((num) => num * num);
   console.log(squaredNumbers); // [1, 4, 9]
   console.log(numbers); // [1, 2, 3]，原始数组未改变
   

2. forEach方法：
   • forEach方法用于调用数组的每个元素，并将元素传递给回调函数。它主要用于遍历数组并对每个元素执行某些操作，不会返回新数组。
   • 例如：

   const numbers = [1, 2, 3];
   numbers.forEach((num) => console.log(num * num));
   // 输出：1 4 9，不会返回新数组
   

返回值区别

1. map方法：
   • 返回一个新数组，新数组的长度与原数组相同，每个元素是原数组对应元素经过回调函数处理后的结果。
   • 如上述map方法示例中，squaredNumbers就是返回的新数组。
2. forEach方法：
   • 返回值为undefined。因为它主要是用于执行副作用操作（如打印日志、修改外部变量等），而不是返回新的数据结构。
   • 例如：

   const result = [1, 2].forEach((num) => num * num);
   console.log(result); // undefined
   

使用场景区别

1. map方法：
   • 当需要基于现有数组创建一个新数组，且新数组的元素是原数组元素经过某种转换得到时，适合使用map方法。
   • 比如将数组中的所有字符串转换为大写：

   const words = ['hello', 'world'];
   const upperCaseWords = words.map((word) => word.toUpperCase());
   console.log(upperCaseWords); // ['HELLO', 'WORLD']
   

2. forEach方法：
   • 当只需要对数组中的每个元素执行一些操作，而不需要返回新数组时，适合使用forEach方法。例如，为页面上的所有按钮添加点击事件：

   const buttons = document.querySelectorAll('button');
   buttons.forEach((button) => {
       button.addEventListener('click', () => {
           console.log('Button clicked');
       });
   });