JavaScript 中的 Map 索引

Muhammad Muzammil Hussain 2022年5月10日
JavaScript 中的 Map 索引

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 方法。

相关文章 - JavaScript Map