在 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
在下面的示例中,我们将 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}]

