JavaScriptの重複を消すことができるSetの使い方と具体例

2021年1月31日JavaScript

ES6であたらしくSetとmapというデータ構造が追加されました。 Setの使い方と具体例をみていきましょう。

Setの使い方

Setはユニークな値したとりません。複製したりはできないようにしたい場合に有効です。 new Set()として、中にはIterableをいれます。 Iterables(反復可能な値): 配列, strings, Map, Set, （オブジェクトはiterableではありません。) Iterableには、配列などをいれます。 
{
const orderSet = new Set(['カレー', 'ラーメン', '餃子', 'ハンバーグ', 'チャーハン', 'ハンバーグ']);
console.log(orderSet);//Set(5) {"カレー", "ラーメン", "餃子", "ハンバーグ", "チャーハン"}
}
このように、合計で6つ値がありましたが、同じ値になっているハンバーグが一つ消されて5つになっています。

Setと文字列

また文字列も渡すことができます。 
{
  //文字列
console.log(new Set('yamada')); //Set(4) {"y", "a", "m", "d"}
}

Setのsizeプロパティ

{
//size
const orderSet = new Set(['カレー', 'ラーメン', '餃子', 'ハンバーグ', 'チャーハン', 'ハンバーグ']);
console.log(orderSet.size); //5
}
setのsizeプロパティで、5という数字を得ることができます。この場合だと、メニューがいくつあるかを調べることができます。

Setのhas()メソッド

{
//has()

const orderSet = new Set(['カレー', 'ラーメン', '餃子', 'ハンバーグ', 'チャーハン', 'ハンバーグ']);
console.log(orderSet.has('カレー')); //true
console.log(orderSet.has('麻婆豆腐')); //false
}
setのhas()メソッドを使うことで、それがあるかどうかをbooleanで取得することができます。arrayのincludesメソッドに似ています。

Setのadd()メソッド

{
//add()
const orderSet = new Set(['カレー', 'ラーメン', '餃子', 'ハンバーグ', 'チャーハン', 'ハンバーグ']);
orderSet.add('おでん');
orderSet.add('おでん');//無視される
console.log(orderSet);//Set(6) {"カレー", "ラーメン", "餃子", "ハンバーグ", "チャーハン", "おでん"}
}
setのadd()メソッドで追加することができます。ここでも重複している場合は値は追加されずに無視されます。

Setのdelete()メソッド

{
//delete()
const orderSet = new Set(['カレー', 'ラーメン', '餃子', 'ハンバーグ', 'チャーハン', 'ハンバーグ']);
orderSet.delete('ハンバーグ');
console.log(orderSet);//Set(5) {"カレー", "ラーメン", "餃子", "チャーハン", "おでん"}
}
setのdelete()メソッドで削除することができます。

Setは配列のように抽出はできない

{
//配列のように抽出はできない
const orderSet = new Set(['カレー', 'ラーメン', '餃子', 'ハンバーグ', 'チャーハン', 'ハンバーグ']);
console.log(orderSet[0]);//undefined
}
配列のように値を抽出したくてもできません。 setはユニークな値があるかどうかを確認するために使います。そのため、値を取り出して使いたい場合は、配列をつかいましょう。

Setのclear()メソッド

{
//clear()
const orderSet = new Set(['カレー', 'ラーメン', '餃子', 'ハンバーグ', 'チャーハン', 'ハンバーグ']);
orderSet.clear();
console.log(orderSet);//0
}
clear()メソッドを使うことで、情報が削除されて空になります。 
{
const orderSet = new Set(['カレー', 'ラーメン', '餃子', 'ハンバーグ', 'チャーハン', 'ハンバーグ']);
orderSet.clear();
orderSet.add('カレー');
orderSet.add('ラーメン');
orderSet.add('餃子');
orderSet.add('チャーハン');
console.log(orderSet);//Set(4) {"カレー", "ラーメン", "餃子", "チャーハン"}
}

setはiterableなのでforが使える

{
//setはiterableなのでforが使える

for(const order of orderSet)  console.log(order);
/*
カレー
ラーメン
餃子
チャーハン
*/
}

Setの最もよく使う方法=配列の重複を消す

{
//最もよく使う方法=配列の重複を消す
const staff = ['山田', '斎藤', '山田', '山田', '上田', '山田', '下田', '山田', '武田', '武田']
let staffUnique = new Set(staff);
console.log(staffUnique);//Set(5) {"山田", "斎藤", "上田", "下田", "武田"}

Setを配列に戻す方法

Setも配列もiterableなので、スプレッド構文を使うと簡単に配列に変換できます。 
{
//次に配列に戻したい。両方iterableなので次のようにできる
staffUnique = [...new Set(staff)];
console.log(staffUnique);//(5) ["山田", "斎藤", "上田", "下田", "武田"]という配列で得られる
}

もともと配列で、重複を消してから配列に戻したい場合

const staff = ['山田', '斎藤', '山田', '山田', '上田', '山田', '下田', '山田', '武田', '武田']
// 重複を削除
let staffUnique = Array.from(new Set(staff))
console.log(staffUnique);//(5) ["山田", "斎藤", "上田", "下田", "武田"]
もともとが配列で、重複を消してから配列に戻したい場合は上の方法が最もシンプルです。 Mapについては次の記事を参考にしてみてください。

JavaScript

Posted by devsakaso