es6配列から重複を削除する方法は何ですか?

es6 配列重複排除メソッド: 1. Set オブジェクトと配列の from メソッド、構文 "Array.from(new Set(arr))" を使用します; 2. Set と展開演算子を使用します。構文 "[ ...new Set(arr)]"; 3. Map オブジェクトと配列の filter メソッドを使用します。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

#最初の例: Set オブジェクトと配列の Array.from メソッドを使用する

const newArr = Array.from(new Set(arr));

コード例:

実行後に結果を出力する

簡単に言えば、2 番目の方法は最初の方法よりも簡単です。こちらも簡単に説明しましょう。

• Set は ES6 によって提供される新しいデータ構造です。

  は配列に似ていますが、重複する値はありません。

• Array.from メソッドは、配列のようなオブジェクトと反復可能なオブジェクト (ES6 の新しいデータ構造 Set と Map を含む) の 2 種類のオブジェクトを実際の配列に変換するために使用されます。

したがって、set を Array.from と組み合わせることにより、配列の重複排除の効果も実現できます。ただし、Microsoft Edgeを含め、Chrome、Firrifox、Opera、Safariなどの主流ブラウザはすべてサポートしていますが、IEシリーズのみサポートしていないことに注意してください。

2 番目の方法: Set 展開演算子を使用します...

3 番目の方法はより単純であると言えます

const newArr = [...new Set(arr)];

コード例:

実行後に結果を出力する

これらは、ES6 の新機能を使用して配列の重複排除を実現する 3 つの方法です。これらのメソッドの共通の利点は、コードが簡潔であり、重複排除の効果が未定義および NaN に対しても達成できることです~~

3 番目のメソッド: Map のフィルター メソッドを使用します。オブジェクトと配列

function unique(arr) {
    const res = new Map();
    return arr.filter((a) => !res.has(a) && res.set(a, 1))
}

#コード例:

出力結果

# 印刷することで、私たちが望んでいた効果が実際に達成されることがわかりました。そこで、以下で簡単に説明してみましょう。

Map オブジェクトは ES6 によって提供される新しいデータ構造です。has メソッドは、現在の MP オブジェクトに特定の値が存在するかどうかを示すブール値を返します。set メソッドは次のとおりです。 Map オブジェクトのキー/値を設定します。

• 2 filter() メソッドは新しい配列を作成し、新しい配列内の要素が、条件を満たす指定された配列内のすべての要素についてチェックされます。

• つまり、Map オブジェクトと filter メソッドを組み合わせることで、配列の重複排除の効果を実現できます~

[推奨学習:

JavaScript 上級チュートリアル

]

以上がes6配列から重複を削除する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。