Analyse zur Verwendung der Methode „map()' für die Array-Verarbeitung in JavaScript

In diesem Artikel wird Ihnen die Verwendung der Map()-Methode zur Verarbeitung von Array-Daten und der Unterschied zwischen der Map()-Methode und der forEach-Anweisung vorgestellt. Schauen wir uns den spezifischen Inhalt unten an.

Werfen wir zunächst einen Blick auf die grundlegende Syntax von map()

var array = [ 数组数据 ];
array.map(回调函数);

Map ist eine Methode für Arrays data kann für jedes Element eine „Callback-Funktion“ ausgeführt werden und das Ergebnis als neues Array zurückgegeben werden.

Mit anderen Worten: Indem Sie den auszuführenden Prozess in diese Funktion schreiben, können Sie jede Operation für jedes Element des Arrays ausführen!

Wie iteriere ich mit der Kartenmethode über ein Array?

Das folgende Beispiel ist ein Beispiel für die Verwendung der Kartenmethode für ein Array mit numerischen Daten

var items = [1,2,3,4,5];
 
var result = items.map(function( value ) {
    return value * 2;
});
console.log( result );

Das Ausgabeergebnis ist wie folgt

In diesem Beispiel wird die Callback-Funktion verwendet, um jedes Element des Wertearrays „1 bis 5“ zu verdoppeln.

Aus diesem Grund weisen wir ein Array zu, dessen Ergebnis als Rückgabewert von „result“ verdoppelt wird, sodass Sie sehen können, dass das Ausgabeergebnis das Doppelte seines eigenen Werts wird.

Anfangs ging es nur darum, Schleifen mit for-Anweisungen oder while-Anweisungen zu schreiben, aber die Verwendung von Map ist sehr praktisch, da sie mit einem sehr einfachen Programm implementiert werden kann!

Es gibt auch eine Reduce()-Methode in Analyse zur Verwendung der Methode „map() für die Array-Verarbeitung in JavaScript, die der Map()-Methode ähnelt. Sie können diesen Artikel über die Reduce()-Methode lesen: So verwenden Sie Reduce in Analyse zur Verwendung der Methode „map() für die Array-Verarbeitung in JavaScript

Informationen zum Unterschied zwischen den Methoden Reduce() und Map() finden Sie in diesem Artikel:Was ist der Unterschied zwischen Map() und Reduce() in Analyse zur Verwendung der Methode „map() für die Array-Verarbeitung in JavaScript

map( ) und die forEach-Anweisung?

map() ähnelt der forEach-Anweisung und kann auf die gleiche Weise auf Arrays angewendet werden.

Sehen wir uns ein konkretes Beispiel an

//forEach
[1,2,3].forEach(function( value ) {
   console.log( value );
});
 
 
//map
[1,2,3].map(function( value ) {
    console.log( value );
});

Die Ausgabeergebnisse sind die gleichen wie

Wie in diesem Beispiel Wie Sie sehen können, sind die von forEach und map erzielten Ergebnisse dieselben.

Was ist also der Unterschied zwischen ihnen? Der größte Unterschied besteht darin, ob sie einen Rückgabewert haben.

Mit anderen Worten, forEach ist nur eine Ausführungsmethode und Map gibt das Ergebnis nach der Ausführung als Array-Daten zurück.

Schauen wir uns das Beispiel genauer an

forEach:

var result = [1,2,3].forEach(function( value ) {
 
    return value * 2;
 
});
 
console.log( result );

Das Ausgabeergebnis ist wie folgt:

Der Rückgabewert von forEach ist nicht sichtbar.

map:

var result = [1,2,3].map(function( value ) {
 
    return value * 2;
 
});
 
console.log( result );

Das Ausgabeergebnis ist

Sie können Array-Daten als Ausführung zurückgeben Ergebnis .

Map-Callback-Funktion

Bevor wir gesehen haben, dass die Callback-Funktion nur einen Parameter hat, können Sie sie tatsächlich verwenden, um drei Parameter zu haben!

数组数据.map( function( value, index, array ) {

});

Wert ist der Wert des Arrays

Index ist die Indexnummer des Arrays

Array ist das Array, das gerade verarbeitet wird

Zum Beispiel: Im folgenden Beispiel verwenden wir den Parameterindex, um den Wert der geraden Zahl zu verdoppeln

var items = [1,2,3,4,5,6,7,8,9];
var result = items.map( function( value, index, array ) {
    if( index % 2 !== 0 ) {
        return value * 2;
    }
    else {
        return value;
    }
});
console.log( result );

Das Ausgabeergebnis ist wie folgt

Zusätzlich: Map hat ein Problem mit der ursprünglichen Array-Funktion, um Änderungen an den Daten vorzunehmen. Wenn Sie jedoch das dritte Parameter-Array verwenden, können Sie auch die Originaldaten ändern!

var items = [1,2,3,4,5,6,7,8,9];
 
items.map( function( value, index, array ) {
 
    array[index] = value * 2;
 
});
 
console.log( items );

Die Ausgabe ist wie folgt

In der Vergangenheit wurde die „Callback-Funktion“ als erster Parameter von „map“ angegeben, aber tatsächlich Sie können ein beliebiges „Objekt“ als zweites Argument angeben!

var array = [ 数组数据 ]; 
//指定对象为第2个参数
array.map( 回调函数, 对象 );

Dadurch ist es möglich, bestimmte Arrays und Objekte für eine komfortablere Programmierung zu kombinieren.

Im folgenden Beispiel wird beispielsweise das einfache Lebensmittelobjekt foodList als zweiter Parameter der Karte angegeben.

var foodList = {
  '苹果': 45,
  '哈密瓜': 50,
  '猕猴桃': 60,
  '草莓': 40
};
数组.map( function( value ) {
 
}, foodList );

Wir geben ein beliebiges Schlüsselwort aus dem Objekt an und geben „Preis“ zurück.

var foodList = {
  '苹果': 45,
  '哈密瓜': 50,
  '猕猴桃': 60,
  '草莓': 40
};
var order = ['草莓', '猕猴桃'];
var result = order.map( function( value, index, array ) {
    return this[value];
 
}, foodList );
console.log( result );

Die Ausgabe ist wie folgt

In diesem Beispiel können Sie sehen, dass der Schlüssel in der Array-Reihenfolge festgelegt ist, aus der der Schlüssel erhalten wird mit dem Schlüssel, der dem Objekt gehört, stimmt mit „price“ überein und gibt ihn als Array zurück.

Das obige ist der detaillierte Inhalt vonAnalyse zur Verwendung der Methode „map()' für die Array-Verarbeitung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!