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

推薦する

ffmpeg 中国語パラメータの詳細な説明

FFMPEG 3.4.1 バージョンパラメータの詳細使用方法: ffmpeg [オプション] [[入...

HTML タグ マーキーを使用してスクロール効果を実現する簡単な方法 (必読)

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...

CSS で縦書きテキスト配置を実装する方法 (概要)

HTML でのテキストのデフォルトの配置は水平ですが、特殊な場合にはテキストを垂直に配置する必要が...

Vueのコンポーネントのprops属性について詳しく説明します

目次質問1: 小道具は具体的にどのように使用されますか?原理は何ですか?下を見る質問 2: 年齢に ...

入力ボックスのコンテンツプロンプトと非表示機能を実装する JavaScript

入力ボックスが小さい場合、内容を入力した後に、入力内容が拡大されたプロンプト ボックスを表示したいこ...

JavaScript プロトタイプの詳細

目次1. 概要1.1 プロトタイプとは何ですか? 1.2 プロトタイプを入手する2. プロトタイプの...

WiFi 開発 | WiFi ワイヤレス テクノロジーの紹介

目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...

Node.jsはMySQLデータベースの実戦記録を追加、削除、変更、チェックします

目次プロジェクトでデータベースを操作する3つのステップデータベースを操作するための具体的な手順1: ...

MySql ストレージ エンジンとインデックスに関する知識のまとめ

ストレージエンジンデータベース ストレージ エンジンとは何ですか?データベース エンジンは、データベ...

Linux 上での MySQL データベースのリモート展開の詳細な手順

LinuxリモートMySQLデータベースの展開、参考までに、具体的な内容は次のとおりです。 1.0 ...

VMware に CentOS7 をインストールし (静的 IP アドレスを設定)、Docker コンテナ経由で mySql データベースをインストールする (非常に詳細なチュートリアル)

2 年生から、これらのインストールと設定の仕方を尋ねられました。簡単なチュートリアルを作成し、ここ...

CSS 位置プロパティが絶対の場合のパーセンテージ値の計算

位置が絶対の場合、関連する属性のパーセンテージは、参照先の要素 (包含ブロック) を基準として計算さ...

ウェブアニメーションのフレームレートFPSを計算する方法

目次スムーズなアニメーションの基準方法1: Chromeデベロッパーツールを使用する方法 2: フレ...

CSS スキル コレクション - 古典の中の古典

リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...