Implementieren Sie über 24 Array-Methoden in JavaScript von Hand

Inhaltsverzeichnis

1. Traversal-Klasse

1. fürJedes
2. Karte
3. jedes
4. einige
5. Filter
6. Reduzieren
7. ReduzierenRechts

2. Suchklasse

1. finden
2. Index finden
3. indexOf
4. letzterIndexOf
5. beinhaltet

3. Ergänzung, Löschung und Änderung

1. drücken
2. Popmusik
3. Schalten Sie ab
4. Schicht
5. Rückwärts
6. Füllen
7. Verketten
8. Mitmachen

4. Statische Methoden

1. Array.isArray
2. Array.von

5. Flach

1. flach
2. flatMap

In diesem Artikel erfahren Sie mehr über die interne Implementierung von über 24 nativen Array-Methoden. Ich bin überzeugt, dass Sie nach der Lektüre etwas Neues lernen werden.

1. Traversal-Klasse

1. fürJedes

Grundlegende Verwendung:

forEach ist eine sehr häufige Traversierungsfunktion, mit der Sie sehr vertraut sein müssen! Hier konzentrieren wir uns auf einige wichtige und leicht zu übersehende Punkte. mdn

Diese Methode führt die angegebene Funktion einmal für jedes Element des Arrays aus und der Rückgabewert ist undefiend
Diese Methode führt die callback einmal für jedes Element im Array mit einem gültigen Wert in aufsteigender Reihenfolge aus; nicht initialisierte Elemente werden übersprungen (beispielsweise bei dünn besetzten Arrays).
Wenn ein vorhandener Wert geändert wird, wird an callback der aktuelle Wert übergeben, indem forEach() über ihn iteriert.
Gelöschte Elemente werden nicht durchlaufen

Hier ein kleines Beispiel:

lass demoArr = [ 1, 2, 3, 4, , 5 ]

demoArr.forEach((it, i) => {
  wenn (i === 1) { 
    // Auf die später hinzugefügten wird von demoArr.push(5) nicht zugegriffen
  } sonst wenn (i === 2) {
    // Auf 4 wird nicht zugegriffen, aber auf 4-4 wird zugegriffen demoArr.splice(3, 1, '4-4')
  }

  console.log(es)
})

/*
 1
 2
 3
 4-4
 5
*/

Code-Implementierung:

Array.prototype.forEach2 = Funktion (Rückruf, thisCtx) {
  wenn (Typ des Rückrufs !== 'Funktion') {
    throw `${callback} ist keine Funktion`
  }

  Konstante Länge = diese.Länge
  sei i = 0

  während (i < Länge) {
    // Das gelöschte, neu hinzugefügte Element mit dem Index i befindet sich nicht im Array, deshalb wird nicht darauf zugegriffen, wenn (i in diesem) {
      Rückruf.Anruf(dieserCtx, dies[i], ich, dies)
    }

    ich++
  }
}

Wenn wir dasselbe Beispiel wie zuvor verwenden, ist die Ausgabe nach der Änderung dieselbe

Probieren Sie es aus:

// Test let demoArr = [ 1, 2, 3, 4, , 5 ]

demoArr.forEach2((it, i) => {
  wenn (i === 1) {
    // Auf die später hinzugefügten wird von demoArr.push(5) nicht zugegriffen
  } sonst wenn (i === 2) {
    // Auf 4 wird nicht zugegriffen, auf 4-4 wird entsprechend zugegriffen demoArr.splice(3, 1, '4-4')
  }

  console.log(es)
})

/*
 1
 2
 3
 4-4
 5
*/

2. Karte

Grundlegende Verwendung:

map -Methode erstellt ein neues Array, in dem jedes Element der Rückgabewert des einmaligen Aufrufs der bereitgestellten Funktion ist. mdn

Notiz:

Die callback wird nur für Indizes aufgerufen, die Werte haben.
Indizes, denen noch nie ein Wert zugewiesen oder die noch nie mit „delete“ gelöscht wurden, werden nicht aufgerufen.

// Beachten Sie, dass dem Index 2 kein Wert zugewiesen wird let arr = [ 1, 2, ,4, 5 ]

// Index 3 löschen
lösche arr[3]

Konsole.log(arr.map((es) => es * es))
// [ 1, 4, 25 ]

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.map2 = Funktion (Rückruf, thisCtx) {
  wenn (Typ des Rückrufs !== 'Funktion') {
    throw `${callback} ist keine Funktion`
  }

  Konstante Länge = diese.Länge
  sei i = 0
  // Der Rückgabewert von map ist ein neues Array let newArray = []

  während (i < Länge) {
    // Gelöschte und nicht initialisierte werden nicht durchlaufen, wenn (i in diesem) {
      neuesArray.push(Rückruf.Anruf(dieserCtx, dies[i], i, dies))
    }

    ich++
  }
  //Gibt ein neues Array zurück return newArray
}

Probieren Sie es aus:

sei arr = [ 0, 1, 2, 3, 4,, 5 ]

lass arr2 = arr.map2(Funktion (it, i, Array) {
  console.log(es, ich, Array, dies)
  gib es zurück * es
}, { Name: 'Front-End-Fettkopffisch' })

console.log(arr2)

3. jedes

Grundlegende Verwendung:

every prüft, ob alle Elemente in einem Array einen Test einer angegebenen Funktion bestehen. Es gibt einen Booleschen Wert zurück. mdn

Notiz:

