前回の記事で「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
を使うことができませんので注意が必要です。他の主要ブラウザでは対応しています。