JavaScriptのオブジェクトと配列
JavaScriptの世界では、データを扱う際によくオブジェクトと配列が使われます。
オブジェクトと配列の間でデータを変換する必要がある場合ももちろんたくさんあります。
例えば、オブジェクトのプロパティを配列として扱いたい、またはその逆で配列の要素をオブジェクトの値にしたいなどです。
この記事では、JavaScript配列の各要素をオブジェクトのプロパティに変換する方法を、具体的なコード例を交えて詳しく解説します。
基本的な変換方法から、reduceメソッド、Mapオブジェクトを使った高度なテクニックまで、幅広くカバーします。
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
オブジェクトのプロパティを配列に変換
オブジェクトのプロパティを配列に変換することは、JavaScriptでは簡単に行うことができます。ここでは、Object.keysメソッドとObject.valuesメソッドを使って、オブジェクトのキーと値を配列に変換する方法を見てみましょう。
ソースコード例
|
1 2 3 4 5 6 7 |
let obj = { name: 'Alice', age: 20, country: 'Japan' }; let keys = Object.keys(obj); console.log(keys); let values = Object.values(obj); console.log(values); |
このソースコードでは、Object.keysメソッドとObject.valuesメソッドを使用して、オブジェクトのキーと値をそれぞれ配列に変換しています。
出力結果
[ 'name', 'age', 'country' ]
[ 'Alice', 20, 'Japan' ]
配列をオブジェクトに変換する方法
配列の各要素をオブジェクトのキーと値にマッピングする最も基本的な方法から見ていきましょう。
ここでは、配列内の各要素がキーと値のペアを表すと仮定します。
ソースコード例
|
1 2 3 4 5 6 7 8 |
let array = [['name', 'Taro'], ['age', 30], ['country', 'Japan']]; let obj = {}; array.forEach(item => { obj[item[0]] = item[1]; }); console.log(obj); |
出力結果
{name: 'Taro', age: 30, country: 'Japan'}
reduceメソッドを使用した変換
reduceメソッドを使用すると、配列の各要素を累積して一つのオブジェクトに変換することができます。
これはより関数型のアプローチで、コードを簡潔に保ちながら変換を行う方法です。
ソースコード例
|
1 2 3 4 5 6 7 |
let array = [['name', 'Taro'], ['age', 30], ['country', 'Japan']]; let result = array.reduce((acc, cur) => { acc[cur[0]] = cur[1]; return acc; }, {}); console.log(result); |
出力結果
{name: 'Taro', age: 30, country: 'Japan'}
reduceメソッドは、配列をオブジェクトに変換するときに非常に強力だね。
キーと値の配列からオブジェクトを作成する
場合によっては、キーと値が別々の配列に格納されていることがあります。
これらの配列からオブジェクトを作成する方法を見ていきましょう。
ソースコード例
|
1 2 3 4 5 6 7 8 9 |
let keys = ['name', 'age', 'country']; let values = ['Taro', 30, 'Japan']; let combinedObj = keys.reduce((obj, key, index) => { obj[key] = values[index]; return obj; }, {}); console.log(combinedObj); |
出力結果
{name: 'Taro', age: 30, country: 'Japan'}
Mapオブジェクトを利用した変換
Mapオブジェクトは、キーと値のペアを保存するためのコレクションです。
配列からMapオブジェクトを作成し、それをオブジェクトに変換する方法を紹介します。
ソースコード例
|
1 2 3 4 |
let map = new Map([['name', 'Taro'], ['age', 30], ['country', 'Japan']]); let fromMap = Object.fromEntries(map); console.log(fromMap); |
出力結果
{name: 'Taro', age: 30, country: 'Japan'}
Mapオブジェクトを使うと、より柔軟にデータを扱えるね。そして、Object.fromEntries()で簡単にオブジェクトに変換できる！オブジェクトの配列から単一のオブジェクトへの変換
時には、オブジェクトの配列を単一のオブジェクトにマージしたい場合があります。
各オブジェクトが一意のキーを持つと仮定すると、これらを一つのオブジェクトに統合する方法を見てみましょう。
ソースコード例
|
1 2 3 4 5 6 7 |
let arrayOfObjects = [{id: 1, name: 'Taro'}, {id: 2, name: 'Hanako'}, {id: 3, name: 'Jiro'}]; let mergedObject = arrayOfObjects.reduce((acc, cur) => { acc[cur.id] = cur.name; return acc; }, {}); console.log(mergedObject); |
出力結果
{1: 'Taro', 2: 'Hanako', 3: 'Jiro'}
動的プロパティ名を持つオブジェクトの変換
JavaScriptでは、オブジェクトのキーとして変数を使用することができます。
配列から取得した値を動的なプロパティ名としてオブジェクトに設定する方法を見てみましょう。
ソースコード例
|
1 2 3 4 5 6 7 8 9 |
let keys = ['id', 'name', 'age']; let values = [1, 'Taro', 30]; let dynamicObject = keys.reduce((obj, key, index) => { obj[key] = values[index]; return obj; }, {}); console.log(dynamicObject); |
出力結果
{id: 1, name: 'Taro', age: 30}
複雑な構造の配列からオブジェクトへの変換
配列内に複雑な構造（例えばオブジェクトの配列や配列の配列）が含まれる場合、そのデータを適切にオブジェクトに変換するには少し工夫が必要です。
ここでは、配列の配列をオブジェクトに変換する高度な例を見てみましょう。
ソースコード例
|
1 2 3 4 5 6 7 |
let complexArray = [['id', 1], ['name', 'Taro'], ['skills', ['JavaScript', 'React']]]; let complexObject = complexArray.reduce((obj, [key, value]) => { obj[key] = value; return obj; }, {}); console.log(complexObject); |
出力結果
{id: 1, name: 'Taro', skills: ['JavaScript', 'React']}
-
-
配列の他の使い方はコチラ【JavaScript】配列の使い方を徹底解説！！値の追加、修正、削除、ループ処理、mapメソッド、filterメソッド
はじめに JavaScriptは、ウェブ開発において不可欠な言語です。 特に配列の操作は、日々の開発作業で頻繁に遭遇するため、その方法を習得することは極めて重要です。 この記事では、JavaScrip ...
続きを見る
-
-
連想配列をもっと知りたい方はコチラ【JavaScript】オブジェクト（連想配列）の初期化、検索、宣言、ループなど徹底解説！
はじめに JavaScriptにおける連想配列について知りたいですか？それなら、あなたは正しい場所に来ました。 この記事では、JavaScriptの連想配列の基本から、より高度なテクニックまで、一緒に ...
続きを見る
まとめ
JavaScriptで配列からオブジェクトへの変換は、データを扱う上で非常に一般的で便利な操作です。
この記事では、基本的な変換方法からreduceメソッドやMapオブジェクトを使った高度なテクニックまで、様々なパターンを詳しく解説しました。
これらの方法をマスターすることで、複雑なデータ構造も自在に扱えるようになり、JavaScriptでのプログラミングがより柔軟で効率的になるでしょう。
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
