ホームページ > 記事 > ウェブフロントエンド > 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 では一意の値のみを保存できるため、配列で渡されると、重複する値がすべて削除されます。
さて、コードに戻って何が起こったのか見てみましょう。実際、彼は次の操作を実行しました。
まず、新しい Set を作成し、配列を入力パラメーターとして渡しました。Set では一意の値のみが許可されるため、値はすべて次のようになります。削除されました。
重複した値がなくなったので、... を使用してそれを配列に変換します。
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 サイトの他の関連記事を参照してください。