es6 を使用して重複排除を実装する方法 (コード例)

この記事の内容は、es6 を使用して重複排除を実現する方法 (コード例) です。必要な方は参考にしていただければ幸いです。

次に、配列から重複を削除し、一意の値を返す 3 つの方法を示します。私のお気に入りの方法は Set を使用することです。それが最も短くて簡単だからです。

const array = [5, 2, 4, 5, 3];
console.log([...new Set(array)])
console.log(array.filter((item, index) => array.indexOf(item) === index))
console.log(array.reduce((unique, item) => unique.includes(item) ? unique: [...unique, item], []))
// result:  [5, 2, 4, 3]

Set の使用

Set とは何かについて説明します。

Set は es6 で導入された新しいデータ オブジェクトです。Set では一意の値のみを保存できるため、配列で渡されると、重複する値がすべて削除されます。

さて、コードに戻って何が起こったのか見てみましょう。実際、彼は次の操作を実行しました。

1. まず、新しい Set を作成し、配列を入力パラメーターとして渡しました。Set では一意の値のみが許可されるため、値はすべて次のようになります。削除されました。

2. 重複した値がなくなったので、... を使用してそれを配列に変換します。

const array = [5, 2, 4, 5, 3];
const set = new Set(array)
const newArr = [...set]
console.log(newArr)
// result:  [5, 2, 4, 3]

Array.from() 関数を使用して Set を配列に変換します

さらに、Array.from() を使用して Set を配列に変換することもできます。配列 。

const array = [5, 2, 4, 5, 3];
const set = new Set(array)
const newArr = Array.from(set)
console.log(newArr)
// result:  [5, 2, 4, 3]

filter の使用

このオプションを理解するために、indexOf と filter

indexOf()

indexOf() の 2 つのメソッドが何を行うかを見てみましょう。配列内で最初に見つかった要素のインデックスを返します。

const array = [5, 2, 4, 5, 3];
console.log(array.indexOf(5))  // 0
console.log(array.indexOf(2))  // 1
console.log(array.indexOf(8))  // -1

filter

filter() 関数は、指定した条件に基づいて新しい配列を作成します。つまり、要素が合格して true を返した場合、その要素はフィルターされた配列に含まれます。要素が失敗して false を返した場合、その要素はフィルターされた配列には含まれません。

配列をループするたびに何が起こるかを段階的に見てみましょう。

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
  console.log(item, index, array.indexOf(item), array.indexOf(item) === index)
  return array.indexOf(item) === index
})
//输出
// 5 0 0 true
// 2 1 1 true
// 4 2 2 true
// 5 3 0 false
// 3 4 4 true

上記のコード出力のコメントを参照してください。重複した要素は、indexOf と一致しなくなるため、このような場合、結果は false になり、フィルターされた値には含まれません。

重複値の取得

配列内で filter() 関数を使用して重複値を取得することもできます。次のようにコードを調整するだけです。

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
  console.log(item, index, array.indexOf(item), array.indexOf(item) !== index)
  return array.indexOf(item) !== index
})
//输出
// 5 0 0 false
// 2 1 1 false
// 4 2 2 false
// 5 3 0 true
// 3 4 4 false

reduce() 関数を使用します

reduce() 関数は、配列の要素を削減し、それらを次のように配置するために使用されます。渡したreducer関数は最終的に最終配列にマージされます。

この場合、reducer()関数は最終配列にこの要素が含まれるかどうかを判断し、含まれていない場合はこれをスキップします。要素を返し、最後に最後の要素を返します。

reduce() 関数は常に理解するのが少し難しいので、この関数がどのように実行されるかを見てみましょう。

rreeee

以上がes6 を使用して重複排除を実装する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。