JavaScript-Zusammenfassung von 18 häufig verwendeten Array-Methoden

Wie wir alle wissen, sind das Anfordern von Daten vom Backend und das Verarbeiten von Daten wesentliche Fähigkeiten für Front-End-Ingenieure. Die vom Backend angeforderten Daten werden häufig in Form eines Arrays an das Front-End zurückgegeben, daher kann die Bedeutung von Array-Verarbeitungsmethoden groß sein Imaginäre; Array-Verarbeitungsmethoden Es gibt viele MDN-Dokumente, die die wichtigsten Punkte beim Lernen oft nicht verstehen, was zu einem doppelten Ergebnis führt. Aber keine Sorge, ich habe 18 häufig verwendete Array-Verarbeitungsmethoden zusammengefasst Bei der Arbeit

ändert die Methode forEach() das ursprüngliche Array nicht

ist der erste formale Parameter der intern übergebenen Funktion der zweite ist der Index der Indexnummer. Sein Rückgabewert ist undefiniert.
Das laufende Beispiel lautet wie folgt:

Konsolenausgabe

filter()-Methode

Die filter()-Methode ist eine Methode zum Filtern von Arrays. Die übergebenen Parameter sind die gleichen wie bei der forEach-Methode, aber der Rückgabewert ist ein Array. Die eigentliche Anwendung besteht darin, die Arrays herauszufiltern, die die Bedingungen erfüllen die erfassten Daten;
Das laufende Beispiel lautet wie folgt:

Die Konsolenausgabe lautet wie folgt:

Map()-Methode

übergebenen Parameter sind ebenfalls die gleichen wie oben, und ihr Rückgabewert ist auch ein neues Array. Die Map()-Methode kann für jedes Element des Arrays die gleiche Verarbeitung durchführen Beispiel ist wie folgt:

Konsolenausgabe:

findIndex()-Methode

Die findIndex()-Methode gibt, wie der Name schon sagt, die Indexnummer des ersten Elements im Array zurück, das die Bedingungen erfüllt. Wenn es nicht gefunden werden kann, gibt sie -1 zurück. Die übergebenen Parameter sind die gleichen wie oben, und das laufende Beispiel lautet wie folgt:

let arr = [1, 3, 3, 4, 5, 6, 7]
//findIndex-Methode gibt die Indexnummer des ersten Elements zurück, das die Bedingungen erfüllt. Wenn es nicht gefunden wird, wird -1 zurückgegeben
const res = arr.findIndex((item) => item > 5)
console.log(res)

Ergebnisse der Konsolenausgabe:

find()-Methode Die

find()-Methode gibt das erste gefundene Element zurück, das die Bedingungen erfüllt. Die übergebenen Parameter sind die gleichen wie oben. Das laufende Beispiel lautet wie folgt:

let arr = [1, 3, 3, 4, 5, 6, 7]
//find() sucht nach einem Element und gibt das erste Element zurück, das die Bedingungen erfüllt. Wenn es gefunden wird, wird undefiniert zurückgegeben.
const res2 = arr.find((item) => {
  Artikel zurücksenden > 5
})

Konsolenoperation console.log(res2)

sind wie folgt:

some()-Methode

Die von der some()-Methode übergebenen Parameter sind die gleichen wie oben, und der Rückgabewert ist ein boolescher Wert. Solange ein Element gefunden wird, das die Bedingungen erfüllt, wird das Beispiel wie folgt zurückgegeben :

let arr = [1, 3, 3, 4, 5, 6, 7]
//eine Methode gibt einen booleschen Wert zurück const bl = arr.some((item) => {
  Artikel zurücksenden > 5
})
console.log(bl)

every()-Methode

Die von der every()-Methode übergebenen Parameter sind die gleichen wie oben und der Rückgabewert ist ein boolescher Wert, aber jedes Element muss die Bedingungen erfüllen, um true zurückzugeben. Das Beispiel lautet wie folgt:

let arr = [1; , 3, 3, 4, 5, 6, 7]
//every() gibt einen booleschen Wert zurück, der die Filterbedingungen erfüllen muss, bevor er „true“ zurückgibt
const bl2 = arr.every((currentValue) => {
  Gibt den aktuellen Wert < 10 zurück
})
console.log(bl2)

Reduktionsfunktion ()

