📖

【JS】オブジェクト操作の方法まとめ

2021/09/24に公開

JavaScript

タイトルについて指摘があったため変更しました。

この記事では、オブジェクト(連想配列)に使えるメソッドについて解説していきます。

オブジェクトかどうかの判断

オブジェクトかどうかの判定は割と面倒くさいです。

というのも、typeofを使うとnullや配列もObjectと判定されてしまうからです。

一応調べた感じ、以下の書き方が良いと思いました。


const obj = { id: 1, name: "obj", length: 3 };
const arr = [0, 1, 2];

// true
console.log(Object.prototype.toString.call(obj) === "[object Object]");
// false
console.log(Object.prototype.toString.call(arr) === "[object Object]");

このように、Object.prototype.toString.call()を使うことで、Object型の何なのかを知ることができます。

プロパティ名の有無を確認

次にプロパティ名の有無を確認する方法ですが、主に2つあります。

1.hasOwnProperty
2.in演算子

2つとも実際に使うと以下のようになります。


const obj = { id: 1, name: "obj", length: 3 };

// true
console.log(obj.hasOwnProperty("id"));
// true
console.log("id" in obj);

2つともほぼ同じ挙動ですが、若干違うのでhasOwnPropertyを使っておけば問題ないです。

両者の違いが気になるという方は、調べてみてください。

静的メソッド

オブジェクトの静的メソッドには主に次の3つがあります。

Object.keysメソッド: オブジェクトのプロパティ名の配列にして返す
Object.valuesメソッド: オブジェクトの値の配列にして返す
Object.entriesメソッド: オブジェクトのプロパティ名と値の配列の配列を返す

それぞれ実際に使うと以下のようになります。


const obj = { id: 1, name: "obj", length: 3 };

// [ “id”, “name”, “length”]
console.log(Object.keys(obj));
// [ 1, “obj”, 3 ]
console.log(Object.values(obj));
// [ [ “id”, 1 ], [ “name”, “obj” ], [ “length”, 3 ] ]
console.log(Object.entries(obj));

実務的な使い方としては、ここにメソッドチェーンでmapやforEachなどを使うことが多いと思います。

おわりに

様々なオブジェクト操作の方法について見てきました。

知らなかったメソッドがあればぜひ今日から使ってみてください。

また、僕のブログではReactエンジニアになるためのロードマップを無料で全て公開しているので、参考にどうぞ。バックエンドエンジニアを目指している方などにも役立つ情報を書いてます。

おわり