互联网常识:如何使用JS.map 方法(数组方法) |
您所在的位置:网站首页 › js的map用法 › 互联网常识:如何使用JS.map 方法(数组方法) |
本篇文章给大家介绍一下JavaScript中的Array.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()方法始终将current element,index当前元素的of和整个array对象传递给它。 该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在回调函数中使用参数,而忽略其余参数。这就是我通常在日常项目中所做的事情:) 英文原文地址: https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map-function-array-method/ 更多编程相关知识,请访问:编程入门!! 以上就是如何使用JS.map()方法(数组方法)的详细内容,更多请关注php中文网其它相关文章! 来源:php中文网 郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时候联系我们修改或删除,多谢。 标签: 如何使用JS map 方法(数组方法) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |