乐趣区

关于javascript:JavaScript-Map-–如何使用JSmap函数

jiezi

有时，你可能须要获取一个数组并将一些操作利用于其子项，以便取得具备已批改元素的新数组。

无需应用循环手动遍历数组，你能够简略地应用内置 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 在回调函数中应用参数，而疏忽其余参数。这就是我通常在日常我的项目中所做的事件：）

退出移动版