スプレッド構文
できることが多すぎて整理しきれない
例文と出力結果を見て「まあ、そうなりそう…くらい」程度しかピンときていない
const [a, b] = smalls;はピンとこないけど、const [a, b, ...other] = smallsはそうなりそうっていう挙動をする
配列の要素をまとめて取り出せる
まず例のこれがピンとこない
code:js
// smallsの0番目をa、1番目をbに
const a, b = smalls; // 分割代入 console.log(a); // "小動物"
console.log(b); // "小宇宙"
なんで[b] = smallsで0番目の要素が格納されるんだろう
code:js
// これはわかる
const a = smalls; // 普通の代入
const b = smalls; // 分割代入 console.log(b); // "小動物"
カンマより後の引数を取得できる
Goの使わない変数を_で捨てていくみたいな感じなんだろうか?
code:js
const ...other = smalls; // 分割代入、スプリット
const , ...other_2 = smalls; // 分割代入、スプリット
// 変数名を指定してあげれば格納される
console.log(z); // "小動物"
console.log(zz); // "小宇宙"
console.log(zzz); // "小料理"
console.log(other_3); // "小旅行"
これもなんでこうなるのかわからんかった…
readText(テキストファイルなどからの読み込みを想定)をpage.textと合体させたい
code:js
const readText = 'この文を\n引用文として\n挿入したい';
const page = {
title: 'タイトル用文字列',
text: [
'タイトル用文字列',
'',
'ここから引用',
readText.split('\n').map(t => >${t}),
'',
'#memo',
]
}
console.log(page);
が、上記の例だと
code:ㅤ
text: Array(6)
0: "タイトル用文字列"
1: ""
2: "ここから引用"
3: Array(3)
0: ">この文を"
1: ">引用文として"
2: ">挿入したい"
4: ""
5: "#memo"
title: "タイトル用文字列"
こうなっちゃう
別の箇所で組み上げてもいいけど、何とか初期化する時にまとめてできないか考えてみたい
こう書くとできる
code:js
const readText = 'この文を\n引用文として\n挿入したい';
const page = {
title: 'タイトル用文字列',
text: [
'タイトル用文字列',
'',
'ここから引用',
...readText.split('\n').map(t => >${t}), // readTextの前に'...'を付加している
'',
'#memo',
]
}
console.log(page);
こうするとやりたい事ができる
code:ㅤ
text: Array(8)
0: "タイトル用文字列"
1: ""
2: "ここから引用"
3: ">この文を"
4: ">引用文として"
5: ">挿入したい"
6: ""
7: "#memo"
title: "タイトル用文字列"
ドキュメントには既存の関数(concatなど)を使う例とともにスプレッド構文を使った場合の解説がある
ピリオド3つになると途端に読めなくなる
なんでだろう?
スプレッド構文が何者なのかわかっていないから?
配列式や文字列などの反復可能オブジェクト
これらを展開するのがスプレッド構文
0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開
0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開
参考