So verwenden Sie die JS.map()-Methode (Array-Methode)

Dieser Artikel stellt Ihnen die Methode Array.map() in JavaScript vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Manchmal müssen Sie möglicherweise ein Array nehmen und einige Operationen auf seine untergeordneten Elemente anwenden, um ein neues Array mit geänderten Elementen zu erhalten.

Anstatt das Array manuell mit einer Schleife zu durchlaufen, können Sie einfach die integrierte Methode Array.map() verwenden. 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

Mit der Methode Array.map() können Sie ein Array durchlaufen und seine Elemente mithilfe von Rückruffunktionen ändern. Die Callback-Funktion wird dann für jedes Element des Arrays ausgeführt.

Angenommen, Sie haben die folgenden Array-Elemente:
rrreee

Angenommen, Sie müssen jedes Element des Arrays mit 3 multiplizieren. Sie könnten for in Betracht ziehen, eine Schleife wie folgt zu verwenden:

rrreee

Aber Sie können tatsächlich die Methode Array.map() verwenden, um das gleiche Ergebnis zu erzielen. Hier ist ein Beispiel:

rrreee

Die Methode Array.map() wird normalerweise verwendet, um einige Änderungen an einem Element vorzunehmen, sei es die Multiplikation einer bestimmten Zahl wie im obigen Code oder was auch immer die Anwendung benötigt alle anderen Operationen.

So verwenden Sie map() für ein Array von Objekten

Zum Beispiel könnten Sie ein Array von Objekten haben, die firstName und lastName speichern Ihr Die Werte von Freunden lauten wie folgt:

rrreee🎜 Sie können die Methode map() für das Array verwenden, um die Werte von firstName und zu iterieren und zu verbinden lastName Der Code> lautet wie folgt: 🎜rrreee🎜Die Methode map() übergibt mehr als nur ein Element. Schauen wir uns alle an die Rückruffunktion übergebenen Parameter an. 🎜

Vollständige Syntax der Methode „map()“

🎜Die Syntax der Methode map() lautet wie folgt: 🎜rrreee🎜function() in jedem Array element Der Rückruf wird aufgerufen und die Methode map() ordnet immer das aktuelle element, den index des aktuellen Elements und den gesamten array code>-Objekt wird ihm übergeben. 🎜🎜Der Parameter this wird in der Callback-Funktion verwendet. Standardmäßig ist der Wert undefiniert. So ändern Sie beispielsweise den Wert von this in eine Zahl 80: 🎜rrreee🎜console.log() Wenn Sie interessiert sind , können Sie andere Parameter testen mit: 🎜rrreee🎜Das ist alles, was Sie über die Methode Array.map() wissen müssen. Normalerweise verwenden Sie in der Rückruffunktion nur element-Parameter und ignorieren den Rest. Das mache ich normalerweise in meinen täglichen Projekten :)🎜🎜🎜Englische Originaladresse:🎜🎜🎜https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map- function-array-method/🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die JS.map()-Methode (Array-Methode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!