JavaScript .map() 方法 📍 Map 方法

2025-06-10

JavaScript .map() 方法 📍

Map 方法

大家好。希望大家平安,都戴着口罩😷。
今天,正如承诺的那样,我们将讨论 JavaScript 中的 .map() 方法。

Map 方法

Array.map() 方法允许我们迭代数组并使用回调函数修改其元素。换句话说,map() 方法会为每个数组元素调用一个函数,从而创建一个新数组。它会按顺序对数组中的每个元素调用一次提供的函数。请记住,它不会对空元素执行该函数。因此,在使用该方法时,请确保要映射的数组存在。否则,您的代码可能会停止运行。map() 最不可思议的特性是它不会更改原始数组。您会得到一个新的结果,而原始数组仍然完好无损。

句法

array.map(function(element, index, array), this)
Enter fullscreen mode Exit fullscreen mode

回调函数 () 在每个数组元素上调用,map 方法始终将当前元素、当前元素的索引以及整个数组对象传递给它。this
参数将在回调函数内部使用。默认情况下,其值为 undefined。使用 this 完全是可选的。传递给函数的值将用作其 this 值。如果 this 参数为空,则将传递 undefined 作为其 this 值。

示例

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr);
// [9, 12, 15, 18]
Enter fullscreen mode Exit fullscreen mode

映射对象数组

let users = [
    {firstName: "Mursal", lastName: "Furqan"}
    {firstName: "Muhammad", lastName: "Ali"}
    {firstName: "Vedant", lastName: "Khairnar"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
});

console.log(userFullnames);
// ["Mursal Furqan", "Muhammad Ali", "Vedant Khairnar"]
Enter fullscreen mode Exit fullscreen mode

更改此默认值

下面介绍如何将“this”值更改为数字 06:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(this) // 06
}, 06);
Enter fullscreen mode Exit fullscreen mode

您还可以以更简单的方式使用预定义方法。在下一个示例中,我们将展示如何使用 map() 在两行代码中对整个数组求平方根。

const numbers = [16, 81, 4, 25];
const newArr = numbers.map(Math.sqrt)
// And we are done with taking square root of our array. Let's see it in console

console.log(newArr)
// [4, 9, 2, 5]
Enter fullscreen mode Exit fullscreen mode

在我们的下一篇文章中,我们将讨论一些更酷的东西😎
或者,你可以在下面的评论中建议我们接下来应该写什么。🎆

鏂囩珷鏉ユ簮锛�https://dev.to/mursalfk/javascript-map-method-1456
PREV
如何使用 CSS 和 JavaScript 创建 Google 的 Material Design 文本输入字段?
NEXT
开发人员应避免的 CSS 实践