JS で配列の重複排除を実装する 7 つの方法

1. Set()+Array.from() を使用する

Set オブジェクト:値のコレクションであり、挿入された順序で要素を反復処理できます。セット内の要素は 1 回だけ出現します。つまり、セット内の要素は一意です。
Array.from() メソッド:配列のようなオブジェクトまたは反復可能なオブジェクトの新しい浅いコピーを作成します。

const 結果 = Array.from(new Set(arr))
console.log(結果) // [ 1, 2, 'abc', true, false, undefined, NaN ]

注:上記の方法は、NaN と undefined の両方を Set に格納でき、NaN は同じ値とみなされるため (ただし、js では NaN !== NaN)、NaN と undefined 型の重複排除にも有効です。

2. 2層ループ+アレイ接合方式の使用

配列要素は 2 つのループを通じて 1 つずつ比較され、その後、 spliceメソッドを使用して重複する要素が削除されます。このメソッドは、比較時に NaN !== NaN であるため、NaN を重複排除できません。

関数removeDuplicate(arr) {

   len = arr.lengthとします

   (i = 0; i < len; i++) の場合 {

      (j = i + 1; j < len; j++) の場合 {
        もし (arr[i] === arr[j]) {
        配列jを1に連結する
        len-- // ループ回数を減らしてパフォーマンスを向上させる j-- // 加算後も j の値が変わらないようにする}
    }
  }
   リターン
}

 const 結果 = removeDuplicate(arr)

 console.log(結果) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

3. 配列のindexOfメソッドを使用する

新しい空の配列を作成し、重複排除する必要がある配列を走査して、配列要素を新しい配列に格納します。格納する前に、配列に現在の要素がすでに含まれているかどうかを判断します。含まれていない場合は、格納します。この方法では NaN の重複も削除できません。

indexOf() メソッド: fromIndexから検索し、呼び出されたStringオブジェクト内で指定された値が最初に出現するインデックスを返します。値が見つからない場合は -1 が返されます。

関数removeDuplicate(arr) {

   定数newArr = []

   arr.forEach(アイテム => {

     (newArr.indexOf(item) === -1)の場合{
     newArr.push(アイテム)
    }
 })
 return newArr // 新しい配列を返す }

定数結果 = removeDuplicate(arr)
console.log(結果) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

4. 配列のincludesメソッドを使用する

このメソッドのロジックはindexOfメソッドのロジックと似ていますが、重複する要素が含まれているかどうかを判断するためにincludesメソッドを使用する点が異なります。

include() メソッド:配列に指定された値が含まれているかどうかを判断するために使用されます。状況に応じて、値が含まれている場合は true を返し、含まれていない場合は false を返します。

 関数removeDuplicate(arr) {

    定数newArr = []

    arr.forEach(アイテム => {

       if (!newArr.includes(item)) {
       newArr.push(アイテム)
      }
   })
  newArrを返す
 }

 const 結果 = removeDuplicate(arr)

 console.log(結果) // [ 1, 2, 'abc', true, false, undefined, NaN ]

注:配列に NaN が含まれていることを include が検出できる理由は、include の基礎となる実装に関係しています。次の図は、includes 実装のコードの一部です。要素が含まれているかどうかを判断するときは、sameValueZero メソッドを呼び出して比較します。NaN の場合は、isNaN() を使用して変換します。

簡単なテストは、NaN に対する include() の判断です。

定数testArr = [1, 'a', NaN]
console.log(testArr.includes(NaN)) // 真

5. 配列のfilter()+indexOf()を使用する

filterメソッドは条件を満たす要素を新しい配列に格納し、 indexOfメソッドと組み合わせて判断を行います。

filter() メソッド:指定された関数によって実装されたテストに合格したすべての要素を含む新しい配列を作成します。

 関数removeDuplicate(arr) {

    arr.filter((item, index) => { を返します。

       arr.indexOf(item) === インデックスを返します
  })
}

定数結果 = removeDuplicate(arr)

console.log(結果) // [ 1, 2, 'abc', true, false, undefined ]

注: indexOf() は NaN を判断できないため、ここでの出力には NaN が含まれません。つまり、arr.indexOf(item) === index は false を返します。テストは次のとおりです。

定数testArr = [1, 'a', NaN]
console.log(testArr.indexOf(NaN)) // -1

6. Map() の使用

Map オブジェクトは、 JavaScriptによって提供されるデータ構造です。構造はキーと値のペアの形式です。配列要素はマップキーとして保存され、フロントエンドトレーニングでは has() メソッドと set() メソッドを組み合わせて、キーが重複しているかどうかを判断します。

マップオブジェクト:キーと値のペアを保存し、キーの元の挿入順序を記憶するために使用されます。任意の値 (オブジェクトまたはプリミティブ) をキーまたは値として使用できます。

関数removeDuplicate(arr) {

定数マップ = 新しいマップ()

定数newArr = []

arr.forEach(アイテム => {

  if (!map.has(item)) { // has() は、マップにアイテムの属性値が含まれているかどうかを判断するために使用されます。map.set(item, true) // set() を使用して、アイテムをマップに設定し、その属性値を true に設定します。
  
    newArr.push(アイテム)
  }
})

newArrを返す
}

const 結果 = removeDuplicate(arr)

console.log(結果) // [ 1, 2, 'abc', true, false, undefined, NaN ]

注: Map は NaN を NaN と等しいと見なし、他のすべての値は === 演算子の結果に基づいて等しいとみなすため、Map() を使用して NaN の重複を排除することもできます。

7. 利用対象

その実装の考え方はMap()に似ており、主にオブジェクトの属性名を繰り返すことができないという事実を利用しています。

関数removeDuplicate(arr) {

   定数newArr = []

   定数オブジェクト = {}

   arr.forEach(アイテム => {

       if (!obj[item]) {
       newArr.push(アイテム)
       obj[item] = true
      }
   })

   newArrを返す
 }

 const 結果 = removeDuplicate(arr)

 console.log(結果) // [ 1, 2, 'abc', true, false, undefined, NaN ]

これで、JS で配列の重複排除を実装する 7 つの方法についての記事は終了です。JS 配列の重複排除の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: