JavaScript - Array map() 方法

在 JavaScript 中，Array.map() 方法通过对原始数组中的每个元素应用提供的函数来创建一个新数组。它不会修改原始数组；而是返回一个包含将提供的函数应用于每个元素的结果的新数组。此方法不会为空数组元素执行函数。

语法

以下是 JavaScript Array map() 方法的语法：

array.map(callbackFn (element, index, array), thisArg);

参数

此方法接受两个参数。如下所述：

callbackfn − 这是一个回调函数，将为数组中的每个元素调用一次。它进一步采用三个参数
- element − 数组中正在处理的当前元素。
- index − 正在处理的当前元素的索引。
- array − 当前元素的数组。
thisArg (可选) − 它指定传递给函数的值，用作其this 值。

返回值

此方法返回一个新数组，其中包含将提供的函数应用于原始数组中每个元素的结果。

示例

示例 1

在下面的示例中，我们将乘法函数作为回调函数传递给 map() 方法，它将所有数组元素乘以 10。

<html>
<body>
   <p id="demo"></p>
   <script>
      const numbers = [5, 10, 15, 20];
      const result = numbers.map(multiplication);
      function multiplication(num){
         return num * 10;
      }
      document.getElementById("demo").innerHTML = result;
   </script>
</body>
</html>

输出

正如我们看到的输出，所有数组元素都乘以 10，并产生一个新数组。

50,100,150,200

示例 2

在下面的示例中，我们将平方根函数作为回调函数传递给 map() 方法，它计算数组中所有元素的平方根：

<html>
<body>
   <p id="demo"></p>
   <script>
      const numbers = [5, 10, 15, 20];
      const result = numbers.map(squareRoot);
      function squareRoot(num){
         return num * num;
      }
      document.getElementById("demo").innerHTML = result;
   </script>
</body>
</html>

执行上述程序后，map() 方法将返回所有数组元素的平方根。

输出

25,100,225,400

示例 3

在这里，我们通过将回调函数传递给 map() 函数来获取每个玩家的姓名和总得分。

<html>
<body>
   <p id="demo"></p>
   <script>
      const Players = [
         { name: "Virat Kohli", ODI: 13848, Test: 8676, T20: 4008 },
         { name: "Joe Root", ODI: 6522, Test: 11416, T20: 893 },
         { name: "Ricky Ponting", ODI: 13704, Test: 13378, T20: 401 },
         { name: "Hashim Amla", ODI: 8113, Test: 9282, T20: 1277 },
      ];
      const calculateStatistics = (item) => {
         let resultArr = {};
         resultArr.name = item.name;
         resultArr.TotalRuns = item.ODI + item.Test + item.T20;
         return resultArr;
      };
      let result = Players.map(calculateStatistics);
      document.getElementById("demo").innerHTML = JSON.stringify(result);
   </script>
</body>
</html>

输出

正如我们在输出中看到的，map() 方法在一个新数组中返回所有玩家的姓名和总得分。

[{"name":"Virat Kohli","TotalRuns":26532},{"name":"Joe Root","TotalRuns":18831},{"name":"Ricky Ponting","TotalRuns":27483},{"name":"Hashim Amla","TotalRuns":18672}]

打印页面