1. 首页
  2. JavaScript 菜鸟教程
  3. JavaScript - Array map() 方法

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

在下面的示例中，我们将 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}]
<< JavaScript - Array lastIndexOf() 方法 JavaScript - Array pop() 方法 >>