かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

JavaScript (ES2015) アロー関数 省略した書き方とかのメモ

ES2015/ES6で追加されたアロー関数()=>{...}thisを拘束できるのがメインだと思っているのですが、色々と省略した書き方ができるようで、まだ不慣れなのでライブラリとか参考のコード見てる時に何だっけ?となりがちだったので省略した書き方のメモ。

アロー関数の基本形

(param1, param2) => {
 // ... 処理
}

関数名を付けて定義

const func = (param) => {
  // ... 処理
}

引数が1つのとき()を省略できる

(param) => { ... }

↓ 省略形

param => { ... }

値を返すだけの関数のときreturn{}を省略できる

(param) => { return val }

returnを省略

(param) => { val }

{}も省略

(param) => val
{}だけ省略はエラーになる
(param) => return val
// SyntaxError: Unexpected token return

オブジェクトを返す時は()で囲う

返すオブジェクトを()で囲わないと、オブジェクトの{}が関数のブロックと解釈される
ex: {cute: '星宮いちご'}というオブジェクトを返す関数

const foo = (param) => {cute: '星宮いちご'}
foo() // undefined

()で囲ってないとエラーにはならないがundefinedが返る
返すオブジェクトを()で囲む ↓

const foo = (param) => ({cute: '星宮いちご'})
foo() // {cute: '星宮いちご'}

↓ 下記と同様

const foo = (param) => {
  return {cute: '星宮いちご'}
}

正直{ return {...} }で良くない?って感じる…

const foo = (param) => { return {cute: '星宮いちご'} }

慣れの問題かもだけど、引数の()を省略は見づらい... 値を返すだけの関数を1行で書いて{}return省略するのは、返す値がオブジェクトや複雑な計算式だとやっぱ見通しが悪い気がしてます。
チームでの開発ならprettierとかフォーマッターを導入するか、書き方のルールを決めておかないと、省略形が入り乱れると結構混乱しそうって思いました。


これから学ぶ JavaScript

これから学ぶ JavaScript

JavaScript (ES2015) オブジェクトのループについてのメモ

ES2016/ES6でfor...ofが追加されたので改めてオブジェクトのループの方法を見直そうと思いました。

for..of

for...of 文は、iterableオブジェクトに対して反復的な処理をするループを作成します(iterableオブジェクトには組み込みのString, Array, 例えば Array に似たargumentsNodeListオブジェクト、TypedArray, Map, Set, ユーザー定義のiterableなどが含まれます)。

for..of と for...in の違い

  • for...of は値を列挙する
  • for...in はプロパティ(インデックス)を "prototypeで拡張されたプロパティを含めて" 列挙する

ex

Object.prototype.objCustomFunc = function() {};
Array.prototype.arrCustomFunc = function() {};
let arr = ['星宮いちご', '霧矢あおい', '紫吹蘭'];
arr.unitName = 'ソレイユ';

// for...of
for (let val of arr) {
  console.log(val);
}
// => "星宮いちご", "霧矢あおい", "紫吹蘭"

// for...in
for (let i in arr) {
  console.log(i);
}
// => 0, 1, 2, "unitName", "arrCustomFunc", "objCustomFunc"

// hasOwnProperty を使えば自身のプロパティだけに限定できる
for (let i in arr) {
  if ( iterable.hasOwnProperty(i) ) {
    console.log(i);
  }
}
// => 0, 1, 2, "unitName"

for...of でオブジェクトをそのままループさせることはできない

ObjectはiterableオブジェクトではないのでTypeErrorになる

let obj = {
  cute:   '星宮いちご',
  cool:   '霧矢あおい',
  sexy:   '紫吹蘭',
  pop:    '夏樹みくる',
  legend: '神前美月'
};
for (let val of obj) {
  console.log(val);
}
// => TypeError: obj is not iterable

Object.keys()でキーの配列をfor...ofでループさせる

let obj = {
  cute:   '星宮いちご',
  cool:   '霧矢あおい',
  sexy:   '紫吹蘭',
  pop:    '夏樹みくる',
  legend: '神前美月'
};
Object.prototype.objCustomFunc = function() {};

// for...of Object.keys(obj)
for (let key of Object.keys(obj)) {
  console.log(key, obj[key]);
}
// cute 星宮いちご
// cool 霧矢あおい
// sexy 紫吹蘭
// pop 夏樹みくる
// legend 神前美月