Wenn ein leeres Array empfangen wird, gibt diese Methode in allen Fällen „true“ zurück.
Der Rückruf wird nur für Indizes aufgerufen, denen ein Wert zugewiesen wurde.
Es wird nicht für Indizes aufgerufen, die gelöscht wurden oder denen nie ein Wert zugewiesen wurde.

// Beispiel let emptyArr = []
// Leeres Array gibt direkt „true“ zurück
console.log(emptyArr.every((it) => it > 0)) // wahr
// hat nicht zugewiesene Werte let arr = [ 0, 1, 2, 3, 4,, 5, -1 ]
// Element löschen delete arr[7]

console.log(arr.every((it) => it >= 0)) // wahr

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.every2 = Funktion (Rückruf, thisCtx) {
  wenn (Typ des Rückrufs !== 'Funktion') {
    throw `${callback} ist keine Funktion`
  }

  Konstante Länge = diese.Länge
  sei i = 0
  // Leere Funktion betritt die Schleife nicht while (i < length) {
    // Solange ein Wert die Callback-Erwartung nicht erfüllt, wird false zurückgegeben.
    wenn (i in diesem und !callback.call(thisCtx, dies[ i ], i, dies)) {
      return false
    }

    ich++
  }

  returniere wahr
}

Probieren Sie es aus:

Nehmen wir ein Beispiel zum Testen

let emptyArr = []

console.log(emptyArr.every2((it) => it > 0)) // wahr

sei arr = [ 0, 1, 2, 3, 4,, 5, -1 ]

lösche arr[7]

console.log(arr.every2((it) => it >= 0)) // wahr

4. einige

Grundlegende Verwendung:

some prüft, ob im Array mindestens ein Element vorhanden ist, das den Test der bereitgestellten Funktion besteht. Es gibt einen Boolean Wert zurück. mdn

Notiz:

callback wird nur für Indizes aufgerufen, die „Werte haben“, nicht für Indizes, die gelöscht wurden oder denen nie Werte zugewiesen wurden.

Zum Beispiel

let emptyArr = []
// Leeres Array gibt direkt false zurück
console.log(emptyArr.some((it) => it > 0)) // falsch
sei arr = [ 0, 1, 2, 3, 4,, 5, -1 ]
// Vor dem Durchlauf -1 löschen, der einzige Wert kleiner als 0 existiert nicht, d. h. es wird false zurückgegeben
lösche arr[7]

console.log(arr.some((it) => it < 0)) // falsch

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.some2 = Funktion (Rückruf, thisCtx) {
  wenn (Typ des Rückrufs !== 'Funktion') {
    throw `${callback} ist keine Funktion`
  }

  Konstante Länge = diese.Länge
  sei i = 0

  während (i < Länge) {
    // Solange es ein Element gibt, das die Rückrufbedingung erfüllt, gib „true“ zurück
    wenn (i in diesem und& callback.call(thisCtx, dies[ i ], i, dies)) {
      returniere wahr
    }

    ich++
  }

  return false
}

Probieren Sie es aus:

let emptyArr = []
// Leeres Array gibt direkt „true“ zurück
console.log(emptyArr.some2((it) => it > 0)) // falsch
sei arr = [ 0, 1, 2, 3, 4,, 5, -1 ]

lösche arr[7]

console.log(arr.some2((it) => it < 0)) // falsch
console.log(arr.some2((it) => it > 0)) // wahr

5. Filter

Grundlegende Verwendung:

filter erstellt ein neues Array, das alle Elemente enthält, die den bereitgestellten Funktionstest bestehen. mdn

Notiz:

filter ruft die callback einmal für jedes Element im Array auf und erstellt ein neues Array mit allen Elementen, für die callback true oder einen true gleichwertigen Wert zurückgibt.
callback wird nur für Indizes aufgerufen, denen ein Wert zugewiesen wurde, nicht für Indizes, die gelöscht wurden oder denen nie ein Wert zugewiesen wurde.
Elemente, die den callback nicht bestehen, werden übersprungen und nicht in das neue Array aufgenommen.

// Index 5 hat keinen Anfangswert und wird nicht durchlaufen let arr = [ 0, 1, 2, -3, 4,, 5 ]
// Lösche das letzte Element delete arr[6]
//Werte größer als 0 herausfiltern let filterArr = arr.filter((it) => it > 0)

console.log(filterArr) // [ 1, 2, 4 ]

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.filter2 = Funktion (Rückruf, thisCtx) {
  wenn (Typ des Rückrufs !== 'Funktion') {
    throw `${callback} ist keine Funktion`
  }

  Konstante Länge = diese.Länge
  lass neuesArray = []
  sei i = 0

  während (i < Länge) {
    wenn (i in diesem und& callback.call(thisCtx, dies[ i ], i, dies)) {
      neuesArray.push(dieses[ i ])
    }
    ich++
  }

  gibt neuesArray zurück
}

prüfen:

// Index 5 hat keinen Anfangswert und wird nicht durchlaufen let arr = [ 0, 1, 2, -3, 4,, 5 ]
// Lösche das letzte Element delete arr[6]
//Werte größer als 0 herausfiltern let filterArr = arr.filter2((it) => it > 0)

console.log(filterArr) // [ 1, 2, 4 ]

6. Reduzieren

Grundlegende Verwendung:

Die reduce Methode führt eine von Ihnen angegebene reducer -Funktion für jedes Element im Array (in aufsteigender Reihenfolge) aus und fasst die Ergebnisse in einem einzigen Rückgabewert zusammen.

