前回の記事で「for-in は Object.prototype に拡張されたプロパティも拾ってループしてしまう」と書きました。
前回は hasOwnProperty を使って回避する例をご紹介しましたが、今回は

• Object.keys と Array.prototype.forEach を使って回避する
• Object.entries と Array.prototype.forEach を使って回避する

方法について書いてみたいと思います。

Object.keys と Array.prototype.forEach を使う

Object.keys は、渡されたオブジェクトのキーの配列を返します。このとき、プロトタイプ拡張されたプロパティは配列に含まれません。
この配列を前回紹介した Array.prototype.forEach に渡します。

Object.prototype.foo = 'bar';
const obj = {
    'a': 'A',
    'b': 'B',
    'c': 'C'
};
Object.keys(obj).forEach(key => console.log(key + ' -> ' + obj[key]));
// a -> A
// b -> B
// c -> C

上記例から、Object.keys は以下のような配列を返していることがわかります。

['a', 'b', 'c']

Object.entries と Array.prototype.forEach を使う

Object.entries は渡されたオブジェクトのキーと値をペアにした配列の配列を返します。言葉から理解しようとするより例を見たほうが早いでしょう。

Object.prototype.foo = 'bar';
const obj = {
    'a': 'A',
    'b': 'B',
    'c': 'C'
};
Object.entries(obj).forEach(pair => console.log(pair[0] + ' -> ' + pair[1]))
// a -> A
// b -> B
// c -> C

上記例から、Object.entries は以下のような配列を返していることがわかります。

[
    ['a', 'A'],
    ['b', 'B'],
    ['c', 'C']
]

ただし、IE11 では Object.entries を使うことができませんので注意が必要です。他の主要ブラウザでは対応しています。