JavaScript 配列の重複を排除する 5 つの方法について詳しく見る

この記事では、JavaScript に関する関連知識を提供します。主に、es6 セットの重複排除、double for ループの重複排除、indexof など、配列の重複排除に関する関連問題を紹介します。重複排除の内容を見てみましょう。 . 皆様のお役に立てれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

最も簡単な方法、 ES6 セット重複排除 (最も推奨)

この方法は、すべての重複排除の中で最も簡単な使用方法であるため、日々の開発で私が最も気に入っている方法です。そして私は怠惰な癌患者です。

new Set は ES6 で導入された新しいタイプです。配列との違いは、Set 型のデータには繰り返し値を含めることができないことです。もちろん、配列の一部の Set メソッドは呼び出すことができません。

使用方法: 実際には非常に簡単で、配列を Set データに変換し、再度変換して重複排除を完了します。

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

イラスト

しかし、セットの重複排除には欠点があり、参照型のデータを重複排除することはできません。たとえば、オブジェクトの配列です。

凡例:

したがって、配列に値型データ (すべての文字列またはすべての数値など) が含まれている場合は、Set を使用して重複を削除する必要があります。あなたの最初の選択であり、多くのトラブルを避けることができます。

最も古い方法、double for ループで重複を削除する

昔、Set、map、または filter がなかったとき、double for ループが重複を削除するほぼ唯一の方法でした。

//双重循环去重
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;
};

凡例:

ここに興味深い点があります。おそらく、私の for の最初の式で 2 つの宣言が宣言されている理由をよく理解していないかもしれません。何か: let i = 0;len = arr.length;

答えを教えてください:

3 つの丸で囲まれたものは、次の 3 つを表します。 forループの式には、初期式、判定式、自動インクリメント式があります。このうち、初期式はforループの先頭で一度実行され、以降は実行されませんが、判定式と自動インクリメント式はループが実行されるたびに実行されます。

言葉がよくわからなくても大丈夫、絵を描きました。

#後者のサークルのコンテンツがループに陥ることに気づいたかもしれません。

しかし、これは最初の len = arr.length とどのような関係があるのでしょうか?

最初に定義されている場合、各ループで arr.length を使用する必要があることに注意してください。length はメソッドですが、その消費量は大きくありませんが、for ループではこの消費量は次のようになります。このループを 10,000 回ループする必要があると仮定した場合、length は 10,000 回実行されます。

重複を削除する最も役に立たない方法である、indexOf deduplication

indexOf は、依然として比較的単純で役に立ちません。なぜ役に立たないと言われているのでしょうか? 言うのは難しいのですが、indexOf メソッドは確かに上記の double for ループよりも単純です。単純なことですが、彼には最初からやり直すことを簡単にする Set メソッドがありません。とても役に立たない。

//去重
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;
}

凡例:

同様に、このメソッドにも詳細があります。上記の if と for には中括弧が含まれていないことに気づいたかもしれません。 ; for と if の両方がデフォルトで次のステートメントを担当します。必要な場合を除き、余分な {} を追加する必要はありません。

これは読めないと思われるかもしれませんが、ここが興味深い部分です。これはツール メソッドであり、ユーティリティに隠される運命にあるメソッドです。ビジネス ロジックとは何の関係もありませんし、そうする必要もありません複雑で読みやすい。

さらに、このように書く理由はもう 1 つあります。それは、人々に視覚的なインパクトを与えるためです。人間の言葉で言うと -----非常に大げさです;

indexOf に似た重複排除メソッドには重複排除が含まれます

includes を使用した重複排除メソッドは、indexOf とあまり変わりません。基本的にはまったく同じです。同じ。変わったのは判定方法だけです。

インクルードの判定方法がより簡単になりました。配列の各要素をループし、新しい配列を使用して、現在の配列に配列項目が含まれているかどうかを確認します。含まれていない場合は、要素

#

const handleRemoveRepeat = (arr) => {
    let repeatArr = [];
    for (let i = 0,len = arr.length ; i < len; i++)
        if (!repeatArr.includes(arr[i])) repeatArr.push(arr[i])
    return repeatArr;
}

Legend

# を追加します#includes このメソッドは、重複の削除以外のシナリオでも非常に役立ちます。

最有趣的去重方法，使用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前端】

以上がJavaScript 配列の重複を排除する 5 つの方法について詳しく見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。