Diese Funktion ist etwas komplizierter. Sehen wir uns anhand eines Beispiels an, wie sie verwendet wird.

const sum = [1, 2, 3, 4].reduce((vorherige, aktuelle) => {
  Rückgabewert für vorherige + aktuelle;
})

console.log(Summe) // 10

// Anfangseinstellung prev = initialValue = 1, cur = 2

// Erste Iteration prev = (1 + 2) = 3, cur = 3

// Zweite Iteration prev = (3 + 3) = 6, cur = 4

// Dritte Iteration prev = (6 + 4) = 10, cur = undefiniert (Beenden)

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.reduce2 = Funktion (Rückruf, InitValue) {
  wenn (Typ des Rückrufs !== 'Funktion') {
    throw `${callback} ist keine Funktion`
  }

  let pre = initWert
  sei i = 0
  Konstante Länge = diese.Länge
  // Wenn kein Anfangswert übergeben wird, nimm den ersten als Anfangswert if (typeof pre === 'undefined') {
    vor = dies[0]
    ich = 1
  }

  während (i < Länge) {
    wenn (ich in diesem) {
      pre = Rückruf(pre, dies[i], i, dies)
    }
    ich++
  }

  Rückkehr vor
}

prüfen:

const sum = [1, 2, 3, 4].reduce2((vorherige, aktuelle) => {
  Rückgabewert für vorherige + aktuelle;
})

console.log(Summe) // 10

7. ReduzierenRechts

Grundlegende Verwendung:

Die Methode reduceRight führt eine von Ihnen angegebene reducer -Funktion für jedes Element im Array aus (in absteigender Reihenfolge) und fasst die Ergebnisse zu einem einzigen Rückgabewert zusammen.

Sehr ähnlich zu reduce , der einzige Unterschied besteht darin, reduceRight von rechts nach links verläuft.

const sum = [1, 2, 3, 4].reduce((vorherige, aktuelle) => {
  console.log(aktuell)
  Rückgabewert für vorherige + aktuelle;
})

// einundzwanzig
// 3 2
// 4 3

console.log(Summe) // 10

const sum2 = [1, 2, 3, 4].reduceRight((vorherige, aktuelle) => {
  console.log(aktuell)
  Rückgabewert für vorherige + aktuelle;
})
// 3 2 
// einundzwanzig
// 1 0

console.log(Summe2) // 10

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.reduceRight2 = Funktion (Rückruf, InitValue) {
  wenn (Typ des Rückrufs !== 'Funktion') {
    throw `${callback} ist keine Funktion`
  }

  let pre = initWert
  Konstante Länge = diese.Länge
  // Beginnen Sie mit der Traversierung beim letzten Element let i = Länge - 1
  // Wenn kein Anfangswert übergeben wird, wird der letzte als Anfangswert verwendet if (typeof pre === 'undefined') {
    vor = dies[i]
    ich--
  }

  während (i >= 0) {
    wenn (ich in diesem) {
      pre = Rückruf(pre, dies[i], i, dies)
    }
    ich--
  }

  Rückkehr vor
}

prüfen:

const sum = [1, 2, 3, 4].reduceRight2((vorherige, aktuelle) => {
  console.log(aktuell)
  Rückgabewert für vorherige + aktuelle;
})

// 3 2
// einundzwanzig
// 1 0

console.log(Summe) // 10

2. Suchklasse

1. finden

Grundlegende Verwendung:

Die Find-Methode gibt den Wert des ersten Elements in einem Array zurück, das eine Testfunktion erfüllt. Andernfalls wird undefined , mdn zurückgegeben.

Notiz:

Die find -Methode führt die callback -Funktion einmal für jedes Element im Array aus, bis ein callback „true“ zurückgibt.
Wenn ein solches Element gefunden wird, gibt die Methode sofort den Wert des Elements zurück, andernfalls gibt sie undefined zurück.
Die callback wird für jeden Index im Array von 0 bis length - 1 aufgerufen, nicht nur für die, denen Werte zugewiesen sind. (Dieser Punkt unterscheidet sich von den vorherigen Funktionen)

sei arr = [ 0, 1, 2, 3, 4,, 5 ]

lass index = arr.find((it) => {
  zurückgeben > 3
}, { Name: 'Front-End-Fettkopffisch' })

konsole.log(index) // 4

Code-Implementierung:

Array.prototype.find2 = Funktion (Rückruf, thisCtx) {
  wenn (Typ des Rückrufs !== 'Funktion') {
    throw `${callback} ist keine Funktion`
  }

  Konstante Länge = diese.Länge
  sei i = 0

  während (i < Länge) {
    konstanter Wert = dies[i]
    // Solange es ein Element gibt, das der Logik der Rückruffunktion entspricht, wird der Elementwert zurückgegeben
    wenn (Rückruf.Anruf(dieserCtx, Wert, ich, dies)) {
      Rückgabewert
    }

    ich++
  }
  // Andernfalls wird „undefiniert“ zurückgegeben.  
  Rückgabe undefiniert
}

prüfen:

sei arr = [ 0, 1, 2, 3, 4,, 5 ]

let index = arr.find2(Funktion (it, i, Array) {
  console.log(es, ich, Array, dies)
  zurückgeben > 3
}, { Name: 'Front-End-Fettkopffisch' })

konsole.log(index) // 4

2. Index finden

Grundlegende Verwendung:

