JS 配列重複排除メソッドのパフォーマンス テストの比較

この記事の内容は、js 配列の重複排除メソッドのパフォーマンス テストの比較に関するもので、必要な方は参考にしていただければ幸いです。

1. テスト テンプレート

配列の重複排除はよくある問題です。インターネット。さまざまなソリューション

これらのソリューションのパフォーマンスをテストするために、配列の重複排除にかかる時間を計算するためのテスト テンプレートを作成しました。

// distinct.js

let arr1 = Array.from(new Array(100000), (x, index)=>{
    return index
})

let arr2 = Array.from(new Array(50000), (x, index)=>{
    return index+index
})

let start = new Date().getTime()
console.log('开始数组去重')

function distinct(a, b) {
    // 数组去重
}

console.log('去重后的长度', distinct(arr1, arr2).length)

let end = new Date().getTime()
console.log('耗时', end - start)

ここでは、長さが 10W と 5W の 2 つの配列がそれぞれ作成されます

次に、distinct() メソッドを使用して 2 つをマージします。を実行し、重複を削除します。

データの量は多くも少なくもありませんが、すでにいくつかの問題を説明できる可能性があります

2. Array.filter()indexOf

このメソッドのアイデアは、2 つの配列を 1 つの配列に結合し、ES6 で Array.filter() を使用して、 array を使用し、重複を除外するために IndexOf と組み合わせます。

function distinct(a, b) {
    let arr = a.concat(b);    
    return arr.filter((item, index)=> {        
    return arr.indexOf(item) === index
    })
}

これは、私が批判された配列の重複排除方法です。非常に単純に見えます。 . しかし実際のパフォーマンス。 。 。

はい、現実は非常に残酷で、長さ 15W の配列を処理するには 8427 ミリ秒かかります。

3. Double for ループ

最も簡単な方法は、外側のループが要素を走査し、内側のループがチェックすることです。繰り返されるかどうか

#重複する値がある場合は、push() または splice() を使用できます

##

function distinct(a, b) {
    let arr = a.concat(b);
    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);
                // splice 会改变数组长度，所以要将数组长度 len 和下标 j 减一
                len--;
                j--;
            }
        }
    }
    return arr
}

ただし、この方法は多くのメモリを消費し、効率が最も低くなります。

4. for...of includes()##double for ループのアップグレード バージョン。外側の for ループを for...of ステートメントに置き換え、内側のループを変更します。 to include ()

最初に空の配列を作成し、includes() が false を返したら、その要素を空の配列にプッシュします

同様に、includes()

function distinct(a, b) {
    let arr = a.concat(b)
    let result = []
    for (let i of arr) {
        !result.includes(i) && result.push(i)
    }
    return result
}

##このメソッドは、フィルターindexOf

##の代わりにindexOf()を使用することもできます。

#for ループを使用して filter() の内部ロジックを実装し、indexOf を include に置き換えるだけです

したがって、期間は比較的近いです

5. Array.sort()

最初に使用する並べ替え() で配列を並べ替えます

#次に、隣接する要素が等しいかどうかを比較して重複を排除します

#

function distinct(a, b) {
    let arr = a.concat(b)
    arr = arr.sort()
    let result = [arr[0]]

    for (let i=1, len=arr.length; i<len; i++) {
        arr[i] !== arr[i-1] && result.push(arr[i])
    }
    return result
}

この方法では、ソートとループが 1 回だけなので、上記の方法より効率が高くなります。

##6. new Set()

#ES6 は配列に似た Set データ構造を追加しますが、

Set のメンバーは一意です

#この機能に基づいて、配列の重複排除に非常に適しています

#

function distinct(a, b) {
    return Array.from(new Set([...a, ...b]))
}

Set を使用して 15W のデータを処理するにはどのくらい時間がかかりますか? ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ニャーニャーニャー？ ? ? 57ミリ秒？ ?私は目がくらんでいないでしょうか？ ?

然后我在两个数组长度后面分别加了一个0，在 150W 的数据量之下...

居然有如此高性能且简洁的数组去重办法？！

七、for...of + Object

这个方法我只在一些文章里见过，实际工作中倒没怎么用

首先创建一个空对象，然后用 for 循环遍历

利用对象的属性不会重复这一特性，校验数组元素是否重复

function distinct(a, b) {
    let arr = a.concat(b)
    let result = []
    let obj = {}

    for (let i of arr) {
        if (!obj[i]) {
            result.push(i)
            obj[i] = 1
        }
    }

    return result
}

当我看到这个方法的处理时长，我又傻眼了

15W 的数据居然只要 16ms ？？？ 比 Set() 还快？？？

然后我又试了试 150W 的数据量...

以上がJS 配列重複排除メソッドのパフォーマンス テストの比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。