JavaScript 中的 Map 索引
Muhammad Muzammil Hussain
2023年10月12日
JavaScript map 方法很容易实现，我们将讨论它的不同参数以及它们在不同场景中的使用方式。
在 JavaScript 中使用 array.map() 方法
JavaScript array.map() 方法为数组的每个元素调用一个特定的函数，并因此返回一个新数组。
重要的是该方法不会更改原始数组。它返回一个新的处理数组。
语法：
array.map(call_Back_Function(element, index, arr) {
// Code to perform operation on array
}, this)
array.map() 方法的不同参数是
call_Back_Function是一个特定的函数，它在对旧数组执行定义的操作后产生新的数组元素。element是我们将操作的原始数组的当前元素。index是我们将对其执行特定操作的当前元素的索引。arr是原始数组，我们将在其上执行所需的操作以获取新的已处理数组。这里它的值是可选的。- 回调函数值执行期间的
this用作this。它的值也是可选的。
返回
作为 array.map() 方法的结果，我们得到一个新数组，其每个元素都是从 call_Back_Function 生成的。
以下是未调用的 array.map() 方法：
- 从未设置的索引。
- 所有这些索引已被删除。
何时不使用 array.map()
我们不能在以下情况下使用 array.map() 方法：
- 如果没有我们需要执行所需操作的数组，请不要使用
array.map()方法。 - 如果你需要数组元素保持不变而不执行任何操作，请避免使用
array.map()方法。
在下面的代码行中，我们将把一个数字数组映射到一个平方根数组。
var numbers = [1, 4, 9];
var square_roots = numbers.map(function(numbers) {
return Math.sqrt(numbers)
})
// So, orignal array remained the same, numbers = [1, 4, 9]
// new processed array as output is, square_roots = [1, 2, 3]
在下文中，array.map() 方法在对十进制数数组进行操作后返回一个新的已处理整数数组。
var orignal_array = [1.5, 4.3, 6.4, 8.7];
var new_array = orignal_array.map(Math.round);
document.writeln(new_array);
// Here orignal_array will remain same [1.5, 2.3, 5.4]
// new processed array output is [2, 4, 6, 9]
同样，我们可以使用 array.map() 方法重新格式化 array 对象。
var array =
[{id: 1, name: 'owais'}, {id: 2, name: 'ali'}, {id: 3, name: 'ahmed'}]
array.map(function(obj) {
console.log(obj.id)
console.log(obj.name)
})
// console output
1
'owais'
2
'ali'
3
'ahmed'
此外，以下示例演示了我们可以在何处以及如何使用 JavaScript array.map() 方法。
示例 1：
<html>
<head>
<title>
JS map() method explanation
</title>
</head>
<body>
<h2>
JavaScript array map() method demonstration
</h2>
<!-- javascript array map method -->
<script>
let employees = ["Owais", "Ahmad","Hassan", "Mughira", "Wasim"];
employees.map((emp, index) =>
{
alert("Greetings__Mr. " + emp + "\n");
index++;
alert("On employee rank, You have got Position : " + index + "\n");
});
</script>
</body>
</html>
输出：
Greetings__Mr. Owais
On employee rank, You have got position : 1
Greetings__Mr. Ahmad
On employee rank, You have got position : 2
Greetings__Mr. Hassan
On employee rank, You have got position : 3
Greetings__Mr. Mughira
On employee rank, You have got position : 4
Greetings__Mr. Wasim
On employee rank, You have got position : 5
示例 2：
<html>
<head>
<title> JavaScript map method demonstration </title>
</head>
<body>
<h1 style="color: brown;"> <u> map index in javascript array </u></h1>
<p><b> Here we have a word "DELFTSTACK" and by using JavaScript
map index we will identify element on every index.</b> </p>
<script>
const name = [ 'D', 'E', 'L', 'F', 'T', 'S','T','A','C','K'];
name.map((element, index) => {
document.write("Iteration no : " + index);
document.write("<br>");
document.write("Element = " + element);
document.write("<br>");
document.write("<br>");
return element;
});
</script>
</body>
</html>
输出：
map index in javascript array
Here we have the word "DELFTSTACK," and we will identify elements on every index using JavaScript map index.
Iteration no : 0
Element = D
Iteration no : 1
Element = E
Iteration no : 2
Element = L
Iteration no : 3
Element = F
Iteration no : 4
Element = T
Iteration no : 5
Element = S
Iteration no : 6
Element = T
Iteration no : 7
Element = A
Iteration no : 8
Element = C
Iteration no : 9
Element = K
上面的例子描述了 JavaScript 中的 array.map() 方法和 callback 函数中作为参数的 indexing 方法。