JavaScript -Array -Methoden: sortieren, karten, filtern und reduzieren

Beherrschen Sie die JavaScript -Array -Methode: Sortieren, Zuordnung, Filterung und Regulierung zur Verbesserung Ihrer Webentwicklungseffizienz! In diesem Artikel werden die Methoden

, sort, map und filter des JavaScript -Arrays erörtert und praktische Beispiele enthält, die Ihnen die Datenverarbeitung behindern. reduce

1. array.prototype.sort

   Sortierungsmethode

Methoden ordnen Array -Elemente gemäß der angegebenen Reihenfolge an. Standardmäßig sortierte es das String -Element in der sequentiellen Sequenz des Wörterbuchs. Durch benutzerdefinierte Vergleichsfunktionen können Sie jedoch eine kompliziertere Sortierlogik erreichen.

Grammatik sort

: Definieren Sie die Funktionen der Sortierreihenfolge. Es empfängt zwei Parameter (a, b) und gibt zurück:

<code class="language-javascript">array.sort([compareFunction])</code>

Negativer Wert: Wenn a vor B.

• Null: Wenn A und B gleich sind. compareFunction
  positiver Wert: Wenn A hinter B. eingestuft werden sollte
  • Beispiel: Sortieren Sie die Nummer in der sequentiellen Reihenfolge
Beispiel: Sortieren nach Attributsortierobjekt

<code class="language-javascript">const numbers = [42, 7, 19, 73, 23];

numbers.sort((a, b) => a - b);

console.log(numbers); // 输出：[7, 19, 23, 42, 73]</code>

Methoden ändern das Originalarray.

für Zahlen oder komplexe Sortierungen müssen eine Vergleichsfunktion bereitgestellt werden, um Unfälle zu vermeiden.

<code class="language-javascript">const books = [
  { title: 'Book A', year: 2001 },
  { title: 'Book B', year: 1998 },
  { title: 'Book C', year: 2015 }
];

books.sort((a, b) => a.year - b.year);

console.log(books); // 输出：按年份升序排列的书籍数组</code>

• sort
array.prototype.map
• MAP -Methode

2. Methoden erstellen ein neues Array, indem die Funktion auf jedes Element des ursprünglichen Arrays angewendet wird. Es wird häufig bei der Datenkonvertierung verwendet.

   Grammatik

: Für Funktionen, die von jedem Element ausgeführt werden, empfangen Sie:

aktuelles Element. map

Elementarindex.

Originalarray.

<code class="language-javascript">array.map(callback(element, index, array))</code>

• callback
  Beispiel: Konvertieren Sie das Zahlenarray
  • Beispiel: Formatale Daten
  Die Methode ändert das ursprüngliche Array nicht und gibt ein neues Array zurück.

Es ist sehr geeignet für die Umwandlung der Datenstruktur.

<code class="language-javascript">const numbers = [1, 2, 3, 4, 5];

const squares = numbers.map(num => num ** 2);

console.log(squares); // 输出：[1, 4, 9, 16, 25]</code>

array.prototype.filter

<code class="language-javascript">const users = [
  { firstName: 'John', lastName: 'Doe' },
  { firstName: 'Jane', lastName: 'Smith' }
];

const fullNames = users.map(user => `${user.firstName} ${user.lastName}`);

console.log(fullNames); // 输出：['John Doe', 'Jane Smith']</code>

Filtermethode

• map
Erstellen Sie ein neues Array, das nur Elemente enthält, die den angegebenen Bedingungen erfüllen. Es wird häufig zum Extrahieren von Datenuntergruppen verwendet.
Grammatik

3. : Bestimmen Sie, ob sie eine Funktion (true zurückgeben) oder (zurück falsche) Elemente ausschließen soll.

   Beispiel: Filtern Sie die gleichmäßige Zahl

Beispiel: Filtern Sie das Objekt gemäß der Bedingung

filter

Methoden ändern das ursprüngliche Array nicht.

<code class="language-javascript">array.filter(callback(element, index, array))</code>

Es ist ein leistungsstarkes Werkzeug zum Extrahieren verwandter Daten oder zur Reinigung von Arrays.

• callback

Array.Prototype.Reduce

Statuenmethode

<code class="language-javascript">const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.filter(num => num % 2 === 0);

console.log(evens); // 输出：[2, 4, 6]</code>

Die Methode wendet eine Funktion auf jedes Element (von links nach rechts) des Akkumulators und des Arrays an und schreibt sie einem einzelnen Wert zu.

<code class="language-javascript">const products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 500 }
];

const expensiveProducts = products.filter(product => product.price > 700);

console.log(expensiveProducts); // 输出：价格高于700的产品数组</code>

Grammatik

<code class="language-javascript">array.sort([compareFunction])</code>

: Für die Funktion jedes Elements sind die Parameter:
• callback Cumulator.
  • aktuelles Element.
  • Index des aktuellen Elements.
  • Originalarray.
  : Der Anfangswert des Akkumulators (optional, wird jedoch empfohlen).
• initialValue Beispiel: Frieden suchen

Beispiel: Gruppendaten gemäß den Attributen

<code class="language-javascript">const numbers = [42, 7, 19, 73, 23];

numbers.sort((a, b) => a - b);

console.log(numbers); // 输出：[7, 19, 23, 42, 73]</code>

Die Methode ist sehr flexibel und kann Array, Objekte oder einzelne Werte erzeugen.

<code class="language-javascript">const books = [
  { title: 'Book A', year: 2001 },
  { title: 'Book B', year: 1998 },
  { title: 'Book C', year: 2015 }
];

books.sort((a, b) => a.year - b.year);

console.log(books); // 输出：按年份升序排列的书籍数组</code>

Es ist ein leistungsstarkes Tool für benutzerdefinierte Konvertierung, Datenaggregation usw.
• reduce liefern immer den Anfangswert, um eine bessere Vorhersagbarkeit zu erzielen.
Methode Kombination
• Durch die Kombination von Methoden ,
und

kann die Datenverarbeitungseffizienz optimiert werden, insbesondere wenn es sich um große Datensätze handelt, vermeiden Sie mehrere Iterationen, um die Leistung zu verbessern.

Schlussfolgerung

JavaScripts map, filter, reduce und

Methoden sind für effiziente und elegante Datenoperationen von entscheidender Bedeutung. Das Verständnis ihrer Mechanismen und Anwendungen kann Entwicklern helfen, prägnante und einfache Code zu schreiben. Üben Sie mehr und beherrschen Sie diese Methoden!

Das obige ist der detaillierte Inhalt vonJavaScript -Array -Methoden: sortieren, karten, filtern und reduzieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!