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にRabbitMQをインストールする詳細な手順

目次1. 鏡を見つける2. RabbitMQイメージをダウンロードする3. RabbitMQコンテナ...

MySQL 整合性制約の定義と例のチュートリアル

目次整合性制約整合性制約の定義整合性制約の分類主キー制約単一の主キーと複合主キーの違い主キーフィール...

HTML のタイトル、段落、改行、水平線、特殊文字についての簡単な説明

タイトルXML/HTML コードコンテンツをクリップボードにコピー< h1 >第 1 レ...

CentOS 7 でゲートウェイを変更して IP を設定する方法の例

Centos7 バージョンをインストールするときに、外部ネットワークへの接続を選択すると、外部ネット...

el-table カプセル化に基づくドラッグ可能な行と列、および選択列コンポーネントの実装

効果環境が必要ビュー要素UIドラッグアンドドロッププラグインSortable.js必要な構成プロパテ...

Doubanウェブサイトのウェブサイトコンテンツに小さな変更を加える方法

<br />読みやすさはウェブサイトにとって非常に重要な部分であり、ウェブサイトの核心と...

vue.config.js パッケージ最適化構成

Baiduの情報は多様すぎて目が回ります。心配しないでください。私はあなたのためにそれを体験しました...

HTML ul 順序なしテーブルのアプリケーションネスト

順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...

iptables および firewalld ツールを使用して Linux ファイアウォール接続ルールを管理する

ファイアウォールファイアウォールは一連のルールです。パケットが保護されたネットワーク空間に出入りする...

MySQL 5.7 mysql コマンドラインクライアントの使用コマンドの詳細

MySQL 5.7コマンドを使用するMySQLコマンドラインクライアント1. パスワードを入力してく...

JavaScript キャンバスでカラフルな太陽のハロー効果を実現

この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコー...

両端揃えレイアウトを実現する CSS 列のサンプルコード

1. 堂々巡りいろいろ試行錯誤した結果、均等割り付けレイアウトを実現する最も簡単な方法は CSS ...

ウェブデザインには目的、アイデア、思考、そして粘り強さがなければならない

<br />はじめに:このアイデアは、数日前に上級ウェブデザインの次の記事を考えていると...

JavaScript でシンプルなクリスマス ゲームを実装する

目次序文成果を達成するコードCSSコードJSコードHTMLコードデモンストレーションのプロセス序文ク...

docker公式mysqlイメージのカスタム構成の詳細な説明

インストール時間を節約するために、公式の mysql docker イメージを使用して mysql ...