JS配列重複排除の詳細

JS配列重複排除の詳細

1 テストケース

// テストケース const a = {};
定数 b = { c: 1 };
定数配列 = [
  1、1、「1」、「1」、
  {}、{}、{c:1}、{c:1}、
  あ、あ、b、b、 
  []、[]、[1]、[1]、
  未定義、未定義、
  ヌル、ヌル、
  ナン、ナン、
];

2 JS配列重複排除4種類

2.1 要素の比較

この型は配列要素を比較して重複を削除します。

2.1.1 二重層 for ループ比較 (es5 でよく使用される)

配列要素を1つずつ比較するには、2つのforループを使用し、重複する要素を削除するにはspliceメソッドを使用します。

// ダブルforループ関数uniq1(arr) {
    (i = 0 とします; i < arr.length; i++) {
        (j = i + 1 とします; j < arr.length; j++) {
            もし (arr[i] === arr[j]) {
                配列jを1に連結する
                じーー
            }
        }
    }
    リターン
}

// 重複排除結果 // [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]

重複排除の前後の結果を比較すると、 NaN === NaNが false であるため、重複するNaN削除されませんfalse

2.1.2 隣接比較によるソート

sort()メソッドを使用して配列要素をソートし、隣接する要素を比較して、 spliceメソッドを使用して重複する要素を削除します。

関数 uni2(arr) {
    ソート
    (i = 0 とします; i < arr.length - 1; i++) {
        arr[i] === arr[i + 1] && arr.splice(i + 1, 1) && i--;
    }
    arr を返します。
}


新しい配列を作成し、繰り返しのない要素を新しい配列に入れることもできます。

関数uniq3(arr) {
    arr = arr.sort()
    定数newArr = [arr[0]]
    (i = 1 とします; i < arr.length; i++) {
        もし (arr[i] !== arr[i - 1]) {
            新しいArr.push(arr[i])
        }
    }
    newArrを返す
}

// 重複排除結果 // [[],[],1,'1',[1],[1],NaN,NaN,{},{},{c:1},{c:1},{},{c:1},null,undefined]

NaN === NaN為false
sort
なので、重複するNaNは削除されません。 NaN === NaN為false
sort
デフォルトのソート順序は、要素を文字列に変換することです。文字列に変換されたオブジェクトはすべて[object Object]であるため、 sortメソッドは配列内のオブジェクトをソートできず、重複したオブジェクトが隣接していない限り、重複したオブジェクトを削除できない可能性があります。

2.2 要素の位置タイプを見つける

このタイプは、要素の最初の出現を見つけることによって重複を削除します。

2.2.1 インデックス

indexOfを使用して、現在の要素が最初に表示される位置が現在の位置であるかどうかを確認します。そうである場合は、それを新しい配列に格納します。

関数 uniq4(arr) {
    res = [] とします
    (i = 0 とします; i < arr.length; i++) {
        (arr.indexOf(arr[i]) === i)の場合{
            res.push(arr[i])
        }
    }
    戻り値
}

// 重複排除結果 // [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]

同様に、 NaN === NaNfalseなので、 indexOfNaNを検索すると常に -1 になり、新しい配列には NaN は含まれません。

2.2.2 インデックスの検索

findIndexを使用して、現在の要素が最初に表示される位置が現在の位置であるかどうかを確認します。そうである場合は、それを新しい配列に格納します。

関数 uniq5(arr) {
    res = [] とします
    (i = 0 とします; i < arr.length; i++) {
        (arr.findIndex(item => item === arr[i]) === i) の場合 {
            res.push(arr[i])
        }
    }
    戻り値
}
// 重複排除結果 // [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]


同様に、 NaN === NaNfalseなので、 findIndexNaNを検索した結果は常に -1 となり、新しい配列にはNaNは含まれません。

2.3 要素の存在タイプ

このタイプは、現在の要素が新しい配列内に存在するかどうかを判断して重複を削除します。

2.3.1には以下が含まれます

includesメソッドは、配列に指定された値が含まれているかどうかを判断するために使用されます。

関数 uniq6(arr) {
    res = [] とします
    (i = 0 とします; i < arr.length; i++) {
        もし (!res.includes(arr[i])) {
            res.push(arr[i])
        }
    }
    戻り値
}
// 重複排除結果 // [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]


includes 、ゼロ値等価アルゴリズムを使用して、指定された要素が見つかるかどうかを決定するため、新しい配列に NaN が存在するかどうかを判断できます。

2.3.2 いくつか

someメソッドは、配列内の少なくとも 1 つの要素が指定された関数のテストに合格するかどうかをテストするために使用されます。

関数 uniq7(arr) {
    res = [] とします
    (i = 0 とします; i < arr.length; i++) {
        if (!res.some(item => item === arr[i])) {
            res.push(arr[i])
        }
    }
    戻り値
}
// 重複排除結果 // [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]


