有时,你可能须要获取一个数组并将一些操作利用于其子项,以便取得具备已批改元素的新数组。
无需应用循环手动遍历数组,你能够简略地应用内置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
在回调函数中应用参数,而疏忽其余参数。这就是我通常在日常我的项目中所做的事件:)