Die Methode findIndex gibt den Index des ersten Elements in einem Array zurück, das eine bereitgestellte Testfunktion erfüllt. Wenn kein entsprechendes Element gefunden wird, wird -1 zurückgegeben. mdn
Der Unterschied zur Funktion find besteht darin, dass findIndex nicht den Wert, sondern den Index zurückgibt. Die zu beachtenden Punkte sind grundsätzlich die gleichen wie bei find.
Die Methode findIndex führt die Rückruffunktion einmal für jeden Array-Index von 0 bis Länge 1 (einschließlich) im Array aus, bis ein Wert gefunden wird, für den die callback „true“ zurückgibt.
Wenn ein solches Element gefunden wird, gibt findIndex sofort den Index dieses Elements zurück. Wenn der Rückruf nie einen wahren Wert zurückgibt oder length des Arrays 0 ist, gibt findIndex -1 zurück.
Im Gegensatz zu einigen anderen Array-Methoden (wie etwa Array#some ) wird bei Sparse-Arrays die Rückruffunktion sogar für Indizes von Einträgen aufgerufen, die im Array nicht vorhanden sind.

sei arr = [ 0, 1, 2, 3, 4,, 5 ]

let index = arr.findIndex((it, i, array) => {
  gib es zurück > 2
})

konsole.log(index) // 3

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.findIndex2 = Funktion (Rückruf, thisCtx) {
  wenn (Typ des Rückrufs !== 'Funktion') {
    throw `${callback} ist keine Funktion`
  }

  Konstante Länge = diese.Länge
  sei i = 0

  während (i < Länge) {
    //Gib den Index i direkt gemäß der Callback-Logik zurück
    wenn (Rückruf.Anruf(diesCtx, dies[i], i, dies)) {
      Rückkehr ich
    }

    ich++
  }
  // Andernfalls wird -1 zurückgegeben.  
  Rückgabe -1
}

prüfen:

sei arr = [ 0, 1, 2, 3, 4,, 5 ]

let index = arr.findIndex2(Funktion (it, i, Array) {
  console.log(es, ich, Array, dies)
  gib es zurück > 2
}, { Name: 'Front-End-Fettkopffisch' })

konsole.log(index) // 3

3. indexOf

Grundlegende Verwendung:

indexOf gibt den ersten Index im Array zurück, an dem ein bestimmtes Element gefunden werden kann, oder -1, wenn es nicht existiert. mdn

arr.indexOf(searchElement[, fromIndex])

Notiz:

Wenn der Indexwert, bei dem die Suche beginnt, größer oder gleich der Länge des Arrays ist, bedeutet dies, dass die Suche nicht im Array durchgeführt wird und -1 zurückgegeben wird.
Wenn der im Parameter angegebene Indexwert ein negativer Wert ist, wird er als Offset vom Ende des Arrays behandelt, d. h. -1 bedeutet, dass beim letzten Element begonnen wird, -2 bedeutet, dass beim vorletzten Element begonnen wird usw.
Wenn der im Parameter angegebene Indexwert negativ ist, ändert sich die Suchreihenfolge nicht. Die Suchreihenfolge besteht weiterhin darin, das Array von vorne nach hinten zu durchsuchen.
Wenn der Offset-Index immer noch kleiner als 0 ist, wird das gesamte Array abgefragt. Der Standardwert ist 0.

Konstantes Array = [2, 5, 9]

konsole.log(array.indexOf(2)) // 0
konsole.log(array.indexOf(7)) // -1
konsole.log(array.indexOf(9, 2)) // 2
konsole.log(array.indexOf(2, -1)) // -1
konsole.log(array.indexOf(2, -3)) // 0

Code-Implementierung :

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Mit den oben genannten Punkten und der grundlegenden Verwendung wissen Sie auf jeden Fall auf den ersten Blick, wie Sie es schreiben.

Array.prototype.indexOf2 = Funktion (Zielelement, VonIndex) {
  Konstante Länge = diese.Länge

  vonIndex = +vonIndex || 0

  // Wenn das Array leer ist oder die Suche an einer Position beginnt, die größer oder gleich der Länge des Arrays ist, ist der Wert -1.
  wenn (Länge === 0 || vonIndex >= Länge) {
    Rückgabe -1
  }
  /*
    1. Beginnen Sie mit der Suche nach Elementen ab fromIndex 2. Wenn fromIndex größer als 0 ist, nehmen Sie es einfach direkt 3. Wenn es kleiner als 0 ist, subtrahieren Sie zuerst den absoluten Wert von fromIndex von der Länge. Wenn es immer noch kleiner als 0 ist, nehmen Sie einfach direkt 0*/
  sei i = Math.max(fromIndex >= 0 ? fromIndex : Länge - Math.abs(fromIndex), 0)

  während (i < Länge) {
    // Ein Element im Array, das gleich targetEle ist, wenn (i in this && targetEle === this[ i ]) {
      Rückkehr ich
    }

    ich++
  }

  Rückgabe -1
}

prüfen:

Konstantes Array = [2, 5, 9]

console.log(array.indexOf2(2)) // 0
console.log(array.indexOf2(7)) // -1
konsole.log(array.indexOf2(9, 2)) // 2
console.log(array.indexOf2(2, -1)) // -1
console.log(array.indexOf2(2, -3)) // 0

4. letzterIndexOf

Grundlegende Verwendung:

Die Methode lastIndexOf gibt den letzten Index des angegebenen Elements im Array zurück oder -1, wenn es nicht vorhanden ist. mdn

arr.lastIndexOf(searchElement[, fromIndex])

Notiz:

