JavaScript .map() 方法 📍
Map 方法
大家好。希望大家平安,都戴着口罩😷。
今天,正如承诺的那样,我们将讨论 JavaScript 中的 .map() 方法。
Map 方法
Array.map() 方法允许我们迭代数组并使用回调函数修改其元素。换句话说,map() 方法会为每个数组元素调用一个函数,从而创建一个新数组。它会按顺序对数组中的每个元素调用一次提供的函数。请记住,它不会对空元素执行该函数。因此,在使用该方法时,请确保要映射的数组存在。否则,您的代码可能会停止运行。map() 最不可思议的特性是它不会更改原始数组。您会得到一个新的结果,而原始数组仍然完好无损。
句法
array.map(function(element, index, array), this)
回调函数 () 在每个数组元素上调用,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]
映射对象数组
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"]
更改此默认值
下面介绍如何将“this”值更改为数字 06:
let arr = [2, 3, 5, 7]
arr.map(function(element, index, array){
console.log(this) // 06
}, 06);
您还可以以更简单的方式使用预定义方法。在下一个示例中,我们将展示如何使用 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]
在我们的下一篇文章中,我们将讨论一些更酷的东西😎
或者,你可以在下面的评论中建议我们接下来应该写什么。🎆