🦭

【TypeScript】 Set(Set<T>)の理解に苦しんだ備忘

2023/02/13に公開

JavaScript

TypeScript

tech

TypeScriptでSet関数が絡む型定義の理解に時間がかかってしまったので備忘と復習を兼ねて

▼Set<T>とは

SetはJavaScriptの組み込みAPIのひとつで、値のコレクションを扱うためのオブジェクトです。Setには重複する値が格納できません。Setに格納された値は一意(unique)になります。(下記　公式より)

Setはオブジェクトであって、配列ではない。
※今回ここの気付きが遅れてハマりました。

▼コレクションとは

配列や連想配列の総称のこと

■Setを触ってみる

挙動を確認するために簡単なオブジェクトを複数用意します。

const c_hr = {
　　　　manufacturer: "toyota"
};

const vezel = {
　　　　manufacturer: "honda"
};

const levorg = {
　　　　manufacturer: "subaru"
};

const gtr = {
　　　　manufacturer: "nissan"
};

これら👆を使ってSetオブジェクトを作ってみます。
コンストラクタに配列として渡してあげると、その値がSetに格納されます。

const cars = new Set([c_hr, vezel, levorg, gtr]);

確認してみる

// console.log(cars)
// ▶Set(4) {{…}, {…}, {…}, {…}}

`オブジェクトが複数格納された「オブジェクト」`　となっていた

Setはオブジェクトを生成するので、配列Arrayが持っているプロパティを使うことができず、
この状態では「最初の要素を取り出す」のように、要素を指定して取得することができない。

// 以下のように要素を指定してのアクセスができない
cars[0]

■配列に変換する方法

スプレッド構文を使ってオブジェクトを展開する。

スプレッド構文

const carsArray = [...cars]; //スプレッド構文でcarsを展開し新たな変数に格納

// carsArray
// (4) [{…}, {…}, {…}, {…}]
//   0:{manufacturer: 'toyota'}
//   1:{manufacturer: 'honda'}
//   2:{manufacturer: 'subaru'}
//   3:{manufacturer: 'nissan'}
//   length:4
//   [[Prototype]]:Array(0)

他にも色々操作できるみたいなので、触って確認してみようと思います。