Velo 第２６回　リテラルとSetオブジェクト

基本型の文字列 'abcd'、数値 1234、論理値 true などは、文字そのもので直接データ値を表現できます。
これをリテラルと呼びます。'abcd' は文字列リテラル、1234 は数値リテラル、true は論理値リテラルです。
第25回で触れましたように、これらは何の構造も持ちませんが必要に応じてラッパーオブジェクトに変換されメソッドが使えるようになります。

一方、オブジェクト型のデータ等についてもリテラルが存在します。
以下のコードをご覧下さい。

const a = {x:1, y:2, z:3}; // オブジェクトをリテラルで定義
const b = [1, 2, 3]; // 配列をリテラルで定義
function c(x){return x*x}; // 関数をリテラルで宣言

基本型と同様に、オブジェクトリテラル、配列リテラル、関数リテラルと言います。
リテラルはそれぞれのオブジェクトの初期化方法の一つと考えておくのが適切かと思います。

一方オブジェクトの初期化は各オブジェクトに備え付けのコンストラクターという関数で行うのが正式です。
基本型ならString( )、Number( )、Boolean( )というコンストラクターがあります。
オブジェクト型ならObject( )、Array( )などがあります。以下のコードをご覧下さい。

const a = String('abcd'); // 文字列型オブジェクトを定義
const b = Number(1234); // 数値型オブジェクトを定義
const c = Boolean(true); // 論理値型オブジェクトを定義
const p = Object({x: 1,y: 2,z: 3}); // オブジェクトを定義
const q = Array(1, 2, 3); // 配列を定義

つまりリテラルは基本型、オブジェクト型を問わずアプローチしやすい初期化方法となっています。
では逆に、すべてのオブジェクトがリテラルによる初期化方法を用意しているかと言うとそうではありません。

Velo のコーディングで使うことは少ないですが、Javascript には Set オブジェクトと言うものがあります。
これは配列と同じように値の集合ですが、配列と異なり順序付けを行わず、値の重複を許しません。
従って本来の意味での集合です。
このSet オブジェクトはリテラルを持たず Set( ) コンストラクタで初期化します。
以下のコードをご覧下さい。

const a = new Set(); // 新しい空のセット
const b = nes Set('1'); // 文字列 '1' を要素とする新しいセット

const c = nes Set(1); //　数値 1 は反復可能ではないので叱られます 
Uncaught TypeError: number 1 is not iterable

const c = nes Set([1]); // 1 を要素とする新しいセット：配列にしておけば展開されます
const b = new Set([1, 2]); // ２つの数値 1, 2 を要素をもつ新しいセット：配列を使います

const d = new Set('Mississippi'); // 'M', 'i', 's', 'p' の４つを要素とする新しいセット
const e = new Set(d); // 要素が d と同じ新しいセット  

初期化できるのはコンストラクターのみで、リテラルで書くことはできません。
また、Set( ) の引数は反復可能オブジェクトのみです。
従って引数にできるのは、配列、文字列、他のSetオブジェクト等と限定されます。
数値やオブジェクトを引数にすることはできませんのでその時には数値やオブジェクトを配列に入れます。
ちょっと難しいです。

Set オブジェクトの要素を操作するためにはadd( )、delete( )、clear( )メソッドを使います。
また要素の個数を調べる size プロパティを持っています。
以下のコードをご覧下さい。

const s = new Set();
s.add(1) // add() 関数の引数には反復可能オブジェクトが求められていません
　　　　    集合で表すと s = {1} となります：(注)こういうリテラルはありません
s.add([2, 3]) // 配列が追加され展開されません
           集合で表すと s = {1, [2, 3]} となります：(注)こういうリテラルはありません
s.size // 2：配列は１つと数えます

s.delete(1) // true：要素 1 が削除されます
s.delete([2, 3]) // false：要素の[2, 3]は配列なので、削除しようとする[2, 3]とは
　　　　　　　　　　 インスタンスが異なりますので削除はできません
s.clear() // セットから要素が全てなくなります
s.add(1).add(2).add(3) // add() はSet オブジェクトを返すのでチェインで要素を追加できます
　　　　　　　　　　　　// 集合で表すと s = {1, 2, 3} となります：(注)こういうリテラルはありません

add( )メソッドは引数を１つだけ取ります。複数の引数は最初のもの以外無視されます。
複数の要素を追加するときには上のように add( )チェインを使います。
またオブジェクトを削除するときには第16回で触れましたようにリテラルではインスタンスが異なりますので思うように削除ができません。

Set オブジェクトにはリテラルがないので何が要素なのか見えずに困ることがあります。
その時はhas( ) メソッドを使います。以下のコードをご覧下さい。

const a = new Set([1,2,3]);
a.has(1); // true：数値 1 は要素です
a.has('1'); // false：文字列 '1' は要素ではありません
a.has(4); // false：数値 4 は要素ではありません

Set オブジェクトは重複のない反復可能オブジェクトですので、その真価は for/of ループ、foeEach() メソッド、スプレッド演算子にあります。
Velo のコーディングで意識することは殆どありませんが、配列よりこの点で優れています。

Velo開発のご依頼はこちら

お問い合わせ | 合同会社アクトワン | ホームぺージ作成 大阪府和泉市