ES6 でアレイを重複排除する 2 つの方法を理解する

この記事では、ES6 で配列の重複を排除する 2 つの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連する推奨事項: 「JavaScript ビデオ チュートリアル 」

ES6 で配列を重複排除する 2 つの方法

方法 1:

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

とても短いので、その理由を説明しましょう。

Map オブジェクト

Map は、ES6 によって提供される新しいデータ構造です。
Map オブジェクトにはキーと値のペアが格納されます。任意の値 (オブジェクトまたはプリミティブ) をキーまたは値として使用できます。

次の表に、Map オブジェクトのメソッドを示します。

#メソッド説明##cleardeleteforEachgethasset#Map オブジェクトには、Map オブジェクトのキーと値のペアの数を返す size 属性もあります。

すべてのキーを削除/value ペア、戻り値なし。
キーを削除し、true を返します。削除に失敗した場合は false を返します。
各要素に対して指定された操作を実行します。
Map オブジェクトのキーに対応する値を返します。
キーが現在の Map オブジェクト内にあるかどうかを示すブール値を返します。
Map オブジェクトのキー/値キー/値ペアを設定します。

配列の filter() メソッド

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

構文:

array.filter(function(currentValue,index,arr), thisValue)

パラメータの説明:

アロー関数

return arr.filter((a) => !res.has(a) && res.set(a, 1))
//上面的代码可以改成这样
return arr.filter(function(a){
    return !res.has(a) && res.set(a, 1);
});

1. コードを記述する際、アロー関数の構文はより簡潔になります;

2. これはバインドされません。

#詳細については、ここをクリックしてください

方法 1 の分析

function unique(arr) {
    //定义常量 res,值为一个Map对象实例
    const res = new Map();
    
    //返回arr数组过滤后的结果，结果为一个数组
    //过滤条件是，如果res中没有某个键，就设置这个键的值为1
    return arr.filter((a) => !res.has(a) && res.set(a, 1))
}

#方法 2:

function unique(arr) {
    return Array.from(new Set(arr))
}

この方法では必要なコードが驚くほど少なくなります。 配列の from メソッド

Array.from() メソッドは、配列のようなオブジェクトまたは反復可能なオブジェクト (Array、Map、Set、String、TypedArray、引数を含む) からデータを抽出します。オブジェクトなど)#構文:

#

Array.from(arrayLike[, mapFn[, thisArg]])

#パラメータ説明

arrayLike必須。実際の配列に変換する配列のようなオブジェクトまたは反復可能なオブジェクト。 mapFnオプション。このパラメータを指定すると、最終的に生成された配列がこの関数によって処理されて返されます。 thisArgオプション。mapFn 関数を実行するときの this の値。 サンプル コード:

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

Array.from('foo');
// ["f", "o", "o"]

オブジェクトの設定

オブジェクトを設定すると、次のことが可能になります。ストア プリミティブ値かオブジェクト参照かを問わず、任意の型の一意の値。 Set オブジェクトは値のコレクションであり、その要素を挿入順に反復できます。

セット内の要素は 1 回だけ表示されます。つまり、セット内の要素は一意です。

構文:

new Set([iterable]);

パラメータ:

iterable、反復可能なオブジェクト (Array、Map、Set、String、 TypedArray、引数オブジェクトなど)、そのすべての要素が新しい Set に追加されます。このパラメータが指定されていないか、その値が null の場合、新しい Set は空になります。 次の表に、Set オブジェクトのメソッドを示します。

#メソッド

説明

cleardeleteforEachhas

Set对象和Map对象一样，都有一个size属性，他返回Set对象的值的个数。

方法二 分析

function unique(arr) {
    //通过Set对象，对数组去重，结果又返回一个Set对象
    //通过from方法，将Set对象转为数组
    return Array.from(new Set(arr))
}

总结

这次说的两个方法，真的很简单，主要就是靠ES6里的新东西，难度不大，代码简单，主要就是多用用就好了。

---

经人提醒，再补充一种，[...new Set(arr)]  

不懂 ...  的朋友，可以看这里 js扩展运算符

更多编程相关知识，请访问：编程学习！！

##add	誰かの値を追加する、 Set オブジェクト自体を返します。
すべてのキーと値のペアを削除し、値を返しません。
キーを削除し、true を返します。削除に失敗した場合は false を返します。
各要素に対して指定された操作を実行します。
キーが現在の Set オブジェクト内にあるかどうかを示すブール値を返します。

以上がES6 でアレイを重複排除する 2 つの方法を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。