はじめに
JavaScriptでオブジェクトと配列を簡単に変換する方法が身につくように、この記事では初心者向けにわかりやすく解説していきます。
まずは、オブジェクトと配列についての基本知識から学んでいきましょう。
【JavaScriptのオブジェクトと配列】
○オブジェクトとは
JavaScriptのオブジェクトは、キーと値のペアを格納するデータ構造です。
キーは一意であり、それに対応する値を参照するために使用されます。オブジェクトは、下記のようなオブジェクトリテラル表記を使用して作成されます。
const obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3'
};○配列とは
配列は、値のリストを順番に格納するデータ構造です。
配列の各要素にはインデックスが付与され、インデックスを使って要素にアクセスできます。
配列は、下記のような配列リテラル表記を使用して作成されます。
const arr = ['value1', 'value2', 'value3'];【オブジェクトから配列への変換方法】
オブジェクトから配列へ変換する方法はいくつかあります。
ここでは、3つの方法を紹介します。
○方法1: Object.keys()
Object.keys()メソッドを使うと、オブジェクトのすべてのキーを配列として取得できます。
const obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3'
};
const keys = Object.keys(obj);
console.log(keys); // ['key1', 'key2', 'key3']○方法2: Object.values()
Object.values()メソッドを使うと、オブジェクトのすべての値を配列として取得できます。
const obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3'
};
const values = Object.values(obj);
console.log(values); // ['value1', 'value2', 'value3']○方法3: Object.entries()
Object.entries()メソッドを使うと、オブジェクトのキーと値のペアを配列として取得できます。
const obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3'
};
const entries = Object.entries(obj);
console.log(entries); // [['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3']]【配列からオブジェクトへの変換方法】
配列からオブジェクトへ変換する方法もいくつかあります。
ここでは、2つの方法を紹介します。
○方法4: 配列のreduce()メソッド
配列のreduce()メソッドを使って、配列からオブジェクトへ変換できます。
下記のサンプルコードでは、キーと値が交互に格納された配列からオブジェクトを作成しています。
const arr = ['key1', 'value1', 'key2', 'value2', 'key3', 'value3'];
const obj = arr.reduce((accumulator, currentValue, index) => {
if (index % 2 === 0) {
accumulator[currentValue] = arr[index + 1];
}
return accumulator;
}, {});
console.log(obj); // {key1: 'value1', key2: 'value2', key3: 'value3'}○方法5: forループとオブジェクトリテラル
forループとオブジェクトリテラルを使って、配列からオブジェクトへ変換できます。
下記のサンプルコードでは、キーと値のペアが格納された配列からオブジェクトを作成しています。
const arr = [['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3']];
const obj = {};
for (const [key, value] of arr) {
obj[key] = value;
}
console.log(obj); // {key1: 'value1', key2: 'value2', key3: 'value3'}【サンプルコードと解説】
それぞれの変換方法に対応するサンプルコードを、下記に詳しく解説しています。
○サンプルコード1: Object.keys()を使ったオブジェクトから配列への変換
このサンプルコードでは、オブジェクトのキーを取得して配列に変換しています。
const obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3'
};
const keys = Object.keys(obj);
console.log(keys); // ['key1', 'key2', 'key3']○サンプルコード2: Object.values()を使ったオブジェクトから配列への変換
このサンプルコードでは、オブジェクトの値を取得して配列に変換しています。
const obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3'
};
const values = Object.values(obj);
console.log(values); // ['value1', 'value2', 'value3']○サンプルコード3: Object.entries()を使ったオブジェクトから配列への変換
このサンプルコードでは、オブジェクトのキーと値のペアを取得して配列に変換しています。
const obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3'
};
const entries = Object.entries(obj);
console.log(entries); // [['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3']]○サンプルコード4: 配列のreduce()メソッドを使った配列からオブジェクトへの変換
このサンプルコードでは、キーと値が交互に格納された配列からオブジェクトを作成しています。
const arr = ['key1', 'value1', 'key2', 'value2', 'key3', 'value3'];
const obj = arr.reduce((accumulator, currentValue, index) => {
if (index % 2 === 0) {
accumulator[currentValue] = arr[index + 1];
}
return accumulator;
}, {});
console.log(obj); // {key1: 'value1', key2: 'value2', key3: 'value3'}○サンプルコード5: forループとオブジェクトリテラルを使った配列からオブジェクトへの変換
このサンプルコードでは、キーと値のペアが格納された配列からオブジェクトを作成しています。
const arr = [['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3']];
const obj = {};
for (const [key, value] of arr) {
obj[key] = value;
}
console.log(obj); // {key1: 'value1', key2: 'value2', key3: 'value3'}【変換時の注意点】
オブジェクトと配列の変換にはいくつか注意すべき点があります。
- オブジェクトのキーは文字列ですが、配列のインデックスは数値です。
そのため、配列からオブジェクトへ変換する際に、インデックスをキーとして使用すると、文字列に変換されます。 - オブジェクトのキーは一意である必要がありますが、配列には同じ値が複数存在することがあります。
そのため、配列からオブジェクトへ変換する際に、同じキーが複数存在すると、最後に登場したキーの値が優先されます。 - オブジェクトは順序を保持しないため、変換後の配列やオブジェクトの順序が元のデータと異なることがあります。
まとめ
この記事では、JavaScriptでオブジェクトと配列を相互に変換する方法を、5つのサンプルコードと注意点を交えて紹介しました。
オブジェクトと配列の変換は、データの構造を柔軟に扱うために重要なスキルです。
この記事を参考に、JavaScriptでのオブジェクトと配列の変換に自信を持って取り組んでください。
