Array.from()メソッドとは
Array.from()メソッドは反復可能オブジェクトや配列風オブジェクトからシャローコピーされた、新しいArrayインスタンスを生成します。
色々な使われ方をしますが、配列風オブジェクトの変換以外の用途で使用するとコードが冗長になるケースが多いので注意が必要です。
文字列の分割
Array.from()は文字列を入れると配列にして1文字ずつ値を入れますが、このような処理はsplit()メソッドが昔からよく使用されていたので、split()を使ったほうが良いです。
console.log(Array.from('foo'))
// [ 'f', 'o', 'o' ]
console.log('foo'.split(''))
// [ 'f', 'o', 'o' ]
反復処理による計算
Array.from()は反復処理による計算をして配列に値を返せますが、同じことがmap()メソッドでも可能で昔からよく使用されていたので、map()を使ったほうが良いです。
console.log(Array.from([1, 2, 3], (x) => x + x))
// [ 2, 4, 6 ]
console.log([1, 2, 3].map((x) => x + x))
// [ 2, 4, 6 ]
配列のコピー
配列は代入で複製すると元の配列の値を参照してしまいます。
const arr = [1, 2, 3]
const arr2 = arr
arr.push(4)
console.log(arr2)
// [1, 2, 3, 4]
Array.from()はシャローコピーされた、新しいArrayインスタンスを生成するので、以下のように書けば元の配列が参照されなくなります。
const arr = [1, 2, 3]
const arr2 = Array.from(arr)
arr.push(4)
console.log(arr2)
// [1, 2, 3]
しかし、この処理はスプレッド構文でも可能なので、以下のような配列の複製の場合はArray.from()を使用する必要がないです。
const arr = [1, 2, 3]
const arr2 = [...arr]
arr.push(4)
console.log(arr2)
// [1, 2, 3]
配列を特定の文字で埋める
Array.from()はlengthプロパティを使用すれば、配列内のすべてに特定の値を入れることができます。
const arr = Array.from({ length: 4 }, () => 0)
console.log(arr)
// [ 0, 0, 0, 0 ]
しかし、JavaScriptにはfill()というすべての要素を静的な値に変更できるメソッドがあるので、値がすべて同じ場合はArray.from()を使用する必要がないです。
const arr = new Array(4).fill(0)
console.log(arr)
// [ 0, 0, 0, 0 ]
配列に入れる各要素の値をランダムなどの処理で返す場合はfill()ではできないので、このような処理の場合はArray.from()のほうが適しています。
const arr = new Array(4).fill(Math.floor(Math.random() * 6) + 1)
const arr2 = Array.from({ length: 4 }, () => Math.floor(Math.random() * 6) + 1)
console.log(arr)
// [ 2, 2, 2, 2 ]
console.log(arr2)
// [ 5, 1, 6, 3 ]
配列風オブジェクトを配列にする
Array.from()の実質的な用途は配列風オブジェクトを配列にすることです。
const obj = { length: 2, 0: 'foo', 1: 'bar' }
const arr = Array.from(obj)
console.log(arr)
// [ 'foo', 'bar' ]
配列風オブジェクトだとObject.values()を使用するとlengthの値も配列に入れてしまいます。
const obj = { length: 2, 0: 'foo', 1: 'bar' }
const arr = Object.values(obj)
console.log(arr)
// [ 'foo', 'bar' , 2]
しかし、JavaScriptで配列風オブジェクトが使用されることは少ないので、Array.from()が活躍する機会はめったにないでしょう。
SetやMapを配列に変換可能
Array.from()はSetやMapのデータを配列に変換できます。
ただし、JavaScriptでSetやMapが使用されるケースは少ないので、利用する機会は少ないです。
※ そもそもSetやMapで作ったデータを配列に変換しなくてはいけないケースがあまりない。
const mySet = new Set()
mySet.add('foo')
mySet.add('bar')
const arr = Array.from(mySet)
console.log(arr)
// [ 'foo', 'bar' ]
const myMap = new Map()
myMap.set('foo', 1)
myMap.set('bar', 2)
myMap.set('baz', 3)
const arr = Array.from(myMap)
console.log(arr)
// [ [ 'foo', 1 ], [ 'bar', 2 ], [ 'baz', 3 ] ]
