ホームページ >ウェブフロントエンド >フロントエンドQ&A >es6 で arr (配列) 重複排除を実装する方法

es6 で arr (配列) 重複排除を実装する方法

青灯夜游
青灯夜游オリジナル
2022-08-30 17:48:282262ブラウズ

3 実装方法: 1. データ構造と「Array.from()」重複排除の設定、構文「Array.from(new Set(arr))」; 2. データ構造と拡張演算子の設定「.. ." 重複を削除する場合、構文は "[...new Set(arr)]" です。 3. filter() および IndexOf() フィルタリング、構文は "arr.filter((it,in)=>{ return arr .indexOf(it,0)===in;});"。

es6 で arr (配列) 重複排除を実装する方法

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

ES6 配列から重複を削除する 5 つの方法

1. データ構造と Array.from() を設定します。

  • #Set は ES6 によって提供される新しいデータ構造で、配列に似ていますが、重複する値はありません。この機能を使用すると、重複排除のために配列を Set 型に変換し、Array.from メソッドを使用して再度配列に変換できます。

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

実装アイデア:

  • 配列をセット コレクションに変換して重複を削除した後、Array.from メソッドを使用してセットを次のように変換します。配列

構文:

Array.from(new Set(arr))

例:

let arr=[1,2,3,3,2,"1",0,undefined,undefined];
let newArr=Array.from(new Set(arr));
console.log(newArr);

es6 で arr (配列) 重複排除を実装する方法

2. Setデータ構造と拡張操作 演算子「...」は重複を削除するために使用されます。

  • #展開演算子

    # は ES6 で導入され、反復可能オブジェクトを展開します。オブジェクトを個別の要素に分割します。いわゆる反復可能オブジェクトとは、for of ループを使用して走査できるオブジェクト (配列、文字列、Map、Set、DOM ノードなど) です。

実装アイデア:

  • 配列をセット コレクションに変換して重複を削除した後、スプレッド演算子を使用してセットを展開します。コレクションを配列に変換し、コレクションを配列に変換します。

構文:

[...new Set(arr)]

例:

let arr=[1,2,3,3,2,"1",0,1,2];
let newArr=[...new Set(arr)];
console.log(newArr);

es6 で arr (配列) 重複排除を実装する方法

3. 配列を使用する filterindexOf メソッドは重複を削除します

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

indexOf メソッドは、配列内の指定された要素の最初のインデックス (インデックス) を返します。そうでない場合は、-1

例:


var arr=[1, 2, 3, 2, 3];
var newArr = arr.filter((item,index)=> {
  return arr.indexOf(item,0) === index;
});
console.log(newArr);

es6 で arr (配列) 重複排除を実装する方法

したがって、ここで、indexOf() メソッドを通じて arr 配列の各要素によって返されるインデックス値は、0 1 2 1 2

arr.forEach(item => console.log(arr.indexOf(item))); // 0 1 2 1 2

です。indexOf を使用して、次のような重複排除を実現できます。 arr と同様に、4 番目の要素 2 は 1 から IndexOf までのインデックスを返しますが、その現在のインデックス添え字は 3 であり、等しくありません。これは、現在の 2 要素が以前に出現しているため、フィルタリングして除外する必要があることを示しています。

【関連する推奨事項:

JavaScript ビデオ チュートリアル Web フロントエンド ]

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。