JavaScript 配列の重複排除方法の概要 (コード付き)

この記事は、JavaScript 配列の重複排除方法をまとめたものです (コード付き)。必要な方は参考にしていただければ幸いです。

配列の重複排除は現在でも日常の開発で頻繁に使用されており、インターネットでも簡単に目にすることができるトピックでもあります。そのため、この記事を書く目的は、多くの人がどのように行うかを要約することです。前述のアレイの重複排除について、あなたはほとんど知っていますか?あるいは、開発中に重複を削除する必要が生じた場合、より良い解決策を思いつくことができますか?

今回は、配列の最適な重複排除を行う方法を考えます。互換性だけでなく、パフォーマンスとコードの優雅さも考慮する必要があります。

私の学習方法は、Yan Yu の学習方法 (github: mqyqingfeng) を真似ることです。私は、Yan Yu のような優れた人々が率先して取り組んでいることに感謝しています。もっと練習して、将来は自分なりのやり方を作れるようになりたいです。

1. 入門ソリューション

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, ""]

上記のコードは、配列の重複排除を実装する最も簡単な方法です。利点は、優れた互換性があることです。欠点は、2 つの for ループと時間計算量は O(n ^2) で、パフォーマンスが低下します。

2. 配列のindexOf属性

配列のindexOf属性は、IE8以前のバージョンのみがこのメソッドをサポートしていません。相対的に言えば、IE8 と互換性を持たせる必要がない場合は、indexOf を使用して要素が配列内にあるかどうかを判断してみてください。

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. 配列のフィルター属性

配列の filter() メソッドは、指定された配列内のすべての要素をチェックします。条件を満たします。

filter のコールバックには 3 つのパラメーターがあり、3 番目のパラメーターは現在の要素が属する配列オブジェクトであるため、indexOf 属性を引き続き使用できます。

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

filter は IE9 と互換性があります。このメソッドには for ループがなく、主に filter 属性とindexOf 属性を使用するため、コードは比較的洗練されています。

4. オブジェクトのキー値の使用

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;
}

このソリューションのイベントの複雑さは O(n) ですが、オブジェクトのキーはデフォルトで文字列型になります。これは何を意味しますか?数値 1 と文字列 '1' はキー内で等しいため、上記の方法は文字列と数値が混在する場合の重複排除には適していません。

そこで、オブジェクトのキーに要素の型も入れます:

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. 配列のソート メソッド

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;
}

ソート メソッドの利点は次のとおりです。ソートを使用し、「次の要素は前の要素と等しくない」を返します。比較的シンプルで直感的です。欠点は、要素の元の並べ替え位置が変更されることです。

6. ES6 Set

ES6 は、配列に似た新しいデータ構造 Set を提供しますが、メンバーの値は一意であり、重複する値はありません。 Set に値を追加する場合、型変換は行われないため、5 と '5' は 2 つの異なる値になります。 Set は、「===」と同様のアルゴリズムを使用して、2 つの値が同じかどうかを内部的に判断します。ただし、違いは、NaN が内部的に NaN と等しいとみなされることです。

Set は配列に変換できます。 ES6 Map

ES6 では、新しい Map データ結果が追加され、以前のオブジェクト キー値ソリューションは has メソッドと set メソッドを通じて簡単に最適化できます。

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

8. 型判定

一般的なデータ型には、検出できないものがあります。例:

。

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

したがって、判断するときに、データ内に NaN とオブジェクトがある場合は、Set there As の前に indexOf と ===;

を使用しないでください。前述したように、Set メソッドは重複した NaN を削除できます。 まとめインターネットでデータの重複排除について読むのは飽きましたが、それでも実践してまとめるための記事を書きたいと思っています。仕事にもっとアイデアがあればいいですね。アウトプットを共有したり楽しんだりするのが好きな人たちに感謝します。

以上がJavaScript 配列の重複排除方法の概要 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。