So verwenden Sie es6 zum Implementieren der Deduplizierung (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von es6 zur Implementierung der Deduplizierung (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

Im Folgenden finden Sie drei Methoden, um Duplikate aus einem Array zu entfernen und eindeutige Werte zurückzugeben. Am liebsten verwende ich Set, weil es die kürzeste und einfachste Methode ist.

const array = [5, 2, 4, 5, 3];
console.log([...new Set(array)])
console.log(array.filter((item, index) => array.indexOf(item) === index))
console.log(array.reduce((unique, item) => unique.includes(item) ? unique: [...unique, item], []))
// result:  [5, 2, 4, 3]

Set verwenden

Lassen Sie mich zunächst erklären, was Set ist:

Set ist ein neues Datenobjekt, das von es6 eingeführt wurde. Da Sie mit Set nur eindeutige Werte speichern können Wenn es in einem Array übergeben wird, werden alle doppelten Werte entfernt.

Okay, lass uns zurück zu unserem Code gehen und sehen, was los ist. Tatsächlich führte er die folgenden Operationen aus:

1. Zuerst haben wir ein neues Set erstellt und das Array als Eingabeparameter übergeben. Da Set nur eindeutige Werte zulässt, werden alle Duplikate verwendet ENTFERNT.

2. Da nun der doppelte Wert verschwunden ist, verwenden wir ..., um ihn wieder in ein Array umzuwandeln.

const array = [5, 2, 4, 5, 3];
const set = new Set(array)
const newArr = [...set]
console.log(newArr)
// result:  [5, 2, 4, 3]

Verwenden Sie die Funktion Array.from(), um Set in ein Array zu konvertieren

Darüber hinaus können Sie auch Array.from() verwenden, um Set in ein Array zu konvertieren Array.

const array = [5, 2, 4, 5, 3];
const set = new Set(array)
const newArr = Array.from(set)
console.log(newArr)
// result:  [5, 2, 4, 3]

Filter verwenden

Um diese Option zu verstehen, sehen wir uns an, was diese beiden Methoden bewirken: indexOf und filter

indexOf()

indexOf() gibt zurück der Index des ersten Elements, das wir im Array finden. Die Funktion

const array = [5, 2, 4, 5, 3];
console.log(array.indexOf(5))  // 0
console.log(array.indexOf(2))  // 1
console.log(array.indexOf(8))  // -1

filter

filter() erstellt ein neues Array basierend auf den von uns bereitgestellten Bedingungen. Mit anderen Worten: Wenn ein Element den Test besteht und „true“ zurückgibt, wird es in das gefilterte Array aufgenommen. Wenn ein Element fehlschlägt und „false“ zurückgibt, wird es nicht in das gefilterte Array aufgenommen.

Sehen wir uns Schritt für Schritt an, was jedes Mal passiert, wenn wir das Array durchlaufen.

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
  console.log(item, index, array.indexOf(item), array.indexOf(item) === index)
  return array.indexOf(item) === index
})
//输出
// 5 0 0 true
// 2 1 1 true
// 4 2 2 true
// 5 3 0 false
// 3 4 4 true

Siehe die Kommentare zur Codeausgabe oben. Doppelte Elemente stimmen nicht mehr mit indexOf überein, daher ist das Ergebnis in diesen Fällen falsch und wird nicht in den gefilterten Wert einbezogen.

Duplikatwerte abrufen

Wir können auch die Funktion filter() im Array verwenden, um doppelte Werte abzurufen. Wir müssen den Code einfach wie folgt anpassen:

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
  console.log(item, index, array.indexOf(item), array.indexOf(item) !== index)
  return array.indexOf(item) !== index
})
//输出
// 5 0 0 false
// 2 1 1 false
// 4 2 2 false
// 5 3 0 true
// 3 4 4 false

Verwenden Sie die Funktion „reduce()“

Die Funktion „red()“ wird verwendet, um die Elemente des Arrays zu reduzieren und sie entsprechend zu platzieren Die von Ihnen übergebene Reduzierfunktion wurde schließlich in ein endgültiges Array zusammengeführt.

In diesem Fall bestimmt unsere Funktion Reducer(), ob unser endgültiges Array dieses Element enthält. Wenn nicht, fügen Sie es in das endgültige Array ein Element und geben schließlich unser letztes Element zurück.

Die Funktion „reduce()“ ist immer etwas schwer zu verstehen, also schauen wir uns jetzt an, wie sie funktioniert.

const array = [5, 2, 4, 5, 3];
array.reduce((unique, item) => {
  console.log(item, unique, unique.includes(item), unique.includes(item) ? unique: [...unique, item])
  return unique.includes(item) ? unique: [...unique, item]
}, [])
//输出
// 5 []          false   [5]
// 2 [5]         false   [5, 2]
// 4 [5, 2]      false   [5, 2, 4]
// 5 [5, 2, 4]   true    [5, 2, 4]
// 3 [5, 2, 4]   false   [5, 2, 4, 3]

Das obige ist der detaillierte Inhalt vonSo verwenden Sie es6 zum Implementieren der Deduplizierung (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!