[...Array(10).keys()].map(i => ++i) ??

### 環境

node -v
v9.10.0

※ バージョンによって挙動が違うようです。ご注意下さい。
コメント欄にて教えていただきました！

※ TypeScriptの場合は[こちら](https://qiita.com/kajirikajiri/items/aff91ccfe3dc135ab7bd#typescript%E3%81%A7%E3%82%84%E3%82%8A%E3%81%9F%E3%81%84%E3%82%93%E3%81%A0%E3%82%88%E3%81%AD)

## やったこと

```javascript

> [...Array(10).keys()].map(i => ++i)
[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
```

処理結果はわかったけど、処理内容がわからない。

```javascript
> Array(10)
[ <10 empty items> ]
```


10 empty items
???

https://ginpen.com/2018/12/22/empty-slots/
> 配列の中身が undefined すら入っていない「空き枠」の状態

なるほど。

こんな感じか

```
[ , , , , , , , , ]
```

試しに要素の数をだす

```javascript
> Array(10).length
10
```

ウンウン。空き枠はある

次

```javascript

> Array(10).keys()
{}
```

...ふむ

公式より
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

```javascript

// 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から順にってことか。
内部的にキーがあるんだろうか

```javascript

> Array(10).keys()
{}
```

これだと、、、なんで出力されないのかな？？？
わからん
さっきの結果からするにarrayの「空き枠」はある。

空き枠じゃ無理なのか
undefinedならいける？

```javascript

> [...Array(10)]
[ undefined,
  undefined,
  undefined,
  undefined,
  undefined,
  undefined,
  undefined,
  undefined,
  undefined,
  undefined ]
> [...Array(10)].keys()
{}
```

無理でした

なんだこれは。。。。。。

https://appdividend.com/2018/12/27/javascript-object-keys-example-object-keys-tutorial/

```javascript

> let obj = {
...     name: 'Krunal',
...     education: 'IT Engineer'
... } ;
undefined
> console.log(Object.keys(obj));
[ 'name', 'education' ]
undefined
```

こんな感じで使うみたいです。

```javascript

> 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' ]
>
```

できたできた

次


```javascript

> [...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から順に展開

```javascript

> [...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だと中身を取り出して使う。そして、配列を出力って感じか

```javascript

> [...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)
`

とりあえず解決するには以下です。

```typescript
[...Array.from(Array(10).keys())].map(a => console.log(a))
```

もしくは

```typescript
[...(Array(10).keys() as any)].map(a => console.log(a))
```