Verstehen Sie zwei Möglichkeiten zur Deduplizierung von Arrays in ES6

In diesem Artikel werden Ihnen zwei Möglichkeiten zum Deduplizieren von Arrays in ES6 vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Verwandte Empfehlungen: „Javascript-Video-Tutorial“

Zwei Möglichkeiten, Arrays in ES6 zu deduplizieren

Methode 1:

function unique(arr) {
    const res = new Map();
    return arr.filter((a) => !res.has(a) && res.set(a, 1))
}

So kurz ist das. Es ist soweit, lass es uns tun Erklären Sie, warum.

Map-Objekt

Map ist eine neue Datenstruktur, die von ES6 bereitgestellt wird.
Kartenobjekte speichern Schlüssel-Wert-Paare. Jeder Wert (Objekt oder Grundelement) kann als Schlüssel oder Wert verwendet werden.

Die folgende Tabelle listet die Methoden des Map-Objekts auf.

Methode	Beschreibung
clear	Alle Schlüssel/Wert-Paare löschen, kein Rückgabewert.
delete	Löschen Sie einen Schlüssel und geben Sie true zurück. Wenn das Löschen fehlschlägt, geben Sie „false“ zurück.
forEach	Führt den angegebenen Vorgang für jedes Element aus.
get	Gibt den Wert zurück, der dem Kartenobjektschlüssel entspricht.
has	Gibt einen booleschen Wert zurück, der angibt, ob sich ein Schlüssel im aktuellen Map-Objekt befindet.
set	Legen Sie das Schlüssel/Wert-Schlüssel/Wert-Paar für das Map-Objekt fest.

Das Map-Objekt verfügt außerdem über ein Größenattribut, das die Anzahl der Schlüssel/Wert-Paare des Map-Objekts zurückgibt.

Die filter()-Methode des Arrays

filter()-Methode erstellt ein neues Array, und die Elemente im neuen Array sind alle Elemente, die durch Überprüfung die Bedingungen im angegebenen Array erfüllen.

Syntax:

array.filter(function(currentValue,index,arr), thisValue)

Parameterbeschreibung:

Pfeilfunktion

return arr.filter((a) => !res.has(a) && res.set(a, 1))
//上面的代码可以改成这样
return arr.filter(function(a){
    return !res.has(a) && res.set(a, 1);
});

1. Die Pfeilfunktion hat eine prägnantere Syntax beim Schreiben von Code;
2. Dies wird nicht gebunden.

Um mehr zu erfahren, klicken Sie hier

Analyse der ersten Methode

function unique(arr) {
    //定义常量 res,值为一个Map对象实例
    const res = new Map();
    
    //返回arr数组过滤后的结果，结果为一个数组
    //过滤条件是，如果res中没有某个键，就设置这个键的值为1
    return arr.filter((a) => !res.has(a) && res.set(a, 1))
}

Methode zwei:

function unique(arr) {
    return Array.from(new Set(arr))
}

Diese Methode erfordert weniger Code, was unglaublich ist.
Die from-Methode des Arrays

Die Methode Array.from() erstellt eine neue Array-Instanz aus einem Array-ähnlichen oder iterierbaren Objekt (einschließlich Array, Map, Set, String, TypedArray, Argumentobjekt usw.)

Syntax:

Array.from(arrayLike[, mapFn[, thisArg]])

Parameter	Beschreibung
arrayLike	Erforderlich, ein Array-ähnliches Objekt oder iterierbares Objekt, das Sie in ein echtes Array konvertieren möchten.
mapFn	Optional: Wenn dieser Parameter angegeben wird, wird das endgültig generierte Array von dieser Funktion verarbeitet und dann zurückgegeben.
thisArg	Optional, der Wert davon beim Ausführen der mapFn-Funktion.

Beispielcode:

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

Array.from('foo');
// ["f", "o", "o"]

Objekt festlegen

Objekt festlegen ermöglicht Ihnen das Speichern eines eindeutigen Werts eines beliebigen Typs, unabhängig davon, ob es sich um einen Grundwert oder eine Objektreferenz handelt.
Ein Set-Objekt ist eine Sammlung von Werten, und Sie können seine Elemente in der Reihenfolge der Einfügung durchlaufen.
Die Elemente im Set erscheinen nur einmal, das heißt, die Elemente im Set sind einzigartig.

Syntax:

new Set([iterable]);

Parameter:
iterierbar: Wenn Sie ein iterierbares Objekt übergeben (einschließlich Array, Map, Set, String, TypedArray, Argumentobjekt usw.), werden alle seine Elemente dem neuen hinzugefügt Satz. Wenn dieser Parameter nicht angegeben ist oder sein Wert null ist, ist das neue Set leer.

In der folgenden Tabelle sind die Methoden des Set-Objekts aufgeführt.

Methode	Beschreibung
add	Fügen Sie einen Wert hinzu und geben Sie das Set-Objekt selbst zurück.
clear	Alle Schlüssel/Wert-Paare löschen, kein Rückgabewert.
delete	Löschen Sie einen Schlüssel und geben Sie true zurück. Wenn das Löschen fehlschlägt, geben Sie „false“ zurück.
forEach	Führt den angegebenen Vorgang für jedes Element aus.
has	Gibt einen booleschen Wert zurück, der angibt, ob sich ein Schlüssel im aktuellen Set-Objekt befindet.

Set对象和Map对象一样，都有一个size属性，他返回Set对象的值的个数。

方法二 分析

function unique(arr) {
    //通过Set对象，对数组去重，结果又返回一个Set对象
    //通过from方法，将Set对象转为数组
    return Array.from(new Set(arr))
}

总结

这次说的两个方法，真的很简单，主要就是靠ES6里的新东西，难度不大，代码简单，主要就是多用用就好了。

---

经人提醒，再补充一种，[...new Set(arr)]  

不懂 ...  的朋友，可以看这里 js扩展运算符

更多编程相关知识，请访问：编程学习！！

Das obige ist der detaillierte Inhalt vonVerstehen Sie zwei Möglichkeiten zur Deduplizierung von Arrays in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!