【JS】【TS】配列・リスト操作 ～ スプレッド構文 / Three-dots ～

■ はじめに

https://dk521123.hatenablog.com/entry/2021/02/10/225119
https://dk521123.hatenablog.com/entry/2021/02/24/222452

の続き。

　TypeScript のレビュー会で
「...」（ドット３つ）の書き方を見かけたので、メモ。

これを知ってたら、実装する時に concat() 使わなかったな...

目次

【１】「...」について
【２】サンプル
　例１：Math.min() の引数に利用
　例２：concat の代わりに使う

【１】「...」について

* スプレッド構文(Spread syntax) 通称 Three-dots
 => 配列を展開してくれる

公式ドキュメント
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

【２】サンプル

例１：Math.min() の引数に利用

var targetList = [3, 8, 2];
var min = Math.min(...targetList);

// 2
console.log(min);

例２：concat の代わりに使う

const list1 = ['hello', 'hi'];
const list2= ['world', '!!!'];
const margedList = [...list1, ...list2]; 

// [ 'hello', 'hi', 'world', '!!!' ]
console.log(margedList);

参考文献

https://qiita.com/girlie_mac/items/600b4fbce1374ed8fbcc
https://qiita.com/akisx/items/682a4283c13fe336c547

関連記事

TypeScript ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/21/180904
ループ操作 ～ map etc ～
https://dk521123.hatenablog.com/entry/2021/01/03/000000
配列・リスト操作
https://dk521123.hatenablog.com/entry/2021/02/10/225119
配列・リスト操作 ～ ソート編 ～
https://dk521123.hatenablog.com/entry/2021/02/24/222452