ここでも、要素を比較するために===が使用されています。これは、 NaN === NaNfalseであるため、新しい配列には複数のNaN存在することになるためです。

2.4 データ構造の特性に依存する

この型は、ES6が提供するデータ構造MapSetの非反復特性を利用して重複を排除します。

2.4.1 マップ

ES6が提供する Map 構造では、さまざまなタイプの値 (オブジェクトを含む) をキーとして使用でき、キーは一意です。

関数 uniq8(arr) {
    定数マップ = 新しいマップ()
    (i = 0 とします; i < arr.length; i++) {
        !map.has(arr[i]) && map.set(arr[i], true)
    }
    [...map.keys()] を返す
}
// 重複排除結果 // [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]


map.hasメソッドはNaNにも有効です

2.4.2 セット(ES6が最もよく使用される)

Set構造体のメンバーの値は一意であり、重複する値はありません。

関数 uniq9(arr) {
    [...新しいSet(arr)]を返す
}

// 重複排除結果 // [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

3 補足

上記のメソッドは、さまざまなApiを使用して変更できます。たとえば、配列要素を削除するためにspliceメソッドを使用する場合、 filterメソッドを使用して配列をフィルターし、新しい配列を取得できます。

たとえば、 includesメソッドでは、 forループを使用して配列を走査する代わりに、 reduceメソッドが使用されます。

つまり、方法はいろいろありますが、どれも同じです。

NaN === NaNfalseであるため、一部の重複排除メソッドはNaNに対して有効ではありません。必要に応じて、 Object.is(NaN, NaN)を使用してtrueにすることでこれを変更できます。

実際のアプリケーションでは、最も一般的な方法はSetを使用することですが、サードパーティのライブラリlodashを使用して処理することもできます。

JS配列重複排除の詳細に関するこの記事はこれで終わりです。より関連性の高いJS配列重複排除コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様の今後の123WORDPRESS.COMへのご支援をお待ちしております。

以下もご興味があるかもしれません:
  • JavaScript で重複配列を削除する 5 つの一般的な方法
  • JavaScript 配列の重複排除とフラット化関数の紹介
  • JavaScript配列の重複排除のいくつかの方法についての詳細な説明
  • JavaScript 配列重複排除ソリューション
  • JavaScript配列重複排除の詳細な説明
  • JS で配列の重複排除を実装する 7 つの方法

<<:  Java は Apache.POI を使用して HSSFWorkbook を Excel にエクスポートします

>>:  MySQLクエリ制御ステートメントの詳細なグラフィック説明

推薦する

Linux で Spring Boot プロジェクトを開始および停止するためのスクリプトの例

Springboot プロジェクトを開始するには、次の 3 つの方法があります。 1. メインメソッ...

CSS を使用して半透明の背景と不透明なテキストを実現する例

この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。...

CentOS 7 でソースコードから Openssh をインストールする方法

環境: CentOS 7.1.1503 最小インストール依存パッケージをダウンロードします: yum...

よく使われるnginxの書き換えルールの詳細な説明

この記事では、Web ページのリンクを美しくするためによく使用される書き換えルールをいくつか紹介しま...

MacでNodeとnpmを完全にアンインストールする方法

npmアンインストール sudo npm アンインストール npm -g この文に遭遇して npm ...

Linux サーバーに Python3 をインストールする 2 つの方法

最初の方法Alibaba Cloud および Baidu Cloud サーバーが利用可能です。 ! ...

18 個のキラー JavaScript ワンライナー

序文JavaScript は習得が最も簡単な言語の 1 つであるため、成長と繁栄を続けており、市場に...

ウェブサイトのハイパーリンクを開く方法に関する議論

新しいウィンドウが開きます。 利点: ユーザーがリンクをクリックしても、現在閲覧しているコンテンツは...

nginxリバースプロキシを使用するときに長時間接続を維持する方法

・【シーン説明】 HTTP1.1 以降、HTTP プロトコルは永続的な接続 (長い接続とも呼ばれます...

nginx がドメイン名アクセス用に設定されている場合にドメイン名の後に 2 つのスラッシュ // が表示される問題の解決方法

最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...

Vue命令の実装原理の分析

目次1. 基本的な使い方2. 指示の動作原理2.1. 初期化2.2 テンプレートのコンパイル2.3....

MySQL データのバックアップと復元のサンプル コード

1. データのバックアップ1. mysqldumpコマンドを使用してバックアップするmysqldum...

知らないかもしれないLinuxのファイル権限管理方法

なぜ権限管理が必要なのでしょうか? 1. コンピュータ リソースは限られているため、コンピュータ リ...

CSS変数を使用してダークモードを実装するためのサンプルコード

最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイト...

WeChatアプレットコンポーネント開発:視覚的な映画座席選択機能

目次1. はじめに1. コンポーネントデータ2. コンポーネントページのレイアウト1. ロゴエリアの...