Zusammenfassung der JavaScript-Array-Deduplizierungsmethoden (mit Code)

Dieser Artikel bietet Ihnen eine Zusammenfassung der JavaScript-Array-Deduplizierungsmethoden (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Array-Deduplizierung wird in der täglichen Entwicklung immer noch häufig verwendet und ist auch ein Thema, das im Internet leicht zu finden ist. Daher besteht der Zweck des Schreibens dieses Artikels darin, zusammenzufassen und zusammenzufassen Wissen Sie viel über die erwähnte Array-Deduplizierung? Oder fällt Ihnen eine bessere Lösung ein, wenn Sie während der Entwicklung auf die Notwendigkeit stoßen, Duplikate zu entfernen?

Dieses Mal werden wir herausfinden, wie man die Deduplizierung von Arrays am besten durchführt. Dabei müssen wir nicht nur die Kompatibilität, sondern auch Leistung und Code-Eleganz berücksichtigen.

Mein Lernweg besteht darin, die Lernmethode von Yan Yu nachzuahmen (github: mqyqingfeng). Ich bin dankbar, dass sie die Führung übernehmen, also möchte ich Ich werde mehr üben und mehr leisten. Ich hoffe, dass ich in Zukunft meinen eigenen Weg gehen kann.

1. Erste Schritte

function unique(origin) {
    var result = [];
    for(var i = 0; i < origin.length; i++) {
        var arrayItem = origin[i];

        for(var j= 0; j< result.length; j++) {
            var resultItem = result[j];
            
            // 如果在结果数组循环中找到了该元素，则跳出循环，进入下一个源数组元素的判断
            if(resultItem === arrayItem) {
                break;
            }
        }
        
        // 如果把结果数组循环完都没有找到该元素，就将该元素压入结果数组中
        if(j === result.length) {
            result.push(arrayItem);
        }
    }
    return result;
}

var array = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;1&#39;, 0, &#39;c&#39;, 1, &#39;&#39;, 1, 0];
console.log(unique(array));  // ["a", "b", "c", "1", 0, 1, ""]

Der obige Code ist der einfachste Weg, eine Array-Deduplizierung zu erreichen. Der Nachteil besteht darin, dass er zwei For-Schleifen erfordert Komplexität ist O(n ^2), schlechte Leistung.

2. Das indexOf-Attribut des Arrays

Das indexOf-Attribut im Array ist eine ES5-Spezifikation. Nur IE8 und frühere Versionen unterstützen diese Methode. Wenn Sie relativ gesehen nicht mit IE8 kompatibel sein müssen, versuchen Sie, indexOf zu verwenden, um festzustellen, ob sich ein Element im Array befindet.

function unique(origin){
    var result = [];
    for(var i = 0; i< origin.length; i++) {
        var item = origin[i];
        if(result.indexOf(item) === -1) {
            result.push(item);
        }
    }
    return result;
}

3. Das Filterattribut des Arrays

Die filter()-Methode des Arrays erstellt ein neues Array. Die Elemente im neuen Array werden auf alle Elemente im angegebenen Array überprüft die Bedingungen erfüllen. Der Rückruf von

filter hat drei Parameter, der dritte Parameter ist das Array-Objekt, zu dem das aktuelle Element gehört, sodass wir das indexOf-Attribut weiterhin verwenden können.

function unique(origin) {
    var result = origin.filter(function (item, index, array){
        // 获取元素在源数组的位置，只返回那些索引等于当前元素索引的值。
        return array.indexOf(item) === index;
    });
    return result;
}

filter ist mit IE9 kompatibel. Diese Methode hat keine for-Schleife und verwendet hauptsächlich die Attribute filter und indexOf, daher ist der Code relativ elegant.

4. Verwendung des Schlüsselwerts von Object

function unique(origin) {
    var result = [];
    var hashTable = {};
    for(var i = 0; i< origin.length; i++) {
        // 如果键对应的值，为真，意味着对象的键中已经有重复的键了。
        if(!hashTable[origin[i]]) {
        // 将元素作为对象的键，默认键对应的值为 true, 
            hashTable[origin[i]] = true;
            
            // 如果对象中没有这个键，则将这个元素放入结果数组中去。
            result.push(origin[i]);
        }
    }
    return result;
}

Die Ereigniskomplexität dieser Lösung ist O(n), aber der Schlüssel des Objekts ist standardmäßig vom Typ String. Was bedeutet das? ? Die Zahl 1 und die Zeichenfolge „1“ sind im Schlüssel gleich, sodass die obige Methode nicht für die Deduplizierung gemischter Zeichenfolgen und Zahlen geeignet ist.

Also fügen wir auch den Typ des Elements in den Schlüssel des Objekts ein:

function unique(origin) {
    var result = [];
    var hashTable = {};
    for(var i = 0; i< origin.length; i++) {
        var current = origin[i];
        // 字符串拼接元素的类型和元素
        var key = typeof(current) + current;
        if(!hashTable[key]) {
            hashTable[key] = true;
            result.push(current);
        }
    }
    return result;
}

5 Sortiermethode des Arrays

function unique(origin) {
    return origin.concat.sort().filter(function(item, index, array) {
        // !index 表示第 0 个元素应该被返回。
        return !index || item !== origin[index-1]
    })
}

function unique(array) {
    array.sort(); // 排序字符串
    array.sort(function(a, b) {
        return a-b; // 排序数字
    })
    
    for(let i=0; i<array.length; i++) {
        if(array[i] === array[i+1]) {
            array.splice(i, 1);
            i--; // 应该将前一个数删除，而不是删除后一个数。是因为元素被删除之后，后面元素的索引会迁移，所以要 i--;
        }
    }
    return array;
}

Der Vorteil der Sortiermethode besteht darin Es verwendet eine Sortierung und gibt das nächste Element zurück, das nicht mit dem vorherigen übereinstimmt. Relativ einfach und intuitiv. Der Nachteil besteht darin, dass dadurch die ursprüngliche Sortierposition der Elemente geändert wird.

6. ES6-Set

ES6 bietet ein neues Datenstrukturset, das einem Array ähnelt, aber die Werte der Mitglieder sind eindeutig und es gibt keine doppelten Werte. Beim Hinzufügen eines Werts zum Set findet keine Typkonvertierung statt, daher sind 5 und „5“ zwei verschiedene Werte. Set bestimmt intern, ob zwei Werte gleich sind, und verwendet dazu einen Algorithmus ähnlich wie „===“. Der Unterschied besteht jedoch darin, dass NaN intern als gleich NaN betrachtet wird.

Set kann in ein Array konvertiert werden. Daher ist es einfach, die Deduplizierung zu implementieren

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

ES6 Map

ES6 fügt neue Kartendatenergebnisse hinzu und die vorherige Objektschlüsselwertlösung kann einfach durch die Methoden has und set optimiert werden.

function unique(origin){
    const map = new Map()
    return origin.filter((item) => !map.has(item) && map.set(item, true))
}

8. Typbeurteilung

Einige häufige Datentypen sind === und indexOf, die nicht erkannt werden können. Zum Beispiel:

console.log({} === {})  // false;

console.log(NaN === NaN)  // false;

console.log(/a/ === /a/);  // false;

console.log(1 === new String('1'))  // false;

var arr = [NaN];
console.log(arr.indexOf(NaN)); // -1

Also bei der Beurteilung. Wann gibt es NaN und Objekte in den Daten, vermeiden Sie die Verwendung von indexOf und ===;

wurde bereits in Set erwähnt, damit die Set-Methode NaN entfernen kann.

Zusammenfassung

Ich habe es satt, über Datendeduplizierung im Internet zu lesen, aber ich möchte trotzdem einen Artikel schreiben, um es zu üben und zusammenzufassen. Es wäre toll, mehr Ideen für meine Arbeit zu haben . Vielen Dank an diejenigen, die es lieben, Ergebnisse zu teilen und zu genießen.

Das obige ist der detaillierte Inhalt vonZusammenfassung der JavaScript-Array-Deduplizierungsmethoden (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!