オブジェクトの値取り出し方

オブジェクトの値を取り出そうとしたときに、for/in分で取り出していたが、調べてみるとfor/of文の方が最適なケースの方があるので、メモする。

for/in文

let o = { x: 1, y: 2, z: 3 };
for (let i in o) {
  console.log(i);
}
// x
// y
// z
for (let i in o) {
  console.log(o[i]);
}
// 1
// 2
// 3

実際にはfor/in文で、オブジェクトの全てのプロパティが調べられることはなく、列挙可能なプロパティだけが調べられる。JavaScriptで定義されているさまざまな組み込みメソッドは調べられない。例えば、すべてのオブジェクトはtoString()メソッドを持っているが、for/in文ではtoStringプロパティは調べられない。組み込みメソッド以外にも、組み込みオブジェクトの多くのプロパティも調べられない。
ただし、コード中で定義されたプロパティやメソッドについてはデフォルトでは全て調べられる。列挙可能な継承プロパティやも、for/in文で調べられる。つまり、すべてのオブジェクトで継承されるようなプロパティを定義するコードの中で、for/in文を使うとループが思ったような動きをしない場合がある。
なので、特別な条件がない限りは下に書いてあるfor/of文を利用した方が良い。

for/of分

let o = { x: 1, y: 2, z: 3 };
for (let i of Object.keys(o)) {
  console.log(i);
}
// x
// y
// z
for (let i of Object.values(o)) {
  console.log(i);
}
// 1
// 2
// 3
for (let [i, j] of Object.entries(o)) {
  console.log(i, j);
}
// x 1
// y 2
// z 3

参考