JavaScript >> Javascript-Tutorial >  >> Tags >> map

So verwenden Sie die Methode Array.map() in JavaScript

Der Array.prototype.map() -Methode wurde in ES6 (ECMAScript 2015) zum Iterieren von und eingeführt Manipulieren von Elementen eines Arrays auf einmal. Diese Methode erstellt ein neues Array, indem sie die angegebene Funktion für jedes Element im Array ausführt.

Die Array.map() -Methode akzeptiert eine Rückruffunktion als Parameter, den Sie für jedes Element im Array aufrufen möchten. Diese Funktion muss nach Durchführung aller Änderungen einen Wert zurückgeben.

Der Rückruf akzeptiert bis zu drei Betriebsparameter. Das erste ist das aktuelle Element in der Iteration, das zweite der Index des aktuellen Elements im Array und das dritte das Array selbst.

Betrachten wir das folgende Beispiel:

const prices = [45, 9.99, 33, 50];

const updatedPrices = prices.map(price => '$' + price);

console.log(updatedPrices); 

// ['$45', '$9.99', '$33', '$50']

Wie Sie oben sehen können, haben wir den map() verwendet -Funktion, um über ein Array von Zahlen zu iterieren und seine Elemente in Zeichenfolgen umzuwandeln, indem ein Währungssymbol vorangestellt wird. Die updatedPrices Variable ist ein neu erstelltes Array mit den Ergebnissen der Ausführung einer Funktion für jedes Element im übergeordneten Array.

Denken Sie daran, dass der Array.map() ist nicht-mutierend Funktion, was bedeutet, dass sie das ursprüngliche Array nicht ändert und sich nur auf die Ergebnisse der bereitgestellten Funktion verlässt, um ein neues Array zu erstellen.

Der Bereich der vom map() verarbeiteten Elemente Funktion wird vorher entschieden der erste Aufruf. Wenn dem Array nach dem map() neue Elemente hinzugefügt werden beginnt, werden sie vom Callback nicht verarbeitet.

Beispiele

Zusätzlich zum Iterieren über alle Elemente eines Arrays und deren Transformation kann der map() Methode kann verwendet werden, um mehr Dinge zu tun. Sehen wir uns unten ein paar weitere Beispiele an.

Extrahieren von Werten aus einem Array von Objekten

Die map() -Methode ist äußerst nützlich, um Werte aus einem Array von Objekten zu extrahieren. Nehmen wir an, Sie haben das folgende JSON-Array, das die Namen und das Alter der Benutzer enthält:

const users = [
    {
        name: 'John Deo',
        age: 35
    },
    {
        name: 'Emma Kel',
        age: 24
    },
    {
        name: 'Kristy Adam',
        age: 42
    }
];

Hier ist ein Beispiel, das map() verwendet um alle Altersgruppen zu extrahieren und sie als neues Array zurückzugeben:

const ages = users.map(user => user.age);

console.log(ages);

// [35, 24, 42]

Transformierendes Array von Objekten

Die map() -Methode kann verwendet werden, um alle Objekte in einem Array zu durchlaufen, den Inhalt jedes einzelnen Objekts zu transformieren und ein neues Array zurückzugeben. Hier ist ein Beispiel:

const modifiedUsers = users.map(user => {

    // assign a random color to each user
    user.color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

    // return modified user
    return user;
});

console.log(modifiedUsers);

// [ 
//   { name: 'John Deo', age: 35, color: '#f76f4b' },
//   { name: 'Emma Kel', age: 24, color: '#e05341' },
//   { name: 'Kristy Adam', age: 42, color: '#48242c' } 
// ]

Schlussfolgerung

Die Array.map() -Methode in JavaScript wird verwendet, um alle Elemente eines Arrays zu durchlaufen und ein neues Array zu erstellen. Hier sind ein paar Dinge, die Sie bei Array.map() beachten sollten :

  • Sie ruft die bereitgestellte Funktion für jedes Element in einem Array auf und gibt ein neues Array zurück.
  • Es verändert den Inhalt des ursprünglichen Arrays nicht und nur erstellt ein neues Array mit den Werten, die von der aufgerufenen Funktion zurückgegeben werden.
  • Neue Elemente, die dem Array nach map() hinzugefügt wurden Funktionsbeginne werden nicht verarbeitet.

Die Array.map() Methode funktioniert in allen modernen Browsern und Internet Explorer 9 und höher. Sie können eine Polyfüllung verwenden, um IE6 und höher zu unterstützen.

Werfen Sie einen Blick auf diesen Artikel, um mehr über JavaScript-Arrays und ihre Methoden zu erfahren.