Heim > Web-Frontend > Front-End-Fragen und Antworten > Konvertieren Sie das JQuery-Array in ein Schlüssel-Wert-Paar

Konvertieren Sie das JQuery-Array in ein Schlüssel-Wert-Paar

WBOY
Freigeben: 2023-05-28 12:54:37
Original
823 Leute haben es durchsucht

Bei der Frontend-Entwicklung ist häufig die Verarbeitung von Arrays und Objekten beteiligt. Wenn wir ein Array in Schlüssel-Wert-Paare umwandeln müssen, können wir die Methoden $.map() und $.each() in jQuery verwenden. Im Folgenden finden Sie eine detaillierte Einführung in die Verwendung dieser beiden Methoden.

1. Die Methode $.map()

Die Methode $.map() kann ein Array in ein anderes Array konvertieren. Während dieses Konvertierungsprozesses können wir jedes Element bearbeiten und dann einen neuen Wert zurückgeben. Die grundlegende Syntax lautet wie folgt:

jQuery.map( array, callback [, thisArg ] )
Nach dem Login kopieren

Unter diesen stellt Array das zu verarbeitende Array dar, Callback stellt eine Rückruffunktion dar, um jedes Element zu bedienen und einen neuen Wert zurückzugeben, und thisArg stellt das optionale Kontextobjekt dar.

Für das Szenario der Konvertierung in Schlüssel-Wert-Paare können wir die Methode $.map() verwenden, um das ursprüngliche Array zu verarbeiten und jedes darin enthaltene Element in ein Schlüssel-Wert-Paar-Objekt umzuwandeln.

Zum Beispiel haben wir ein Array arr, das einige String-Elemente enthält. Jetzt wollen wir es in ein Schlüssel-Wert-Paar umwandeln, in dem alle Elemente Schlüssel sind und ihre Werte wahr sind. Dann können wir es so schreiben dies:

var arr = ["apple", "pear", "banana", "orange"];
var kvObj = $.map(arr, function(item, index) {
    var obj = {};
    obj[item] = true;
    return obj;
});
console.log(kvObj); // [{ apple: true }, { pear: true }, { banana: true }, { orange: true }]
Nach dem Login kopieren

Im obigen Code definieren wir eine Rückruffunktion, die zwei Parameter item und index empfängt. Diese Funktion wandelt jedes Element in ein Objekt um, wobei das Element der Schlüssel und der Wert wahr ist, und gibt das Objekt zurück. Das zurückgegebene Endergebnis ist ein Array von Objekten. Jedes Objekt ist ein Schlüssel-Wert-Paar.

2. Die Methode $.each() unterscheidet sich von der Methode $.map(). Die Methode $.each() kann das Array oder Objekt durchlaufen und für jedes Element eine Rückruffunktion ausführen. Zu den Parametern der Callback-Funktion gehören der Schlüssel und der Wert des Elements.

Die grundlegende Syntax lautet wie folgt:

jQuery.each( collection, callback(indexInArray, valueOfElement) )
Nach dem Login kopieren

Unter diesen stellt die Sammlung das zu durchlaufende Objekt oder Array dar, und der Rückruf stellt die Rückruffunktion dar, die jedes Element verarbeitet.

Wir können ein Array in Schlüssel-Wert-Paare umwandeln, was auch über die Methode $.each() erreicht werden kann.

Zum Beispiel haben wir ein Array arr, das einige String-Elemente enthält. Jetzt wollen wir es in ein Schlüssel-Wert-Paar umwandeln, wobei alle Elemente Schlüssel sind und ihre Werte die Indexpositionen der entsprechenden Elemente im Array, dann können Sie es so schreiben:

var arr = ["apple", "pear", "banana", "orange"];
var kvObj = {};
$.each(arr, function(index, item) {
    kvObj[item] = index;
});
console.log(kvObj); // { apple: 0, pear: 1, banana: 2, orange: 3 }
Nach dem Login kopieren

Im obigen Code definieren wir eine Rückruffunktion, die zwei Parameter index und item empfängt. Jedes Mal, wenn ein Element durchlaufen wird, wird das Element als Schlüssel und seine Indexposition als Wert verwendet und in einem Objekt gespeichert. Das zurückgegebene Endergebnis ist ein Schlüssel-Wert-Paarobjekt.

Zusammenfassung:

Die oben genannten sind die beiden Methoden zum Konvertieren von jQuery-Arrays in Schlüssel-Wert-Paare. Geeignet für verschiedene Szenarien, Sie können frei wählen, welche Methode Sie verwenden möchten. Beim Umgang mit Arrays und Objekten können wir die Methoden $.map() und $.each() sinnvollerweise entsprechend den tatsächlichen Anforderungen verwenden, um die Effizienz und Lesbarkeit des Codes zu verbessern.

Das obige ist der detaillierte Inhalt vonKonvertieren Sie das JQuery-Array in ein Schlüssel-Wert-Paar. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage