JavaScript 中的 Map 索引

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 中的 Map 索引

作者：迹忆客最近更新：2024/03/20 浏览次数：

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