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}]

列印頁面