Array.forEachを使う方法

Object.keys(obj).forEach(function(key) {
  console.log(key, this[key]);
}, obj);
// cute 星宮いちご
// cool 霧矢あおい
// sexy 紫吹蘭
// pop 夏樹みくる
// legend 神前美月

Array.forEachで実行する関数をアロー関数()=>にすると、関数内のthisが第二引数で渡したオブジェクトにならないので、第二引数を使用する場合は注意が必要

for...in obj を使う方法

for...inならオブジェクトのままループさせることができるが、配列と同様でprototypeで拡張されたプロパティも列挙される

for (let key in obj) {
  console.log(key, obj[key]);
}
// cute 星宮いちご
// cool 霧矢あおい
// sexy 紫吹蘭
// pop 夏樹みくる
// legend 神前美月
// objCustomFunc [Function]
所謂 for 文でループさせる
let keys = Object.keys(obj);
for (let i = 0, l = keys.length; i < l; i += 1) {
  console.log(keys[i], obj[ keys[i] ]);
}
// cute 星宮いちご
// cool 霧矢あおい
// sexy 紫吹蘭
// pop 夏樹みくる
// legend 神前美月

まとめ

オブジェクトをループさせたい時

  1. for...of Object.keys(obj) でループさせる
  2. Object.keys(obj).forEach でループさせる ※ ループ中にbreakはできない
  3. for...in obj でループさせ適時 obj.hasOwnProperty(key)で自身のプロパティかチェックする
  4. for文でオブジェクトのキーをインデックス順に列挙してループさせる

ループ中にbreakもできるのでES2015/ES6が使える環境なら、for...ofでループさせるのが一番ラクかなと思いました。
IEfor...of未対応なようなので、IE11必須みたいなWEBサイト制作ではbabelとか使わないとダメですね... IE... ξ(Ծ‸Ծ)ξ


[参考]

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

JavaScript (ES2015) 分割代入でエラーになるトラップにはまる。

ECMAScript2015 (ES2015 / ES6)で追加された、配列やオブジェクトを分割して変数に代入できる分割代入で色々エラーになってハマったのでメモ。

分割代入 Destructuring assignment

分割代入 - JavaScript | MDN とは

