JavaScriptのObject.keys()の使い方

この記事では、JavaScriptのObject.keys()を使ってオブジェクトのプロパティからなる配列を生成する方法について見ていきたいと思います。

Object.keys()とは

Object.keys()は、オブジェクトのプロパティからなる配列を生成するメソッドです。

Object.keys()の書き方

Object.keys(オブジェクト)

Object.keys()の返り値

オブジェクトのプロパティからなる配列

それでは、Object.keys()を使った例を見ていきましょう。

Object.keys()を使った例

let array = {a:50, b:80, c:30, d:60};

let keys = Object.keys(array);

console.log(keys);

この例では、
Object.keys(array)でオブジェクトのプロパティからなる配列が生成されます。
それがkeysに代入されるので、コンソールにはその配列が出力されるはずです。

では見てみると、

こうですね。
オブジェクトのプロパティからなる配列が返されています。

次にObject.keys()を使ったループ処理について見ていきましょう。

Object.keys()を使ったループ処理

ループ処理の方法にはいろいろありますが、今回はforEach()を用いてみたいと思います。

let array = {a:50, b:80, c:30, d:60};

let keys = Object.keys(array);

keys.forEach( element => {
  console.log(element);
});

この例では、
Object.keys(array)で生成した配列を変数keysに代入しています。
それをforEach()を使ってループ処理するという内容になっていますね。
なので、ここでは配列keysのそれぞれの要素がコンソールに表示されるはずです。

では見てみると、

こうですね。
オブジェクトのそれぞれのプロパティがコンソールに表示されていますね。

では次に、Object.keys()で生成した配列をソートしてみましょう。

Objcts.keys()で生成した配列をソートする方法

配列をソートするにはsort()メソッドを用います。

let array = {g:50, e:80, h:30, f:60};

let keys = Object.keys(array);

let sorted = keys.sort();

console.log(keys);

この例では、
Object.keys(array)で生成した配列を変数keysに代入しています。
そして、その配列をsort()を使ってソートするという内容ですね。

では、結果を見てみると、

こうですね。
オブジェクトのプロパティが順番に並び替わっているのが分かります。

では、次にObject.keys()を使ってプロパティが存在しているかどうかを確認してみましょう。

Objcts.keys()でプロパティの有無を確認する方法

let array = {g:50, e:80, h:30, f:60};

let keys = Object.keys(array);

let a = keys.indexOf("a");
let e = keys.indexOf("e");

console.log(a);
console.log(e);

この例では、
Object.keys(array)で配列arrayのプロパティからなる配列を生成して変数keysに代入しています。
その後にindexOf()を使って、keysに指定したプロパティが存在しているかどうかを確認します。
indexOf()は、指定した値が存在していれば「1」を返し、存在していなければ「-1」を返します。

では、結果を見てみると

こうですね。
「a」はプロパティに存在しないので「-1」が、「e」はプロパティに存在するので「1」が返されていますね。

まとめ

以上に見てきたように、

Object.keys()を使えば、オブジェクトのプロパティからなる配列を生成することができます。