es6で配列内の同じ要素を削除する方法

削除メソッド: 1. Map オブジェクトと配列のフィルター メソッドを使用します。構文は「function unique(arr) {const res = new Map();return arr.filter((a) =>」です。 !res.has(a) && res.set(a, 1))}"; 2. Set オブジェクトと配列の Array.from メソッドを使用します。 3. Set オブジェクトと展開演算子 "... "; 4.reduce()を使用します。

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

ES6 配列から重複を削除する 4 つの簡単な方法

最初の方法: Map オブジェクトと配列フィルターを使用する方法

関連するコードを貼り付けます

印刷後の結果

印刷すると、実際にそれが達成されたことがわかりました私たちが望む効果。そこで、以下で簡単に説明してみましょう。
1. Map オブジェクトは、ES6 によって提供される新しいデータ構造です。has のメソッドは、現在の MP オブジェクトに特定の値が存在するかどうかを示すブール値を返します。set のメソッドは、キー/を設定します。 Map オブジェクトの値。
2. filter() メソッドは新しい配列を作成します。新しい配列の要素は、指定された配列内の条件を満たすすべての要素をチェックすることによってチェックされます。
したがって、Map オブジェクトと filter メソッドを組み合わせることで、配列の重複排除の効果を実現できます~

2 番目のタイプ: Set オブジェクトと Array.from を使用する配列のメソッド

関連するコード スニペットも貼り付けます

#実行後に結果を出力します

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

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

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

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

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

3 番目の方法は次のように言えます。もっと簡単

関連するコードを貼り付けます

##印刷後の結果

# 4 番目の方法:reduce

reduce メソッドを使用して配列要素を削減し、渡した削減処理関数に従ってそれらを最終的な配列に結合します。

この例では、reducer 関数は、最終的な配列に要素が含まれているかどうかをチェックします。含まれていない場合、要素はこの配列にプッシュされます。それ以外の場合、この要素は無視されます。この関数は最終的に最終配列を返します。

削減プロセスは理解するのが簡単ではありません。分解して出力を見てみましょう:

以下はコンソールの出力です。 .log:

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