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

上面的例子描述了 JavaScript 中的 array.map() 方法和 callback 函数中作为参数的 indexing 方法。

上一篇：JavaScript 中 let 和 var 的区别

下一篇：在 JavaScript 中遍历 Map

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

Do you understand JavaScript closures?

发布时间：2025/02/21 浏览次数：108 分类：JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间：2025/02/21 浏览次数：178 分类：JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间：2025/02/21 浏览次数：150 分类：JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

jQuery 中的日期选择器

发布时间：2024/03/24 浏览次数：99 分类：JavaScript

本文将讨论使用 jQuery UI 库的 jQuery 中的 Datepicker。

用 jQuery 检查复选框是否被选中

发布时间：2024/03/24 浏览次数：102 分类：JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

jQuery 中的 $.Ajax 数据类型

发布时间：2024/03/24 浏览次数：133 分类：JavaScript

本教程演示了在 jQuery 中使用 $.ajax 数据类型。

在 jQuery 中检查字符串是否包含子字符串

发布时间：2024/03/24 浏览次数：106 分类：JavaScript

本教程演示了如何在 jQuery 中使用 contains() 方法。

在 jQuery 中检查和取消检查复选框

发布时间：2024/03/24 浏览次数：94 分类：JavaScript

本文演示了如何使用 jQuery 选中和取消选中复选框。

jQuery 中的 Window.onload 与 $(document).ready

发布时间：2024/03/24 浏览次数：180 分类：JavaScript

本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。

迹忆客专注技术分享