Beginnen Sie die Rückwärtssuche ab Position arr.length - 1 .
Wenn fromIndex größer oder gleich der Länge des Arrays ist, wird das gesamte Array durchsucht.
Wenn fromIndex negativ ist, wird es als Offset vom Ende des Arrays behandelt. Auch wenn der Wert negativ ist, wird das Array trotzdem von hinten nach vorne durchsucht.
Wenn fromIndex Wert negativ ist und sein absoluter Wert größer als die Array-Länge ist, gibt die Methode -1 zurück, was bedeutet, dass das Array nicht durchsucht wird.

lass array = [2, 5, 9, 2]

console.log(array.letzterIndexVon(2)) // 3
console.log(array.lastIndexOf(7)) // -1
console.log(array.lastIndexOf(2, 3)) // 3
console.log(array.lastIndexOf(2, 2)) // 0
console.log(array.lastIndexOf(2, -2)) // 0
console.log(array.lastIndexOf(2, -1)) // 3

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.lastIndexOf2 = Funktion (Zielelement, VonIndex) {
  Konstante Länge = diese.Länge

  fromIndex = Typ von fromIndex === 'undefiniert' ? Länge - 1 : fromIndex
  // Wenn das Array leer ist oder der Wert negativ ist und sein absoluter Wert größer als die Array-Länge ist, gibt die Methode -1 zurück, was bedeutet, dass das Array nicht durchsucht wird.
  wenn (Länge === 0 || fromIndex < 0 und Math.abs(fromIndex) >= Länge) {
    Rückgabe -1
  }

  lass mich

  wenn (vonIndex >= 0) {
    // Wenn „fromIndex“ größer oder gleich der Länge des Arrays ist, wird das gesamte Array durchsucht.
    // Das heißt, wenn es größer als die Arraylänge - 1 ist, wird die Länge - 1 genommen
    i = Math.min(vonIndex, Länge - 1)
  } anders {
    i = Länge – Math.abs(vomIndex)
  }

  während (i >= 0) {
    //Gib den Index zurück, wenn er gleich targetEle ist, wenn (i in this && targetEle === this[ i ]) {
      Rückkehr ich
    }
    // Rückwärtsdurchquerung i--
  }
  //Wenn nicht gefunden, gib -1 zurück
  Rückgabe -1
}

prüfen:

lass array = [2, 5, 9, 2]

console.log(array.lastIndexOf2(2)) // 3
console.log(array.lastIndexOf2(7)) // -1
console.log(array.lastIndexOf2(2, 3)) // 3
console.log(array.lastIndexOf2(2, 2)) // 0
console.log(array.lastIndexOf2(2, -2)) // 0
console.log(array.lastIndexOf2(2, -1)) // 3

5. beinhaltet

Grundlegende Verwendung:

Mit der Methode „ includes wird ermittelt, ob ein Array einen angegebenen Wert enthält. Wenn dies der Fall ist, wird „true“ zurückgegeben, andernfalls false . mdn

arr.includes(valueToFind[, fromIndex])

Notiz:

Suchen Sie valueToFind , beginnend beim fromIndex-Index.
Wenn es ein negativer Wert ist, beginnt die Suche beim Index von array.length + fromIndex in aufsteigender Reihenfolge.
Wenn das Array NaN enthält ，[ ..., NaN ].includes(NaN ) wahr.

console.log([1, 2, 3].includes(2)) // wahr
console.log([1, 2, 3].includes(4)) // falsch
console.log([1, 2, 3].includes(3, 3)) // falsch
console.log([1, 2, 3].includes(3, -1)) // wahr
console.log([1, 2, NaN].includes(NaN)) // wahr

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.includes2 = Funktion (Zielelement, vonIndex) {
  Konstante Länge = diese.Länge

  vonIndex = +vonIndex || 0

  // Wenn das Array leer ist oder die Suche an einer Position beginnt, die größer oder gleich der Länge des Arrays ist, ist der Wert -1.
  wenn (Länge === 0 || vonIndex >= Länge) {
    return false
  }
  /*
    1. Beginnen Sie mit der Suche nach Elementen ab fromIndex 2. Wenn fromIndex größer als 0 ist, nehmen Sie es einfach direkt 3. Wenn es kleiner als 0 ist, subtrahieren Sie zuerst den absoluten Wert von fromIndex von der Länge. Wenn es immer noch kleiner als 0 ist, nehmen Sie einfach direkt 0*/
  sei i = Math.max(fromIndex >= 0 ? fromIndex : Länge - Math.abs(fromIndex), 0)

  während (i < Länge) {
    konstanter Wert = dies[i]
    // Achten Sie auf die NaN-Situation, wenn (targetEle === value || typeof targetEle === 'number' && typeof value === 'number' && isNaN(targetEle) && isNaN(value)) {
      returniere wahr
    }

    ich++
  }

  return false
}

prüfen:

console.log([1, 2, 3].includes2(2)) // wahr
console.log([1, 2, 3].includes2(4)) // falsch
console.log([1, 2, 3].includes2(3, 3)) // falsch
console.log([1, 2, 3].includes2(3, -1)) // wahr
console.log([1, 2, NaN].includes2(NaN)) // wahr

3. Ergänzung, Löschung und Änderung

1. drücken

Grundlegende Verwendung:

Die push -Methode fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die neue Länge des Arrays zurück. mdn

const animals = ['Schweine', 'Ziegen', 'Schafe']
Tiere.push('Kühe')

console.log(Tiere, Tiere.Länge) 
// ["Schweine", "Ziegen", "Schafe", "Kühe"], 4

