環境
node -v
v9.10.0
※ バージョンによって挙動が違うようです。ご注意下さい。
コメント欄にて教えていただきました！
※ TypeScriptの場合はこちら
やったこと
> [...Array(10).keys()].map(i => ++i)
[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
処理結果はわかったけど、処理内容がわからない。
> Array(10)
[ <10 empty items> ]
10 empty items
???
配列の中身が undefined すら入っていない「空き枠」の状態
なるほど。
こんな感じか
[ , , , , , , , , ]
試しに要素の数をだす
> Array(10).length
10
ウンウン。空き枠はある
次
> Array(10).keys()
{}
...ふむ
公式より
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']
なるほど、objectのキーがあればキーを出力する。キーが指定されてなかったら0から順にってことか。
内部的にキーがあるんだろうか
> Array(10).keys()
{}
これだと、、、なんで出力されないのかな？？？
わからん
さっきの結果からするにarrayの「空き枠」はある。
空き枠じゃ無理なのか
undefinedならいける？
> [...Array(10)]
[ undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined ]
> [...Array(10)].keys()
{}
無理でした
なんだこれは。。。。。。
> let obj = {
... name: 'Krunal',
... education: 'IT Engineer'
... } ;
undefined
> console.log(Object.keys(obj));
[ 'name', 'education' ]
undefined
こんな感じで使うみたいです。
> const a = [...Array(10)]
undefined
> a
[ undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined ]
> Object.keys(a)
[ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' ]
> Object.keys([...Array(10)])
[ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' ]
>
できたできた
次
> [...Array(10)]
[ undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined ]
> [...Array(10).keys()]
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
これはスプレッド演算子
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax
スプレッド構文を使うと、関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。
今回はArrayリテラルだから、要素として展開
...Array(10)で展開されるundefinedにキーが指定されてないから、0から順に展開
> [...Array(10).keys()].map(i => ++i)
[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
さっきの結果から、中身を１個ずつ取り出して、++iで＋１して順番に出力
https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
foreach vs map
foreachだと中身を取り出して使う。
mapだと中身を取り出して使う。そして、配列を出力って感じか
> [...Array(10).keys()].forEach(i => ++i)
undefined
> [...Array(10).keys()].forEach(i => console.log(i))
0
1
2
3
4
5
6
7
8
9
undefined
TypeScriptでやりたいんだよね
適当に配列作りたいなと思って、ググったら自分の記事がヒットしたわけですが、上記方法ではTypeScriptでエラーが出ます。
Type 'IterableIterator<number>' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.ts(2569)
とりあえず解決するには以下です。
[...Array.from(Array(10).keys())].map(a => console.log(a))
もしくは
[...(Array(10).keys() as any)].map(a => console.log(a))