如何使用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()
在阵列上的方法来迭代和加入 firstName
和lastName
的值如下:
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 参数,而忽略其余参数。
本文系翻译,阅读原文
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何使用js的map()函数
码云笔记 » 如何使用js的map()函数