Object.keys
このページでは豊富な例を用いてJavaScript（js）のObject.keysメソッドの使い方を学ぶことができます。
JavaScript（js）のObject.keysメソッドは、「引数で与えたオブジェクト（連想配列など）の列挙可能プロパティ（列挙可能なキー）」の名前を文字列とした要素の配列を返り値として返します。
返り値の配列に含まれる要素の順番は「引数で与えたオブジェクト」に定義してある順と同様で、 「引数で与えたオブジェクト」にSymbol型（シンボル）のプロパティが含まれる場合はそのプロパティは無視されます。
// 記述例
Object.keys(プロパティが返されるオブジェクト)TL;DR
基本
// プロパティ（キー）が要素となった配列を返す
const object1 = { name: 'FooBarNinja', age: 1 };
const returnValue1 = Object.keys(object1);
console.log(returnValue1);
==> [ 'name', 'age' ]
// 返り値の型は配列
console.log(returnValue1 instanceof Array);
==> true
// シンボル型（Symbol）のプロパティは無視される
const object2 = { name: 'FooBarNinja', [Symbol('age')]: 1 };
console.log(object2);
==> { name: 'FooBarNinja', [Symbol(age)]: 1 }
const returnValue2 = Object.keys(object2);
console.log(returnValue2);
==> [ 'name' ]
// 空のオブジェクトの場合
console.log(Object.keys({}));
==> []
// forEach文を使用したプロパティの値の取得
const object3 = { name: 'FooBarNinja', age: 1 };
const keys = Object.keys(object3);
keys.forEach(key => {
console.log(object3[key]);
});
==> FooBarNinja
==> 1関連情報：instanceof演算子の使用方法
その他のオブジェクト
// 配列の場合はインデックスがキーとなる
const array1 = ['js', 'javascript'];
const returnValue1 = Object.keys(array1);
console.log(returnValue1);
==> [ '0', '1' ]
// 文字列の場合も各文字のインデックスがキー
const string2 = 'ABC';
const returnValue2 = Object.keys(string2);
console.log(returnValue2);
==> [ '0', '1', '2' ]
// 独自クラスの場合
function Student(name, middleName) {
this.name = name;
this.middleName = middleName;
}
const student1 = new Student('Haoran', 'Ignatius');
console.log(student1);
==> Student { name: 'Haoran', middleName: 'Ignatius' }
console.log(Object.keys(student1));
==> [ 'name', 'middleName' ]解説
// 記述例
Object.keys(プロパティが返されるオブジェクト)基本
Objectクラスのkeysメソッドは「引数で与えたオブジェクトの列挙可能プロパティ」を要素とした配列を返り値として返します。
返り値である配列の要素の型は文字列であり、要素の順番は引数のオブジェクトに定義されている順になります。
たとえば、連想配列のようなオブジェクトに対してkeysメソッドを実行した場合、そのキー値が要素となった配列を取得することができます。
注意点として、引数のオブジェクトにシンボル型（Symbol）のプロパティが存在する場合、そのプロパティは返り値の配列の要素に含まれないことが挙げられます。
const object1 = { name: 'js', fullName: 'javascript', rank: 1 };
const returnValue1 = Object.keys(object1);
console.log(returnValue1);
==> [ 'name', 'fullName', 'rank' ]
// 返り値の型は配列
console.log(returnValue1 instanceof Array);
==> true
// シンボル型（Symbol）のプロパティは返り値の要素に含まれない
const object2 = { name: 'js', [Symbol('fullName')]: 'javascript', rank: 1 };
console.log(object2);
==> { name: 'js', rank: 1, [Symbol(fullName)]: 'javascript' }
const returnValue2 = Object.keys(object2);
console.log(returnValue2);
==> [ 'name', 'rank' ]
// 空オブジェクト
const object3 = {};
console.log(Object.keys(object3));
==> []
// プロパティの値の取得
const object4 = { name: 'js', fullName: 'javascript', rank: 1 };
const keys = Object.keys(object4);
keys.forEach((key) => {
console.log(object4[key]);
});
==> js
==> javascript
==> 1関連情報：instanceof演算子の使用方法
その他のオブジェクト
keysメソッドの引数にはオブジェクトを指定します。
前項の例では連想配列のようなオブジェクトに対しての例を挙げましたが、ArrayオブジェクトやStringオブジェクトなどにも使用することができます。
オブジェクトの性質により取得されるキーは異なるので、どの型のオブジェクトに対して実行しているのかを意識して使用してください。
// 配列の場合（インデックスがキー）
const array1 = ['foo', 'bar'];
const returnValue1 = Object.keys(array1);
console.log(returnValue1);
==> [ '0', '1' ]
// 文字列の場合（インデックスがキー）
const string2 = 'jsx';
const returnValue2 = Object.keys(string2);
console.log(returnValue2);
==> [ '0', '1', '2' ]
// 独自クラスの場合
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hi, I'm ${this.name}`;
}
}
const person1 = new Person('Haoyu', 22);
console.log(person1);
==> Person { name: 'Haoyu', age: 22 }
console.log(Object.keys(person1));
==> [ 'name', 'age' ]