如何使用js的map()函数

有时,你可能需要获取一个数组并将一些操作应用于其子项,以便获得具有已修改元素的新数组。

无需使用循环手动遍历数组,你可以简单地使用内置Array.map()方法。

Array.map()方法允许你遍历数组并使用回调函数修改其元素。然后,将对数组的每个元素执行回调函数。

例如,假设有以下数组元素:

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

现在,假设你需要将数组的每个元素乘以3。你可以考使用虑for循环,代码如下:

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

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

但是实际上可以使用该Array.map()方法来达到相同的结果。代码如下:

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

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

console.log(modifiedArr); // [9, 12, 15, 18]

Array.map()方法通常用于对元素进行一些更改,无论是乘以上面的代码中的特定数字,还是进行应用程序可能需要的任何其他操作。

如何在对象数组上使用map()

例如,您可能有一个对象数组,这些对象存储firstName和存储lastName值,如下所示:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

你可以使用map()在阵列上的方法来迭代和加入 firstNamelastName的值如下:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

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

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

map()方法传递的不仅仅是一个元素。让我们看看传递map()给回调函数的所有参数。

完整的map()方法语法

map()方法的语法如下:

arr.map(function(element, index, array){  }, this);

function()在每个数组元素上调用该回调,并且该map()方法始终将当前元素的索引和整个数组对象传递给它。

this参数将在回调函数中使用。默认情况下,其值为undefined。例如,下面是将this值更改为数字的方法80

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

arr.map(function(element, index, array){
    console.log(this) // 80
}, 80);

如果你有兴趣,还可以使用console.log()测试其他参数:

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

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);

这就是你需要了解的所有Array.map()方法。通常,将只在回调函数中使用element参数,而忽略其余参数。

本文系翻译,阅读原文

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 如何使用js的map()函数

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们