// 配列
let [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

// オブジェクト
let {cute, cool, sexy, ...other} = {
  cute:   '星宮いちご',
  cool:   '霧矢あおい',
  pop:    '有栖川おとめ',
  sexy:   '紫吹蘭',
  legend: '神前美月'
};
console.log(cute);  // 星宮いちご
console.log(cool);  // 霧矢あおい
console.log(sexy);  // 紫吹蘭
console.log(other); // { pop: '有栖川おとめ', legend: '神前美月' }

こんなの。
配列は前から順番(インデックス順)に、オブジェクトは変数名と合致するプロパティの値が変数に代入される。

変数宣言外で分割代入をする際のトラップ

オブジェクトの分割代入を行う時、全体を()で囲ってないとエラーになる

変数宣言とオブジェクトの分割代入を別に行う場合は、分割代入の式全体を()で囲ってないとSyntaxError: Unexpected token

let a, b;
{a, b} = { a: 10, b: 20 };
console.log(a, b);
// {a, b} = { a: 10, b: 20 }
//       ^
// SyntaxError: Unexpected token =

↓ 分割代入全体を()で囲う

let a, b;
({a, b} = { a: 10, b: 20 });
console.log(a, b); // 10 20

分割代入の前の文にセミコロン;が無いとエラーになる場合がある

変数宣言だけだとエラーにならない

let a, b
[a, b] = [1, 2]
console.log(a, b) // 1, 2

変数宣言時に値を代入しているとReferenceError: X is not defined

let a = 1, b = 2
[a, b] = [b, a]
console.log(a, b)
// [a, b] = [b, a]
//    ^
// ReferenceError: b is not defined

↓ 前の文にセミコロン;があればエラーにならない

let a = 1, b = 2;
[a, b] = [b, a]
console.log(a, b) // 2 1

分割代入の直前に文末にセミコロン;がないconsole.log()のような文があるとTypeError

let a = 1, b = 2
console.log(a, b)
[a, b] = [b, a]
console.log(a, b)
// [a, b] = [b, a]
//        ^
// TypeError: Cannot set property '2' of undefined

↓ 分割代入直前の文末にセミコロン;をつければOK

let a = 1, b = 2
console.log(a, b); // 1 2
[a, b] = [b, a]
console.log(a, b)  // 2 1

別に前の文の文末でなくても、分割代入式の直前にセミコロンがあればOKっぽい

let a = 1, b = 2
console.log(a, b) // 1 2
;
[a, b] = [b, a]
console.log(a, b)  // 2 1

分割代入式の前に;を書いてしまってもOK

let a = 1, b = 2
console.log(a, b) // 1 2
;[a, b] = [b, a]
console.log(a, b)  // 2 1

分割代入の直前がブロックとか、セミコロン;で文の終わりが明示されていればエラーにならないっぽい?

let a = 1, b = 2
{} // function func() {} とかでもOK
[a, b] = [b, a]
console.log(a, b) // 2 1
オブジェクトでも同様。分割代入式の直前が;かブロックでないとエラー
let cute, cool
({cute, cool} = { cute: '星宮いちご', cool: '音城セイラ' })
console.log(cute, cool) // 星宮いちご, 音城セイラ

変数宣言だけなら文末にセミコロン;がなくてもエラーにならないが、
変数宣言時に初期値の代入があるとエラー (TypeError)

let cute = '星宮いちご', cool = '霧矢あおい'
({cute, cool} = { cute: '大空あかり', cool: '氷上スミレ' })
// ({cute, cool} = { cute: '大空あかり', cool: '氷上スミレ' })
// ^
// TypeError: "霧矢あおい" is not a function

↓ 代入している文章が終わってなく、分割代入の式が続いていて関数だと判断されているので、分割代入式の前に;をつけるか、ブロックになる式が入ればOK

let cute = '星宮いちご', cool = '霧矢あおい';
({cute, cool} = { cute: '大空あかり', cool: '氷上スミレ' })
console.log(cute, cool) // 大空あかり 氷上スミレ

とか

let cute = '星宮いちご', cool = '霧矢あおい', n = 5
while(n--) { console.log(n) }
({cute, cool} = { cute: '大空あかり', cool: '氷上スミレ' })
console.log(cute, cool) // 大空あかり 氷上スミレ

ブロック式があるとか

var cute = '星宮いちご', cool = '霧矢あおい'
;({cute, cool} = { cute: '大空あかり', cool: '氷上スミレ' })
console.log(cute, cool) // 大空あかり 氷上スミレ

分割代入式の先頭を;で始めるとか

分割代入の前に入る文がブロックでない場合は文末にセミコロン;が無いとエラーになる (TypeError)

function myFunc() { console.log('OKOKOK-') }
var sexy = '神前美月', pop = '夏樹みくる'
myFunc()
({sexy, pop} = { sexy: '風沢そら', pop: '冴草きい' })
// ({sexy, pop} = { sexy: '風沢そら', pop: '冴草きい' })
// ^
// TypeError: myFunc(...) is not a function

↓ 分割代入の直前にセミコロン;があればOK

function myFunc() { console.log('OKOKOK-') }
var sexy = '神前美月', pop = '夏樹みくる'
myFunc();
({sexy, pop} = { sexy: '風沢そら', pop: '冴草きい' })
console.log(sexy, pop) // 風沢そら 冴草きい

 

まとめ

変数宣言と同時でない分割代入は、下記パターンで文章が続いていると判断されてエラーになるようです。

  • オブジェクトの場合は分割代入の式全体を()で囲ってないとエラーになる
  • 分割代入式の直前が「変数宣言のみ」又は、セミコロン;かブロック{}でないとエラーになる

 
最近のJSのコードやESLintで、JSでセミコロン;は不要になったみたいな印象を勝手に受けてたのですが、基本的に必要な文末にはセミコロン付けるようにした方が良いんじゃないかなって思いました。
変数宣言と同時でない所で使う分割代入式はセミコロン;から始めること。としても良いかもですが、この方がLintとかに怒られたりで設定とかが面倒そうです…


[参考]

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター! 速習シリーズ

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター! 速習シリーズ

PCもっての出張で便利だったアイテムを4つ

ここ数年田舎ちほー在住で月1ペースくらいで関東圏に行っていて仕事道具であるPC周りをバックパックに詰めて新幹線移動とゲストハウス滞在を繰り返していました。
その体験からPC持っての移動や宿泊時に便利だったものを4つ紹介したいと思います。(商品紹介記事ですね!!)

コンパクトなPCスタンド

f:id:kikiki-kiki:20181005141040j:plain

ラップトップの冷却のためとかスタンドは色々ありますが、移動で持ち運ぶとなるとコンパクトなものがジャスティスです。これは分割もできるのでPCケースとかに収納しておけるので良かったです。

f:id:kikiki-kiki:20181005141102j:plain 新幹線のようなテーブルが狭くコンセントが1つしかない場所だとPCに電源を繋いでUSBからスマートフォンやモバイルバッテリー充電をするのですが、テーブルの上がラップトップでいっぱいになりスマートフォンなどの置き場に困ります。このスタンドでラップトップを持ち上げると下にスペースができるので、そこにスマートフォンくらいなら置いておくことができます。

f:id:kikiki-kiki:20181005141148j:plain また、2つに分かれているので、どんなサイズのラップトップでもタブレットスマートフォンでも使用することができます。
難点は2つに別れているが故に、いい感じにポジショニングしないとPCがグラついてしまうので慣れるまで位置調整が少し大変なこと。小さく丸いので落として失くしてしまうリスクがあることです。(新幹線の中で落として転がっていって失くしかけました...)

類似品がいっぱいあってどれがオリジナルなのかちょっと判断つかないのですが機能的にはどれも同じようなものだと思います

ケーブルやUSBメモリーなどの小物を収納できるケース

f:id:kikiki-kiki:20181005140939j:plain
f:id:kikiki-kiki:20181005140946j:plain

カバンの中に充電器やケーブル・イヤフォンなどを入れておくと、行方不明になったりコード同士が絡まったりでストレスでした。
ゴム留めできるケースがあることを知り使ってみるとケースから出す/しまうの手間はかかりますが、行方不明やコードが絡まるというストレスからは開放されました!

私の場合はPCの充電器などよく使うものはPCケースに入れ、USBメモリーやカードリーダー、有線LANに繋いでwifi飛ばせる装置、SIMケース、モバイルバッテリーなど必要になるかもといったお小物類をまとめてケースに入れておき、ケースを持っていけば一応必要なものはあるという状態にして使っています。
どちらかと言えば移動中というよりホテルやワーキングスペースとかで必要になるようなものを中心に収納しています。
「使ったらしまう」を徹底してないと慌ててケースを持ってきたは良いけど肝心なものが入ってない!という事にもなるので、「使ったらケースにしまう」を習慣化しておくことが大事です。

類似品もサイズ違いもいっぱいあるので、マウスも入れたいとか、どう使うかを考えてサイズを選べば良いと思います。

インナーバック

f:id:kikiki-kiki:20181005135625j:plain
f:id:kikiki-kiki:20181005135633j:plain

タブレット、本、ノート、筆記用具、名刺、パスケースなど外側にもポケットが付いているので定位置を決めておきバックパックやカバンに入れておけば、移動中でもサッと必要なものを取り出せるので便利!コクヨのものはA4サイズの技術書やPCケースを使わなければ13インチのMacBookProも一緒に入れれるくらい収納力がありとても良かったです。
先の小物ケースに入れるには大きかったり、特に移動中とかに使いたくなるような物を中心に入れて使っています。

PCケース

f:id:kikiki-kiki:20181005135141j:plain

安いケースですが、それなりにクッション性もありケースの外側の収納に電源ケーブル・マウス・USB-C用のハブ・先に紹介したPCスタンドが余裕で入ります。
ダブルチャックなのでバックパックに縦方向で入れておいてもチャックを開けてラップトップだけ取り出せるので、車内など狭い場所でもPC取り出しやすいので便利です。
落としたことがないので防御力がどの程度なのかは不明です。一応ちょっとした防滴にもなってるらしいですが、これも濡らしてみたことがないので性能面はわかりません。
難点としては持った時にチャックが下側になるのでチャックが破損時にPCが落下してしまいそうという不安は多少あります。

こんな感じで、本や充電周りなど移動中に取り出したりするものはインナーバックかPCケースに収納し、宿泊先や出先のワークスペースで必要になりそうな細々したものは小物ケースに収納しておいて、お出かけの時はこのケースたちをバックパックに詰め込んで出張にでかけるというスタイルをやっていました。
今の所あまりストレスはありませんが、強いて言うなれば家で使う時に片付けをちゃんとしてないと、家の中で大捜索になってしまうことくらいでしょうか。ズボラなので…

ちなみに泊りがけの時にいつも使ってるバックパックは「CHUMS Sinawava 25」モリモリ入るし、ウェストポーチが合体してたり、ミニバックとか拡張性が高いし水が入りにくい設計にもなっているので気に入っています。


JavaScript (ES2015) スプレッド演算子のメモ

スプレッド演算子(Spread Operator) ... で使用
for of で回せるArray-like(イテラブル?)なオブジェクトを個々の値で展開できる
※配列での仕様はES2015/ES6で標準になっているが、オブジェクトでの仕様はまだドラフト (ECMAScript® 2019 Language Specification)

applyを利用して配列を展開して関数に渡して居たような処理をスプレッド演算子でシンプルに書くことができます。

function sum(x, y, z) {
  return x + y + z
}
const numbers = [1, 2, 3]
console.log( sum(...numbers) ) // 6
console.log( sum.apply(null, numbers) ) // 6

関数の引数をスプレッド演算子すれば、関数に渡される引数(arguments)を配列として扱うことができます。(argumentsとは違い配列なのでそのままmap,reduceなどの配列操作をすることができる)

function sum(...values) {
  // valuesは配列
  return values.reduce((sum, val) => {
    return sum + val
  }, 0)
}
console.log( sum(1, 2, 3) ) // 6

配列

配列のコピー

[...Array]で元の配列をコピーした新しい配列を作成

const arg1 = [1, 2, 3]
// 配列のコピー
const arg2 = [...arg1] // [1, 2, 3]
// コピーなので元の配列とは別
console.log(arg1 === arg2) // false
arg2[0] = 0
console.log(arg1, arg2) // [1, 2, 3] [0, 2, 3]

// 要素を追加した新しい配列を作成
const arg3 = ['a', ...arg1, 'b'] // ['a', 1, 2, 3, 'b']

配列の結合

concat()で結合していたのが簡単に書ける

const arg1 = [0, 1, 2]
const arg2 = [3, 4, 5]
var arg3 = [...arg1, ...arg2] // [0, 1, 2, 3, 4, 5]
// ↓ と同等
arg3 = arg1.concat(arg2) // [0, 1, 2, 3, 4, 5]

配列に要素を追加するpush(), unshift()の引数としても使える

var arg1 = [1, 2, 3]
var arg2 = ['a', 'b', 'c']
arg1.push(...arg2) // [ 0, 1, 2, 'a', 'b', 'c' ]
var arg1 = [1, 2, 3]
var arg2 = ['a', 'b', 'c']
arr1.unshift(...arr2) // [ 'a', 'b', 'c', 0, 1, 2 ]

オブジェクト

オブジェクトのコピー

{...Object}で新しいオブジェクトを作成

const obj1 = {a: 1, b: 2}
// オブジェクトのコピー
const obj2 = {...obj1} // { a: 1, b: 2 }
console.log(obj2 === obj1) // false
obj2.a = 0
console.log(obj1, obj2) // { a: 1, b: 2 } { a: 0, b: 2 }

// 要素を追加した新しいオブジェクトを作成
const arg3 = {z: 0, ...obj1, c: 3} // { z: 0, a: 1, b: 2, c: 3 }

オブジェクトのマージ

配列と同じ様に{...obj, ...obj}でオブジェクトをマージすることができます。

const obj1 = {a: 1, b: 2}
const obj2 = {c: 3, d: 4}
const mergedObj = {...obj1, ...obj2} // { a: 1, b: 2, c: 3, d: 4 }

オブジェクトに同じキーがある場合、最後に追加された値が残ります。

obj = {
  name: 'Mika',
  name: 'Aki',
  name: 'Mikko'
}
console.log(obj) // { name: 'Mikko' }

同じキーが有るオブジェクトのマージ

const obj1 = {a: 1, b: 2}
const obj2 = {a: 3, c: 4}
const mergedObj = {a: 0, ...obj1, ...obj2, c: 5} // { a: 3, b: 2, c: 5 }

スプレッド演算子の注意点

オブジェクト中に配列は展開できるが、配列にオブジェクトは展開できない

オブジェクトを[...obj]と配列中にコピーしようとするとエラーになります

const obj = {a:1, b:2}
const arg = [1, ...obj, 2]
// TypeError: obj is not iterable

逆に配列を{...array}でオブジェクト中にコピーすると、配列のインデックスをキーとしてオブジェクトにコピーされます。

const arg = ['foo', 'bar']
const obj1 = {a: 1, ...arg, b: 2}
// { '0': 'foo', '1': 'bar', a: 1, b: 2 }

// 配列のインデックスと同じキーが存在している場合は、マージされる
const obj2 = {0: 'a', ...arg, 2: 'b'}
// { '0': 'foo', '1': 'bar', '2': 'b' }

浅いコピー(shallow copy)

スプレッド演算子...でコピーした配列・オブジェクトは浅いコピー(shallow copy)なので、ネストされている配列・オブジェクトでは注意が必要

配列
const arg = [1, [2, 3], 4]
var copy = [...arg]
copy[1][0] = 'a'
console.log(arg) // [ 1, [ 'a', 3 ], 4 ]
オブジェクト
const obj = {
  a: {
    b: 1
  },
  c: 2
}
var copy = {...obj}
copy.a.b = 0
copy.a.d = 3
console.log(obj) // { a: { b: 0, d: 3 }, c: 2 }

ネストされている配列・オブジェクトを操作するともとの配列に影響を及ぼしてしまう

null, undefined

iterableではないnull,undefinedをスプレッド演算子で扱おうとした場合、配列([...null], [...undefined])はエラーになるが、オブジェクト({...null}, {...undefined})だとエラーにならない

[...null] // TypeError: null is not iterable
[...undefined] // TypeError: undefined is not iterable

{...null} // {}
{...undefined} // {}

スプレッド演算子の活用

文字列を配列にする

文字列(String)はArray-likeなオブジェクトなので...strで1文字づつ配列にすることができる。

const str = 'こんにちわJavaScript🎌'
console.log([...str])
// ['こ','ん','に','ち','わ','J','a','v','a','S','c','r','i','p','t','🎌' ]
const reversed = [...str].reverse().join('') // 🎌tpircSavaJわちにんこ

絵文字のようなものも1文字として扱われるっぽい。

配列・オブジェクトの分割

分割代入(Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。
出典: 分割代入 - JavaScript | MDN

配列
var [a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7]
console.log(a, b, rest) // 1 2 [ 3, 4, 5, 6, 7 ]

スプレッド演算子は"残り"でしか指定できない

var [a, b, ...rest, c] = [1, 2, 3, 4, 5, 6, 7]
// => SyntaxError: Rest element must be last element
オブジェクト

オブジェクトの分割代入は変数名と同じキーの値が取得される

var {a, b} = {a:10, b:20, c:30}
console.log(a, b) // 10 20
var {c, d} = {foo:10, bar:20, baz:30}
console.log(c, d) // undefined undefined

スプレッド演算子で分割代入されたものはkey:valueを保持したオブジェクト形式になる

var {a, c, ...rest} = {a:1, b:2, c:3, d:4, e:5}
console.log(a, c, rest) // 1 3 { b: 2, d: 4, e: 5 }

↓みたいに関数の引数で...を使用しているのも分割代入なのかな?

function myFunc(x, y, ...other) { ... }

配列の重複を削除

一意な値を格納できるSetを利用すると配列から重複したデータを取り除いた配列を作成することができます。

const data = [0, 1, 2, 3.1, true, false, 1, "2", "", 3.1, null, undefined, NaN, false, NaN]
const dist = [...new Set(data)]
// [ 0, 1, 2, 3.1, true, false, '2', '', null, undefined, NaN ]

new Set()がSetオブジェクトを返したのを[]で配列化しているという認識で良いのでしょうか?

オブジェクトの初期値

{...null}, {...undefined}{}になることを利用するとオブジェクトのデフォルトオプションをつくったりできる

const createObj = (options) => {
  return {name: 'アシリパ', ...options}
}
obj1 = createObj() // {name: 'アシリパ'}
obj2 = createObj({name: '不死身の杉元'}) // {name: '不死身の杉元'}

ハックっぽいので見通しが良いかどうかは、ちょっと考えどころかもしれない

イテレーターがちゃんと理解できてないのでイテラブルとArray-likeの違いとかがイマイチまだあやふやなままです...


[参考]