DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. Setオブジェクト ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.17】

Setオブジェクト ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.17】

今回はECMAScript 2015で導入されたSetオブジェクトを学びます。
Setオブジェクトは重複しない値を順番で管理するリストです。

Setオブジェクトは配列(Arrayオブジェクト)と似ています。
ただし配列とは違い、値の重複ができないのと、特定の位置の値が取り出せません。

以下の説明は「オブジェクト ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.12】」、「コンストラクタ、オブジェクトを参照する変数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.13】」、「プロトタイプ継承 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.14】」の知識を前提とします。

Setオブジェクトはリテラル値はなく、Setオブジェクトを作る場合はnew演算子でSet()コンストラクタ関数を呼び出して生成します。プロトタイプ継承によりSet.prototypeオブジェクトを継承します。

Setオブジェクトの生成、値の追加、値の削除、要素数の取得

実際にコードを書いていきましょう。
Atomで新規ファイルをつくり「文字列型 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.2】」で作った「js-study」フォルダ内に、「set1.html」というファイル名で保存します。

以下のコードを書いて保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  <script>
  let names = new Set();

  names.add("太郎");
  names.add("二郎");
  names.add("三郎");

  names.delete("三郎");

  console.log(names);
  console.log(names.size);
  </script>
  </body>
</html>

Google Chromeで「set1.html」を開き、JavaScriptコンソールを開きます。
以下のように表示されれば成功です。

Set {"太郎", "二郎"}の左にある三角形を開いてみましょう。

sizeプロパティ、__proto__プロパティ、[[Entries]]プロパティの3つが表示されます。
sizeプロパティは要素の数です。__proto__プロパティはSet.prototypeオブジェクトを参照しています。[[Entries]]プロパティは内部属性です。[[Entries]]プロパティの左の三角形を開いてみましょう。

[[Entries]]プロパティは配列オブジェクトを参照していて、配列にデータがはいっています。

names.add("太郎");

add()メソッドはSet.prototypeオブジェクトのメソッドで、値を追加します。

names.delete("三郎");

delete()メソッドはSet.prototypeオブジェクトのメソッドで、値を削除します。

console.log(names.size);

sizeプロパティはSet.prototypeオブジェクトのプロパティで、要素の数が取得できます。

値が存在するかのチェック、すべての要素を削除

Atomで新規ファイルをつくり「js-study」フォルダ内に、「set2.html」というファイル名で保存します。
以下のコードを書いて保存します。
<script>より前、</script>より後ろは「set1.html」と同じなので掲載を省略しています。

<script>
let names = new Set();

names.add("太郎");
names.add("二郎");
names.add("三郎");

console.log(names.has("太郎"));

names.clear();

console.log(names.has("二郎"));
console.log(names.size);
</script>

Google Chromeで「set2.html」を開き、JavaScriptコンソールを開きます。
以下のように出力されれば成功です。

true
false
0
names.has("太郎")

has()メソッドはSet.prototypeオブジェクトのメソッドで、値が存在するかどうかチェックします。値があればtrue、なければfalseを返します。

names.clear();

clear()メソッドはSet.prototypeオブジェクトのメソッドで、値を空にできます。

様々なデータ型をSetオブジェクトに格納できる

配列とおなじく様々なデータ型をSetオブジェクトに格納できます。

let mix = new Set();

mix.add(1);
mix.add("1");
mix.add({});
mix.add({});

console.log(mix);
console.log(mix.size);

実行結果:

Set { 1, '1', {}, {} }
4

値の重複はできない

値の重複はエラーにならず、追加されず無視されます。
配列オブジェクトと違う点です。

let mix = new Set();

mix.add(1);
mix.add(2);
mix.add(1);

console.log(mix);
console.log(mix.size);

実行結果:

Set { 1, 2 }
2

コンストラクタに配列を渡した初期化

Set()コンストラクタに配列を渡して値をまとめて追加することが可能です。

let names = new Set(["太郎", "二郎", "三郎"]);

console.log(names);
console.log(names.size);

実行結果:

Set { '太郎', '二郎', '三郎' }
3

for ofループを使った中身の列挙

中身の列挙はfor ofループを使います。
Atomで新規ファイルをつくり「js-study」フォルダ内に、「set3.html」というファイル名で保存します。
以下のコードを書いて保存します。
<script>より前、</script>より後ろは「set1.html」と同じなので掲載を省略しています。

<script>
let names = new Set();

names.add("太郎");
names.add("二郎");
names.add("三郎");

for (let v of names) {
  console.log(v);
}
</script>

Google Chromeで「set3.html」を開き、JavaScriptコンソールを開きます。
以下のように出力されれば成功です。

太郎
二郎
三郎

forEach()メソッドを使った要素の操作

Atomで新規ファイルをつくり「js-study」フォルダ内に、「set4.html」というファイル名で保存します。
以下のコードを書いて保存します。
<script>より前、</script>より後ろは「set1.html」と同じなので掲載を省略しています。

<script>
let names = new Set(["太郎", "二郎", "三郎"]);

names.forEach(function(value, key, obj){
    console.log(key + " " + value);
});
</script>

Google Chromeで「set4.html」を開き、JavaScriptコンソールを開きます。
以下のように出力されれば成功です。

太郎 太郎
二郎 二郎
三郎 三郎

配列とは違いキーも値も同じ値になってしまいます。
冒頭で書いたとおり、Setオブジェクトは配列のようにインデックス値で特定の位置の値を取得することはできません。
Setオブジェクトは内部では配列が使われているのですが、仕様上インデックス値を取得できないようになっています。

forEach()メソッドは、Setの要素を引数に渡した関数で順に処理できるSet.prototypeオブジェクトのメソッドです。

引数に渡した関数は、3つの仮引数を受けることができます。値、キー、オブジェクトの3つです。Setオブジェクトの場合、値とキーには同じ値が渡されます。

オブジェクトにはSetオブジェクトの参照値がわたされます。
以下のコードで確認できます。

<script>
let names = new Set(["太郎", "二郎", "三郎"]);

names.forEach(function(value, key, obj){
    console.log(names === obj);
});
</script>

実行結果:

true
true
true

「丸囲みの3 true」と表示されるかもしれません。names変数にもSetオブジェクトの参照値が代入されています。参照値が代入される解説は「コンストラクタ、オブジェクトを参照する変数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.13】」をご覧ください。

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
制作ディレクター
ON VISITINGを制作・運営。
お問い合わせ