Erfahren Sie mehr über fünf Möglichkeiten zur Deduplizierung von JavaScript-Arrays

Dieser Artikel vermittelt Ihnen relevantes Wissen über „JavaScript“ und stellt hauptsächlich Probleme im Zusammenhang mit der Array-Deduplizierung vor, einschließlich ES6-Set-Deduplizierung, Double-For-Loop-Deduplizierung, Indexof-Deduplizierung usw. Schauen wir uns das gemeinsam an. Ich hoffe, es wird hilfreich sein an alle. 🔜 Die Verwendung ist die einfachste aller Duplikatentfernungen. Und ich bin ein fauler Krebspatient. new Set ist ein neuer Typ, der in ES6 eingeführt wurde. Der Unterschied zu einem Array besteht darin, dass die Daten im Set-Typ keine wiederholten Werte haben können. Natürlich können einige Set-Methoden von Arrays nicht aufgerufen werden.

Anwendung: Es ist eigentlich ganz einfach, ein Array in Set-Daten umzuwandeln und es dann wieder zurück zu konvertieren, um die Deduplizierung abzuschließen.

    const arr = [1,1,2,2,3,3,4,4,5,5];
    const setData = Array.from(new Set(arr));
    console.log(setData);

Illustration

Aber die Set-Deduplizierung hat einen Nachteil: Referenztypdaten können nicht dedupliziert werden. Zum Beispiel ein Array von Objekten.

Legende:

Wenn Ihr Array also Werttypdaten enthält (z. B. alle Zeichenfolgen oder alle Zahlen), muss die Verwendung von „Set“ zur Deduplizierung die erste Wahl sein, was Ihnen viel Ärger erspart.

Die älteste Methode, die Double-for-Schleife, um Duplikate zu entfernen

Vor langer Zeit, als es weder Set, Map noch Filter gab, war die Double-for-Schleife fast die einzige Möglichkeit, Duplikate zu entfernen.

//双重循环去重
const handleRemoveRepeat = (arr) => {
    for (let i=0,len = arr.length; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1);
                j--;
                len--;
            }
        }
    }
    return arr;
};

Legende:

Hier gibt es einen interessanten Punkt. Vielleicht verstehen Sie nicht ganz, warum im anfänglichen Ausdruck meiner for-Schleife zwei Dinge deklariert sind: let i = 0;len = arr.length;

Lassen Sie mich Ihnen die Antwort geben:

Die drei Kreise stellen die drei Ausdrücke der for-Schleife dar: Anfangsausdruck, Beurteilungsausdruck und Autoinkrementausdruck. Unter anderem wird der anfängliche Ausdruck einmal zu Beginn der for-Schleife ausgeführt und in Zukunft nicht mehr ausgeführt, aber der Beurteilungsausdruck und der automatische Inkrementierungsausdruck werden jedes Mal ausgeführt, wenn die Schleife ausgeführt wird.

Wenn du die Worte nicht ganz verstehst, macht es nichts, ich habe ein Bild gezeichnet.

Möglicherweise haben Sie festgestellt, dass der Inhalt im letzten Kreis in eine Schleife gerät.

Aber was hat das mit unserer anfänglichen len = arr.length zu tun?

Es ist erwähnenswert, dass, wenn es am Anfang definiert ist, jede Schleife die Länge von arr.length verwenden muss. Obwohl ihr Verbrauch nicht groß ist, wird dieser Verbrauch von der Methode verbraucht Gehen Sie davon aus: Wenn die Schleife 10.000 Mal durchlaufen werden muss, wird die Länge 10.000 Mal ausgeführt.

Der nutzloseste Weg, Gewichte zu entfernen, IndexOf Weight Removal

IndexOf ist immer noch relativ einfach und nutzlos. Warum soll es nutzlos sein? Es ist schwer zu sagen, dass die indexOf-Methode tatsächlich einfacher ist als die obige Double-for-Schleife. Sagen wir es einfach: Hey, er hat keine Set-Methode, um den Neuanfang zu erleichtern. So nutzlos.

//去重
const handleRemoveRepeat = (arr) => {
    let repeatArr = [];
    for (let i = 0,len = arr.length ; i < len; i++) 
     if (repeatArr.indexOf(arr[i]) === -1)  repeatArr.push(arr[i])
    return repeatArr;
}

Legende:

In ähnlicher Weise haben Sie möglicherweise auch festgestellt, dass „if“ und „for“ standardmäßig für die folgende Anweisung verantwortlich sind. Es ist nicht erforderlich, ein zusätzliches {} hinzuzufügen, es sei denn, dies ist erforderlich.

Vielleicht denken Sie, dass dies unlesbar ist, aber das ist der interessante Teil. Dies ist eine Tool-Methode, die dazu bestimmt ist, in Dienstprogrammen versteckt zu werden. Sie hat nichts mit Geschäftslogik zu tun und muss nicht sehr lesbar sein.

Darüber hinaus gibt es noch einen weiteren Grund, es so zu schreiben: Es wird den Menschen eine größere visuelle Wirkung verleihen. Um es menschlich auszudrücken -----sehr anmaßend;

Eine Deduplizierungsmethode, die indexOf ähnelt, beinhaltet Deduplizierung

Man kann nicht sagen, dass die Deduplizierungsmethode indexOf sehr ähnlich ist, sie ist im Grunde dieselbe. Was sich geändert hat, ist nur die Methode der Beurteilung.

Die Beurteilungsmethode ist einfacher. Durchlaufen Sie jedes Element des Arrays und verwenden Sie das neue Array, um zu erkennen, ob das aktuelle Array ein Array-Element enthält. Wenn dies nicht der Fall ist, hängen Sie die Methode „includes“ des Elements an, die in anderen Szenarios immer noch sehr nützlich ist als Deduplizierung.

最有趣的去重方法，使用filter去重。

使用filter配合indexOf进行的去重过程，真的可以非常的简单且富含趣味性。

//去重
const handleRemoveRepeat = (arr) => arr.filter((item,index) => arr.indexOf(item,0) === index);

是的，没了，就一行。

图例

您是否没有反应过来？乍一看，不知道他是怎么完成去重的。

小问题，我为您解答疑惑。

indexOf的特性是返回被查找的目标中包含的第一个位置的索引

如图，下标为0和下标为4的位置存储的都是“1”。但是indexOf()只返回了0。因为indexOf的特性是返回被查找的目标中包含的第一个位置的索引。

同样的，我们可以利用这个特性。来完成去重，文字描述恐怕很难表达准确，您可以看看下面的这张图。

如果要去重对象数组怎么办？

去除对象数组的方式他并不是很稳定，这不像我们去重值类型数据的数组，上面的五种方法随便复制一种，往里面一调用就好了。绝对不会出问题。

但是对象数组去重，需要有一个去重条件，也就是根据哪个字段进行去重。

用双重循环去重举个例子：

图例

如上图，我们就是拿数据的id作为去重条件的。

像这样的对象数组就不能直接提供方法，因为每一个场景下的对象数组都不一定一样。我这是根据id去重，万一其他地方需要根据其他字段去重呢。

所以，如果您需要去重对象，根据上方的截图中的代码。使用双重for循环的方法，自己自定义一个可以满足您当前业务需求的去重方法。

【相关推荐：JavaScript视频教程、web前端】

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über fünf Möglichkeiten zur Deduplizierung von JavaScript-Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!