animals.push('Hühner', 'Katzen', 'Hunde')

console.log(Tiere, Tiere.Länge) 

// ["Schweine", "Ziegen", "Schafe", "Kühe", "Hühner", "Katzen", "Hunde"], 7

Code-Implementierung :

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.push2 = Funktion (...pushEles) {
  const pushEleLength = pushEles.length
  Konstante Länge = diese.Länge

  sei i = 0
  
  während (i < pushEleLength) {
    dies[Länge + i] = pushEles[i]
    ich++
  }

  gib diese Länge zurück
}

prüfen:

const animals = ['Schweine', 'Ziegen', 'Schafe']
Tiere.push2('Kühe')

console.log(Tiere, Tiere.Länge) 
// ["Schweine", "Ziegen", "Schafe", "Kühe"], 4

animals.push2('Hühner', 'Katzen', 'Hunde')

console.log(Tiere, Tiere.Länge) 

// ["Schweine", "Ziegen", "Schafe", "Kühe", "Hühner", "Katzen", "Hunde"], 7

2. Popmusik

Grundlegende Verwendung:

Die Pop-Methode entfernt das letzte Element aus einem Array und gibt den Wert dieses Elements zurück. Diese Methode ändert die Länge eines Arrays. mdn

sei arr = [ 1, 2 ]
lass arr2 = []

konsole.log(arr.pop(), arr) // 2 [1]
console.log(arr2.pop(), arr2) // undefiniert []

Der Code ist ebenso einfach zu implementieren wie zu verwenden. Geben Sie einfach das letzte Element des Arrays zurück und reduzieren Sie die Länge des Arrays um 1.

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.pop2 = Funktion () {
  Konstante Länge = diese.Länge
  // Auf ein leeres Array aufspringen und direkt „undefined“ zurückgeben
  wenn (Länge === 0) {
    Rückgabe undefiniert
  }

  const delEle = this[Länge - 1]

  this.length = Länge - 1

  return delEle
}

prüfen:

sei arr = [ 1, 2 ]
lass arr2 = []

console.log(arr.pop2(), arr) // 2 [1]
console.log(arr2.pop2(), arr2) // undefiniert []

3. Schalten Sie ab

Grundlegende Verwendung:

Die Methode unshift fügt am Anfang eines Arrays ein oder mehrere Elemente hinzu und gibt die neue Länge des Arrays zurück (diese Methode ändert das ursprüngliche Array).

Notiz:

Wenn mehrere Argumente übergeben werden, werden sie am Anfang des Objekts als Block eingefügt, und zwar in derselben Reihenfolge, in der sie als Argumente übergeben wurden.
Der einmalige Aufruf von unshift mit mehreren Argumenten führt zu anderen Ergebnissen als der mehrmalige Aufruf von unshift mit einem Argument (beispielsweise in einer Schleife).

Zum Beispiel:

sei arr = [4,5,6]
// Füge arr.unshift(1,2,3) auf einmal ein

console.log(arr) // [1, 2, 3, 4, 5, 6]

sei arr2 = [4,5,6]
// Mehrfach einfügen arr2.unshift(1)
arr2.unshift(2)
arr2.unshift(3)

console.log(arr2); // [3, 2, 1, 4, 5, 6]

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.unshift2 = Funktion (...unshiftEles) {
  // Mit Hilfe des Erweiterungsoperators die hinzuzufügenden Elemente blockweise an den Anfang des Arrays einfügen let newArray = [ ...unshiftEles, ...this ]
  let Länge = neuesArray.Länge
  
  sei i = 0

  wenn (unshiftEles.length === 0) {
    Rücklauflänge
  }
  // Erneut ins Array kopieren while (i < length) {
    dies[ i ] = neuesArray[ i ]
    ich++
  }
  
  gib diese Länge zurück
}

prüfen:

sei arr = [4,5,6]
// Füge arr.unshift2(1,2,3) auf einmal ein

console.log(arr) // [1, 2, 3, 4, 5, 6]

sei arr2 = [4,5,6]
// Mehrfach einfügen arr2.unshift2(1)
arr2.unshift2(2)
arr2.unshift2(3)

console.log(arr2); // [3, 2, 1, 4, 5, 6]

4. Schicht

Grundlegende Verwendung:

Die Shift-Methode entfernt das erste Element aus einem Array und gibt den Wert dieses Elements zurück. mdn

sei arr = [ 1, 2 ]

konsole.log(arr.shift(), arr) // 1 [2]
konsole.log(arr.shift(), arr) // 2 []

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.shift2 = Funktion () {
  Konstante Länge = diese.Länge
  const delValue = this[ 0 ]

  sei i = 1

  während (i < Länge) {
    // Ausgehend vom ersten Element werden folgende Elemente um eine Position nach vorne verschoben this[ i - 1 ] = this[ i ]
    ich++
  }
  // Länge des Arrays festlegen this.length = length - 1
  //Gib den gelöschten Wert zurück return delValue
}

prüfen:

sei arr = [ 1, 2 ]

konsole.log(arr.shift2(), arr) // 1 [2]
konsole.log(arr.shift2(), arr) // 2 []

5. Rückwärts

Grundlegende Verwendung:

Die reverse Methode kehrt die Position der Elemente in einem Array um und gibt das Array zurück. Das heißt, das erste Element des Arrays wird zum letzten und das letzte Element des Arrays wird zum ersten. mdn

