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クエリ制御ステートメントの詳細なグラフィック説明

推薦する

docker を使用した pxc クラスターのインストールに関する詳細なチュートリアル

目次序文事前準備ディレクトリを作成するcustom.cnf を作成する証明書を作成するpxc クラス...

JavaScript におけるイベント委譲メカニズムと深いコピーと浅いコピーの簡単な分析

目次1. イベントの委任イベントバブリングイベントキャプチャイベントの泡立ちの昇華考える2. 深いコ...

ウェブサイトのコードブロックのpreタグにコピーコードボタンコードを追加します

他のよりプロフェッショナルなブログ システムを参照すると、コード ブロックにコードのコピー ボタンが...

JavaScript データ構造 双方向リンクリスト

単方向リンク リストは、先頭から末尾、または末尾から先頭への方向のみを走査できます。そのため、単方向...

MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...

Taobao の商品画像切り替え効果を実現する JavaScript

JavaScriptの服装アルバム切り替え効果(Taobao商品画像切り替えに似ています)、参考ま...

Vueでのバスの使用に関する詳細な説明

Vue バス メカニズム (バス) vuex を使用するだけでなく、vue 内の親子以外のコンポーネ...

操作例 MySQL ショートリンク

MySQL ショートリンクの設定方法1. mysql 接続番号ステートメントコマンドを確認します。 ...

MySQL Installer Community 5.7.16 インストール詳細チュートリアル

この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...

mysql 8.0.19 winx64.zip インストール チュートリアル

この記事は参考までにmysql 8.0.19 winx64.zipのインストールチュートリアルを記録...

Vueデータ監視の原理の詳細な説明

<本文> <div id="ルート"> <h1&...

base target="" はフレームを開くためのベースリンクのターゲットを指定します

<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...

React diffアルゴリズムソースコード分析

目次単一ノード差分単一要素を調整するマルチノード差分調整子配列ノードが移動したかどうかを判断するには...

MySQL 5.7 および 8.0 データベースのルート パスワードを忘れた場合の解決策

注: MySQL5.7 で root パスワードをクラックするには、パスワード認証をスキップしてデー...

Vue.jsはシンプルな折りたたみパネルを実装します

この記事では、Vue.jsの具体的なコードを共有して、シンプルな折りたたみパネルを実装する例を紹介し...