稀にオブジェクトで用意した何かを配列に変換したいことがあります。多くの場合で最初から配列として用意しておいた方が効率的ですが、それができない場合もあります。そういった時に使える配列への変換方法を紹介します。
配列への変換方法には Array.from と Object.values の二種類が便利です。それぞれ元の添え字の場所に要素を置くか、要素を詰めるかで使い分けます。
Array.from() – JavaScript ｜ MDN
Object.values() – JavaScript ｜ MDN
Array.from
Array.from を使う変換方法の紹介です。これは配列っぽい構造のオブジェクトを配列に変換する際に特に便利です。これはインデックスに基づいて配列を生成する方法です。使用例は次です。
// 変換対象のオブジェクトです。
// 元々 0 から始まるインデックスを持つオブジェクトです。
const arrLikeObj = {
0: 'a',
1: 'b',
2: 'c',
};
// Array.from で配列に変換するために length プロパティを追加します。
arrLikeObj.length = Object.keys(arrLikeObj).length;
// Array.from で配列に変換します。
const arr = Array.from(arrLikeObj);
console.log(arr); // ['a', 'b', 'c']
適切な添え字を持つオブジェクトに配列長になる長さをプロパティで持たせて Array.from に渡します。こうするとオブジェクトが配列に変換されます。
ちなみにインデックスが飛び飛びの場合は次の様になります。
// 1, 3 のみが存在する飛び飛びのインデックスを持つオブジェクトです
const arrLikeObj = {
1: 'b',
3: 'd',
};
// length の長さをオブジェクトの大きさと関係なしに指定します
arrLikeObj.length = 5;
// Array.from で配列に変換します。
const arr = Array.from(arrLikeObj);
console.log(arr); // [undefined, 'b', undefined, 'd', undefined]
0は未定義、2は未定義、…の様に length の大きさの配列を作る際、値が未定義のインデックスにはしっかり undefined を入れてくれます。
Array.fromの注意点として、オブジェクトが持つプロパティが数字の添字だけでない場合、それらのプロパティは無視されるという点があります。
// 数値以外の添え字を持つオブジェクトです
const arrLikeObj = {
1: 'b',
3: 'd',
x: 'x',
};
arrLikeObj.length = 5;
// Array.from で配列に変換します。
const arr = Array.from(arrLikeObj);
// xが消えます
console.log(arr); // [undefined, 'b', undefined, 'd', undefined]
Object.values
Object.valuesの紹介です。これは列挙可能なプロパティの値を配列にします。使用例は次です。
// 1, 3 , xが存在する飛び飛びのインデックスと数値以外のインデックスを持つオブジェクトです
const arrLikeObj = {
1: 'b',
3: 'd',
x: 'x',
};
// Object.valuesで列挙可能なプロパティの値を配列にします。
const arr = Object.values(arrLikeObj);
// 1,3のインデックスを元々持っていましたが、0,1に詰められます
// Array.fromでは消える x がそのままになります。
console.log(arr); // ['b', 'd', 'x']
Array.fromと違ってインデックスが詰められます。また数値以外のインデックスの値も残ります。一見プロパティ名をまったく気にしていない様に見えますが、数値についてはソートしてくれます。このため数値をプロパティ名に持つオブジェクトについては Array.from と同じような感覚で使えます。
// インデックスの順番を数値降順にし、間にxを挟んでいます。
const arrLikeObj = {
3: 'd',
x: 'x',
1: 'b',
};
// Object.valuesで列挙可能なプロパティの値を配列にします。
const arr = Object.values(arrLikeObj);
// 1, 3 という数値の昇順が優先して前に置かれ、残ったxが最後に来ます
console.log(arr); // ['b', 'd', 'x']
まとめ
- Array.from():
- インデックスに基づいてオブジェクトを配列に変換します。
- 数値以外の添字は無視されます。
- lengthプロパティを設定することで、希望する配列の長さを指定できます。
- 数値インデックスが飛び飛びの場合、未定義のインデックスにはundefinedが入ります。
- Object.values():
- オブジェクトのすべての列挙可能なプロパティの値を配列に変換します。
- インデックスは詰められ、順序は数値の昇順、そして数値以外の添字が後ろに追加されます。
これらのメソッドの使用例と特性を知っておくことで、日常の開発業務で直面するさまざまなシチュエーションに対応できるようになります。最後に、どちらのメソッドもオブジェクトの変換に関しては非常に強力ですが、変換する前のオブジェクトの構造や目的をしっかりと理解してから適切な方法を選ぶことが必要です。開発において、このような基本的な操作を理解していることは、効率的なコードの作成やデバッグ作業を容易にします。これらのメソッドを駆使して、JavaScriptのコーディングをより快適に楽しみましょう。