```Javascript
const arr = [1, 2, 3]

console.log(arr) // [1, 2, 3]

arr.umkehren()

console.log(arr) // [3, 2, 1]

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.reverse2 = Funktion () {
  //Setze den Doppelzeiger näher zur Mitte let i = 0
  sei j = diese.Länge - 1

  während (i < j) {
    // Vertausche den ersten und den letzten sowie den zweiten und den vorletzten [dieses[ i ], dies[ j ] ] = [dieses[ j ], dies[ i ] ]
    ich++
    J--
  }

  gib das zurück
}

prüfen:

const arr = [1, 2, 3]

console.log(arr) // [1, 2, 3]

arr.reverse2()

console.log(arr) // [3, 2, 1]

6. Füllen

Grundlegende Verwendung:

Die fill füllt alle Elemente in einem Array vom Startindex bis zum Endindex mit einem festen Wert. Der Endindex ist nicht enthalten. mdn

const array1 = [1, 2, 3, 4];

konsole.log(array1.fill(0, 2, 4)) // [1, 2, 0, 0]


konsole.log(array1.fill(5, 1)) // [1, 5, 5, 5]

konsole.log(array1.fill(6)) // [6, 6, 6, 6]

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.fill2 = Funktion (Wert, Start, Ende) {
  Konstante Länge = diese.Länge

  start = start >> 0
  // Wenn „end“ nicht ausgefüllt ist, ist die Standardeinstellung „length“, andernfalls das ausgefüllte „end“ = „typeof“ „end“ === „undefined“? „length“: „end“ >> 0
  // Der minimale Startwert ist 0 und der maximale Wert ist Länge
  Start = Start >= 0 ? Math.min(Start, Länge) : Math.max(Start + Länge, 0)
  // Der Mindestwert von end ist 0 und der Höchstwert ist length 
  Ende = Ende >= 0? Math.min(Ende, Länge) : Math.max(Ende + Länge, 0)
  // Den angegebenen Bereich mit dem Indexwert füllen
  während (Start < Ende) {
    this[ start ] = Wert
    start++
  }
  // Das geänderte Array zurückgeben return this
}

prüfen:

const array1 = [1, 2, 3, 4];

console.log(array1.fill2(0, 2, 4)) // [1, 2, 0, 0]


console.log(array1.fill2(5, 1)) // [1, 5, 5, 5]

console.log(array1.fill2(6)) // [6, 6, 6, 6]


Anschluss, Spleißen

7. Verketten

Grundlegende Verwendung:

concat -Methode wird verwendet, um zwei oder mehr Arrays zusammenzuführen. Diese Methode ändert das vorhandene Array nicht, sondern gibt ein neues Array mdn zurück

 sei num1 = [[1]]
sei num2 = [2, [3]]
sei num3=[5,[6]]

lass nums = num1.concat(num2) // [[1], 2, [3]]
let nums2 = num1.concat(4, num3) // [[1], 4, 5,[6]]

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.concat2 = Funktion (...concatEles) {
  Konstante Länge = concatEles.Länge
  // Erweitern Sie das Array selbst um eine Ebene let newArray = [ ...this ]
  sei i = 0

  während (i < Länge) {
    konstanter Wert = concatEles[i]
    // Eine Ebene von Array-Elementen erweitern Array.isArray(value) ? newArray.push(...value) : newArray.push(value)
    ich++
  }

  gibt neuesArray zurück
}

prüfen:

sei num1 = [[1]]
sei num2 = [2, [3]]
sei num3=[5,[6]]

lass nums = num1.concat2(num2) // [[1], 2, [3]]
let nums2 = num1.concat2(4, num3) // [[1], 4, 5,[6]]

8. Mitmachen

Grundlegende Verwendung:

Die join -Methode verkettet alle Elemente eines Arrays über String-Bezeichner zu einem String und gibt diesen zurück. Wenn das Array nur ein Element hat, wird dieses Element ohne Trennzeichen zurückgegeben.

const elements = ['Feuer', 'Luft', 'Wasser']
const elements2 = ['Feuer']

console.log(elements.join()) // Feuer, Luft, Wasser
console.log(elements.join('')) // FeuerLuftWasser
console.log(elements.join('-')) // Feuer-Luft-Wasser
console.log(elements2.join('-')) // Feuer

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.join2 = Funktion (Format = ',') {
  Konstante Länge = diese.Länge
  // Speichere das letzte Element, da es nicht an der Formatverbindung teilnimmt let lastEle = this[length - 1]
  let Zeichenfolge = ''

  wenn (Länge === 0) {
    Rückgabezeichenfolge
  }

  für (i = 0; i < Länge - 1; i++) {
    Zeichenfolge + = dies [i] + Format
  }

  gibt Zeichenfolge + letztes Element zurück
}

prüfen:

const elements = ['Feuer', 'Luft', 'Wasser']
const elements2 = ['Feuer']

console.log(elements.join2()) // Feuer, Luft, Wasser
console.log(elements.join2('')) // FeuerLuftWasser
console.log(elements.join2('-')) // Feuer-Luft-Wasser
console.log(elements2.join2('-')) // Feuer

4. Statische Methoden

1. Array.isArray

Grundlegende Verwendung:

Array.isArray() wird ermittelt, ob der übergebene Wert ein Array ist.

Array.isArray([1, 2, 3]) // wahr

Array.isArray({foo: 123}) // falsch

Array.isArray("foobar") // falsch

Array.isArray(undefiniert) // falsch

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Das ist ganz einfach, nur ein Satz

Array.isArray2 = Funktion (Element) {
  returniere Object.prototype.toString.call(ele) === '[Objekt-Array]';
}

prüfen:

Array.isArray2([1, 2, 3]) // wahr

Array.isArray2({foo: 123}) // falsch

Array.isArray2("foobar") // falsch

Array.isArray2(undefiniert) // falsch

2. Array.von

Grundlegende Verwendung:

Array.of erstellt eine neue Array-Instanz mit einer variablen Anzahl von Argumenten, unabhängig von der Anzahl oder dem Typ der Argumente.

Notiz:

Der Unterschied zwischen Array.of() und dem Array-Konstruktor liegt in der Verarbeitung ganzzahliger Argumente:
Array.of(7) erstellt ein Array mit einem einzelnen Element 7, während Array(7) ein leeres Array der Länge 7 erstellt (Hinweis: damit ist ein Array mit 7 leeren Slots gemeint, nicht ein Array, das aus 7 undefinierten Elementen besteht).

Array.von(7); // [7]
Array.von(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Die Implementierungsidee besteht darin, die von Ihnen eingegebenen Werte nacheinander dem aktuellen Array zuzuweisen.

Array.of2 = Funktion (...eles) {
  Konstante Länge = eles.Länge
  sei i = 0
  lass neuesArray = []

  während (i < Länge) {
    neuesArray[ i ] = eles[ i ]
    ich++
  }

  gibt neuesArray zurück
}

prüfen:

Array.von2(7); // [7]
Array.von2(1, 2, 3); // [1, 2, 3]

5. Flach

1. flach

Grundlegende Verwendung:

flat() durchläuft ein Array rekursiv bis zu einer angegebenen Tiefe, fügt alle Elemente mit den Elementen im durchlaufenen Teilarray zu einem neuen Array zusammen und gibt es zurück. mdn

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat()) // [0, 1, 2, 3, 4] wird standardmäßig abgeflacht const arr2 = [0, 1, 2, [[[3, 4]]]]

console.log(arr2.flat(2)) // [0, 1, 2, [3, 4]] gibt die Erweiterung um zwei Ebenen an

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.flat2 = Funktion (Tiefe = 1) {
  const Ergebnis = []
  const flat = (arr, Tiefe) => {
    für (let item of arr) {
      // Wenn die Anzahl der Ebenen nicht vollständig erweitert wurde, rekursive Verarbeitung if (Array.isArray(item) && depth > 0) {
        flach (Element, Tiefe – 1)
      } anders {
        // Leere Elemente entfernen und nicht undefinierte Elemente hinzufügen item !== void 0 && result.push(item)
      }
    }
  }

  flach (dies, Tiefe)

  Ergebnis zurückgeben
}

prüfen:

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat2()) // [0, 1, 2, 3, 4]


const arr2 = [0, 1, 2, [[[3, 4]]]]

console.log(arr2.flat2(2)) // [0, 1, 2, [3, 4]]

2. flatMap

Grundlegende Verwendung:

flatMap ordnet zunächst jedes Element mithilfe der Mapping-Funktion zu und komprimiert die Ergebnisse anschließend in ein neues Array. Es ist fast dasselbe wie eine Karte, die mit einer Ebene mit einem Tiefenwert von 1 verbunden ist. mdn

sei arr = [1, 2, 3, 4]


arr.flatMap(x => [x * 2]) // [2, 4, 6, 8]

Code-Implementierung:

Klicken Sie hier, um die Implementierung des Quellcodes anzuzeigen

Array.prototype.flatMap2 = Funktion (Rückruf, thisCtx) {
  wenn (Typ des Rückrufs !== 'Funktion') {
    throw `${callback} ist keine Funktion`
  }
  // Informationen zur spezifischen Implementierung von Map und Flat finden Sie unter map.js und flat.js.
  gib dies zurück.map(Funktion (it, i, Array) {
    Rückruf zurückgeben.Aufruf(thisCtx, it, i, Array)
  }).flach(1)
}

prüfen:

sei arr = [1, 2, 3, 4]


arr.flatMap2(x => [x * 2]) // [2, 4, 6, 8]

Ende:

Dies ist das Ende dieses Artikels über die manuelle Implementierung von über 24 Array-Methoden in JavaScript. Weitere Informationen zur Implementierung von über 24 Array-Methoden in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Der Nationalfeiertag steht vor der Tür. Ich wünsche Ihnen allen schöne Feiertage und sieben Tage voller Spaß.

Das könnte Sie auch interessieren:

Ein Artikel, der Ihnen hilft, mehr über JavaScript-Arrays zu erfahren
Detaillierte Erläuterung mehrerer Methoden zur Deduplizierung im Javascript-Array
Detaillierte Erklärung der integrierten Methoden des Javascript-Arrays
Häufig verwendete JavaScript-Array-Methoden
Detaillierte Zusammenfassung des JavaScript-Arrays
JavaScript verwendet häufig Array-Deduplizierung tatsächliche Kampf Quellcode
So überwachen Sie Array-Änderungen in JavaScript
Beispiele und Vergleich von 3 Methoden zur Deduplizierung von JS-Objekt-Arrays
JS implementiert Array-Filterung von einfacher bis hin zu Multi-Condition-Filterung
Syntax und Beispielanalyse der JavaScript-Array-Methode „reduce()“

<<: Ausführliche Erläuterung der gespeicherten MySQL-Prozeduren (in, out, inout)

>>: MySQL-Beispiel zum Umwandeln des Geburtsdatums in das Alter und zum Gruppieren und Zählen der Personenanzahl