JavaScriptのSetオブジェクトに関して

2021 2/11

2021.02.07 2021.02.11

トモジ

Setオブジェクトって何？
詳しく知りたい・・

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが
作れる状態になりました。

本記事は、Setオブジェクトに関して要点を
わかりやすく説明しております。

記事の内容

JavaScriptのSetオブジェクト

Setオブジェクトは、重複しない値の集合を
管理するためのオブジェクトで
ES2015から新たに導入されました。

size

sizeとは、
Setオブジェクトで追加した要素数を返します。

例

sizeに関して

// Sapオブジェクトの生成
let set = new Set();

set.add('りんご'); //要素の追加
set.add('ゴルゴ'); //要素の追加
set.add('パンツ'); //要素の追加

console.log('set : ' + set.size);

出力結果

set(size) : 3

add

addは、
指定した値を追加し重複の場合は無視されます。

例

addに関して

// Sapオブジェクトの生成
let set = new Set();

set.add('りんご'); //要素の追加
set.add('ゴルゴ'); //要素の追加
set.add('パンツ'); //要素の追加
set.add('パンツ'); //要素の追加
set.add('パンツ'); //要素の追加

console.log('set(add重複) : ' + set.size);

出力結果

set(add重複) : 3

has

hasは、指定した要素が存在するかを確認します。

例

hasに関して

// Sapオブジェクトの生成
let set = new Set();

set.add('りんご');
set.add(10);

console.log('has(りんご) : ' + set.has('りんご'));
console.log('has(10) : ' + set.has(10));
console.log('has(ご) : ' + set.has('ご'));

出力結果

has(りんご) : true
has(10) : true
has(ご) : false

delete

deleteは、指定した要素を削除します。

例

deleteに関して

// Sapオブジェクトの生成
let set = new Set();

set.add('りんご');
set.add('ゴルゴ');
set.add('パンツ');

console.log('size(削除前) : ' + set.size);

set.delete('ゴルゴ');

console.log('size(削除後) : ' + set.size);

出力結果

size(削除前) : 3
size(削除後) : 2

clear

clearは、すべての要素を削除します。

例

clearに関して

// Sapオブジェクトの生成
let set = new Set();

set.add('りんご');
set.add('ゴルゴ');
set.add('パンツ');

console.log('size(削除前) : ' + set.size);

set.clear();

console.log('size(削除後) : ' + set.size);

出力結果

size(削除前) : 3
size(削除後) : 0

entries

entriesは、setオブジェクトの
各要素を挿入順に取り出します。

setオブジェクトは、
key を持つことはありませんので
[value,value]の形で新しい
イテレーターオブジェクトを返します。

※イテレータに関してわからない場合

values

valuesは、
setオブジェクトの各要素の値を挿入順に取り出し
新しいイテレーターオブジェクトを返します。

例

valuesに関して

// Sapオブジェクトの生成
let set = new Set();

set.add('りんご');
set.add('ゴルゴ');
set.add('パンツ');

var vales = set.values();
console.log('val先頭 : ' + vales);

console.log('1 : ' + vales.next().value);
console.log('2 : ' + vales.next().value);
console.log('3 : ' + vales.next().value);

出力結果

1 : りんご
2 : ゴルゴ
3 : パンツ

forEach

forEachは、
指定した関数をsetの各値ごとに処理をします。

例

forEachに関して

// Sapオブジェクトの生成
let set = new Set();

set.add('1番目:')
set.add('2番目:')
set.add('3番目:')

function func(value, set) {
  console.log(value, this);
}

let thisValue = "thisの値";

set.forEach(func, thisValue);

出力結果

1番目: thisの値
2番目: thisの値
3番目: thisの値