Der erste Parameter in der Funktion Reduktion () ist die Funktion, der zweite Parameter ist der Typ der temporären Variablensumme, der erste Parameter der Funktion hat vier Parameter, aber der häufig verwendete erste Parameter ist Akkumulieren temporärer Variablen (Rückgabe). ist dieser Wert), das zweite Parameterelement. Der dritte ist der Index und der vierte ist das Array selbst; das Codebeispiel lautet wie folgt:

let arr = [1, 3, 3, 4, 5, 6, 7]
//reduce() Induktionsfunktion const previousValue = 0
const arrSum = arr.reduce(( previousValue, currentValue) => {
  Gibt den vorherigen Wert + den aktuellen Wert zurück
}, 0)
Die

Konsolenausgabeergebnisse von console.log(arrSum) lauten wie folgt:

concat() Array-Spleißung

concat() verbindet zwei Arrays und gibt das gespleißte neue Array zurück. Mehrdimensionale Arrays (Arrays innerhalb von Arrays) können nicht gespleißt werden.
Das Codebeispiel lautet wie folgt:

let arr = [1, 3, 3, 4, 5, 6, 7]
 //concat verkettet zwei Arrays und gibt ein neues Array zurück
 const newArr3 = [2, 5, 5, 6, 6, 8]
 const concatArr = arr.concat(newArr3)
 console.log(concatArr)

Methoden zum Ändern des ursprünglichen Arrays

push()/unshift()

Die Methode push()/unshift() besteht darin, ein Element am Ende bzw. am Anfang des Arrays hinzuzufügen, und der Rückgabewert ist die Länge des neuen Arrays;

// Die Array-Verarbeitungsmethode ändert sich. Ursprüngliches Array const Arr = [1, 3, 5, 6, 7, 8, 9]
Arr.push(1)
console.log(Arr)
console.log(Arr)
const a = Arr.unshift(1)

Die Ergebnisse der Konsolenausgabe von

console.log(a)

pop()/shift()

letzten

Wert des Arrays und shift() löscht den Wert des ersten Elements des Arrays. Der Rückgabewert ist das gelöschte Element.

console.log(arr)
arr.shift(1)
Die

Konsolenausgabeergebnisse von console.log(arr) lauten wie folgt:

sort()/reverse()

Die Methode sort() ist eine Funktion, function(a, b){ return a - b }. Mit dieser Funktion können Sie die Sortierreihenfolge steuern Die Funktion ist in aufsteigender Reihenfolge. Wenn die Parameter intern return a - b in absteigender Reihenfolge vorliegen, ist return a + b in aufsteigender Reihenfolge.
reverse() ist ein Array-Flip, also das Anordnen der Elemente des Arrays in umgekehrter Reihenfolge. Das Codebeispiel lautet wie folgt:

let arr = [1, 3, 3, 4, 5, 6, 7]arr.sort( (a, b) => {
  return a - b})console.log(arr)arr.reverse()console.log(arr)

splice()

Die Methode splice() ändert das ursprüngliche Array und gibt ein neues Array mit gelöschten Elementen zurück. Die negative Zahl ist die Indexnummer von hinten nach vorne Der zweite Parameter ist die Anzahl der gelöschten Elemente;

let arr = [1, 3, 3, 4, 5, 6, 7]arr.splice(1, 3)console.log(arr)

Andere

flat()

flat() werden verwendet, um mehrdimensionale Arrays zu reduzieren. Der übergebene Parameter ist die Tiefe des Arrays, die auch unendlich sein kann, was bedeutet, dass die Tiefe des Arrays wie folgt lautet :

const Arr2 = [
  [1, 2],
  [dreiundzwanzig],
  [4, 5],
  [5, 6],]console.log(Arr2.flat(Infinity))

Ergebnisse der Konsolenausgabe:

fill()

kann ein Array füllen: Schreibmethode: Array.fill(1, 2, 4) füllt das Array mit 1, beginnend mit dem Element mit Indexwert 2, beginnend mit der Indexnummer des Elements beginnend bei 4, ausgenommen das Der Indexwert beträgt 4 Elemente. Das ausgefüllte Element überschreibt das ursprüngliche Element, das der Indexnummer entspricht.
Das Codebeispiel lautet wie folgt:

const Arr2 = [
  [1, 2],
  [dreiundzwanzig],
  [4, 5],
  [5, 6],]console.log(Arr2.fill(1, 0, 4))

Ergebnisse der Konsolenausgabe: