JavaScript - 数组 map() 方法
在 JavaScript 中，Array.map() 方法通过对原始数组的每个元素应用提供的函数来创建一个新数组。它不会修改原始数组，而是返回一个新数组，其中包含对每个元素应用提供的函数的结果。此方法不会对空数组元素执行该函数。
语法
以下是 JavaScript 数组 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
在下面的示例中，我们将 squareRoot 函数作为回调函数传递给 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}]
