迷ったらコレ！JSオブジェクトを配列に変換するベストプラクティス
2024-04-02
jQuery を使用して JS オブジェクトを配列に変換する方法
概要
方法
$.makeArray() を使用する
jQuery の $.makeArray() メソッドは、オブジェクトを配列に変換します。
const obj = {
name: "John Doe",
age: 30,
city: "Tokyo"
};
const arr = $.makeArray(obj);
console.log(arr); // ["John Doe", 30, "Tokyo"]
$.each() と Array.prototype.push() を使用する
jQuery の $.each() メソッドを使用してオブジェクトの各プロパティをループ処理し、Array.prototype.push() メソッドを使用して各プロパティを配列に追加することもできます。
const obj = {
name: "John Doe",
age: 30,
city: "Tokyo"
};
const arr = [];
$.each(obj, function(key, value) {
arr.push(value);
});
console.log(arr); // ["John Doe", 30, "Tokyo"]
Object.entries() と Array.from() を使用する
JavaScript の Object.entries() メソッドは、オブジェクトのキーと値のペアの配列を返します。Array.from() メソッドを使用して、この配列を新しい配列に変換することができます。
const obj = {
name: "John Doe",
age: 30,
city: "Tokyo"
};
const arr = Array.from(Object.entries(obj), ([key, value]) => value);
console.log(arr); // ["John Doe", 30, "Tokyo"]
jQuery を使用すると、JS オブジェクトを配列に変換するコードを簡潔に記述することができます。上記の方法を参考に、状況に合わせて適切な方法を選択してください。
補足
- オブジェクトのキーと値の順序を保持したい場合は、
$.each()とArray.prototype.push()の方法を使用する必要があります。 - オブジェクトのキーは不要で、値のみを配列に変換したい場合は、
Object.entries()とArray.from()の方法を使用すると効率的です。
$.makeArray() を使用する
const obj = {
name: "John Doe",
age: 30,
city: "Tokyo"
};
const arr = $.makeArray(obj);
console.log(arr); // ["John Doe", 30, "Tokyo"]
$.each() と Array.prototype.push() を使用する
const obj = {
name: "John Doe",
age: 30,
city: "Tokyo"
};
const arr = [];
$.each(obj, function(key, value) {
arr.push(value);
});
console.log(arr); // ["John Doe", 30, "Tokyo"]
Object.entries() と Array.from() を使用する
const obj = {
name: "John Doe",
age: 30,
city: "Tokyo"
};
const arr = Array.from(Object.entries(obj), ([key, value]) => value);
console.log(arr); // ["John Doe", 30, "Tokyo"]
実行方法
出力結果
["John Doe", 30, "Tokyo"]
説明
上記のサンプルコードは、3 つの方法で JS オブジェクトを配列に変換する方法を示しています。
$.makeArray() メソッドは、オブジェクトを配列に変換する最も簡単な方法です。
$.each() と Array.prototype.push() を使用する
Object.entries() と Array.from() を使用する
JS オブジェクトを配列に変換するその他の方法
Object.keys() と Array.prototype.map() を使用する
const obj = {
name: "John Doe",
age: 30,
city: "Tokyo"
};
const arr = Object.keys(obj).map(key => obj[key]);
console.log(arr); // ["John Doe", 30, "Tokyo"]
スプレッド構文を使用する
ES6 以降では、スプレッド構文を使用してオブジェクトを配列に変換することができます。
const obj = {
name: "John Doe",
age: 30,
city: "Tokyo"
};
const arr = [...obj];
console.log(arr); // ["John Doe", 30, "Tokyo"]
Lodash の _.toPairs() と _.values() を使用する
Lodash ライブラリを使用している場合は、_.toPairs() と _.values() 関数を使用してオブジェクトを配列に変換することができます。
const obj = {
name: "John Doe",
age: 30,
city: "Tokyo"
};
const arr = _.values(_.toPairs(obj));
console.log(arr); // ["John Doe", 30, "Tokyo"]
javascript jquery arrays
