配列を作る — Array.from() / Array.of() / new Array()

Array.from() — 何からでも配列にする

console.log(Array.from('あい'));
console.log(Array.from(new Set([1, 1, 2])));
console.log(Array.from([1, 2], (n) => n * 10));

console.log(Array.from({ length: 3 }));
console.log(Array.from({ length: 3 }, (unused, i) => i * 2));
console.log(Array.from({ a: 1 }));

第2引数に関数を渡すと、その場で加工できます。 Array.from(x).map(f) と同じですが、中間の配列を作りません。

対象は反復可能なもの、または length を持つものです。 → 反復可能とイテレータ

const holed = new Array(3);

console.log(holed);
console.log(holed.length);
console.log(holed.map((value, i) => i));

console.log(Array.from({ length: 3 }));
console.log(Array.from({ length: 3 }).map((value, i) => i));

length が無いものは黙って空配列になります。エラーにはなりません。

new Array(3) は「穴」を作る

ここが最大の落とし穴です。

console.log(new Array(3).fill(0).map((value, i) => i));

console.log(new Array(3));
console.log(new Array(1, 2, 3));

length は3なのに、map() が1度も呼ばれません。

undefined が3つ入っているのではなく、要素が存在しない状態です。 map() / forEach() / filter() は、この穴を飛ばします。

Array.from() なら、ちゃんと undefined が入ります。

console.log(Array.of(3));
console.log(Array.of(1, 2, 3));

try {
  new Array(-1);
} catch (error) {
  console.log(error.name + ': ' + error.message);
}

fill() で埋めても直ります。

const grid = new Array(2).fill([]);

grid[0].push('x');

console.log(JSON.stringify(grid));

const grid = Array.from({ length: 2 }, () => []);

grid[0].push('x');

console.log(JSON.stringify(grid));

引数が1つか2つかで意味が変わる

console.log(Array.from({ length: 5 }, (unused, i) => i));
console.log(Array.from({ length: 5 }, (unused, i) => i + 1));
console.log(Array.from({ length: 3 }, (unused, i) => i * 10));

console.log([...'あい']);
console.log([...new Set([1, 1, 2])]);

数値を1つ渡したときだけ「長さ」の意味になります。 これを避けるために Array.of() があります。

try {
  console.log([...{ length: 3 }]);
} catch (error) {
  console.log(error.name + ': ' + error.message);
}

Array.of() は必ず要素として扱います。

長さに使えない値を渡すと落ちます。

→ RangeError: Invalid array length

fill() で同じものを共有してしまう

片方に足したのに、両方に入りました。 fill() は同じ1つのものを全部に置くからです。

毎回作りたいなら Array.from() の第2引数です。

オブジェクトや配列を fill() に渡さないでください。 数値や文字列なら問題ありません。

連番を作る

これがいちばん短い書き方です。 for で push() しても同じですが、行数が増えます。

スプレッドとの使い分け

反復可能なものなら、[...x] のほうが短く書けます。

{ length: 3 } のような形は反復可能ではないので、 スプレッドでは開けません。

→ スプレッド構文と残余

まとめ

• Array.from() は反復可能なものと length を持つものから作る。第2引数で加工できる
• new Array(3) が作るのは穴。 map() も forEach() も飛ばす
• 数値1つを渡したときだけ「長さ」になる。避けたいなら Array.of()
• fill() にオブジェクトや配列を渡すと、全部が同じものを指す
• 連番は Array.from({ length: n }, (unused, i) => i)
• 反復可能なだけなら [...x] が短い