JavaScript初心者でも分かる！連想配列のキーの取得方法

2024-04-02

JavaScriptで連想配列のキーのリストを取得する方法

Object.keys() メソッドは、オブジェクトのすべてのキーを配列として返します。

const person = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

const keys = Object.keys(person);
console.log(keys); // ["name", "age", "city"]

for...in ループを使って、オブジェクトのすべてのキーをループ処理できます。

const person = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

const keys = [];
for (const key in person) {
  keys.push(key);
}

console.log(keys); // ["name", "age", "city"]

配列の map() メソッドを使う

オブジェクトのキーを配列に変換するために、配列の map() メソッドを使うこともできます。

const person = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

const keys = Object.entries(person).map(([key]) => key);
console.log(keys); // ["name", "age", "city"]

スプレッド構文を使う

ES6以降では、スプレッド構文を使って、オブジェクトのキーを配列に変換できます。

const person = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

const keys = [...Object.keys(person)];
console.log(keys); // ["name", "age", "city"]

これらの方法のどれを選択しても、オブジェクトのキーのリストを取得することができます。どの方法を使うかは、コードのスタイルや好みによって決まります。

注意事項

オブジェクトのプロパティには、数値やシンボルなどのキーも含まれます。
オブジェクトのキーの順序は、ブラウザやJavaScriptエンジンによって異なる場合があります。

// オブジェクトを作成
const person = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

// `Object.keys()` メソッドを使う
const keys1 = Object.keys(person);
console.log(keys1); // ["name", "age", "city"]

// `for...in` ループを使う
const keys2 = [];
for (const key in person) {
  keys2.push(key);
}
console.log(keys2); // ["name", "age", "city"]

// 配列の `map()` メソッドを使う
const keys3 = Object.entries(person).map(([key]) => key);
console.log(keys3); // ["name", "age", "city"]

// スプレッド構文を使う
const keys4 = [...Object.keys(person)];
console.log(keys4); // ["name", "age", "city"]

["name", "age", "city"]
["name", "age", "city"]
["name", "age", "city"]
["name", "age", "city"]

オブジェクトのキーの順序をソートしたい場合は、Array.prototype.sort() メソッドを使うことができます。

連想配列のキーのリストを取得するその他の方法

const person = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

const keys = Object.getOwnPropertyNames(person);
console.log(keys); // ["name", "age", "city"]

注意点

オブジェクトにシンボルプロパティがある場合は、Object.getOwnPropertyNames() メソッドはそれらを返しません。

const person = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

const keys = Reflect.ownKeys(person);
console.log(keys); // ["name", "age", "city"]

const person = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

function* getKeys(obj) {
  for (const key in obj) {
    yield key;
  }
}

const keys = getKeys(person);

for (const key of keys) {
  console.log(key);
}