JavaScript は、複雑なツールや API を使用せずにオブジェクト プロパティを反復処理できるプログラミング言語の 1 つです。

以下のコードを見てから、さらに話しましょう。

var obj = { // Yes 'var'...bad old days!
a: 1,
b: 2,
c: 3,
};for (var key in obj) {
if (obj.hasOwnProperty(key)) { // <- Ahh...What's this??
var value = obj;
console.log(key, ' : ', value);
}
}

Output:

a : 1
b : 2
c : 3

Many of us miss out the check obj.hasOwnProperty

JavaScriptでは、繰り返し処理を行うときに、オブジェクトの親のプロパティ（およびその親のプロパティとその親・・・アイデアを得た！）を繰り返さないことが非常に重要になる。

幸運なことに、私たちのほとんどは、このチェックを逃すと警告を出す、ある種のリント ツールを使って作業しています。

Modern way – Iteration in ES6+

Now let’s move to modern JavaScript or ES6+!

Acknowledgeing this problem, ECMA team has added support for simple iteration in ES6.

and it starts with – Object.Iteration in ES6+.ES6+.ES6+.ES6は、この問題を認識しています。entries()

The Object.entries() method returns an array of a given object’s own enumerable property pairs, in…in loop (the difference is that a for-in loop enumerates properties in the prototype chain as well).

for example, below code

const obj = {
a: 1,
b: 2,
c: 3
};
console.log(Object.entries(obj));

will gives output like below, An array of arys of two elements, where at index.Of: 0 に key、1 に value

さて、この単純な関数がオブジェクトの優雅な反復につながるので、次のコードをチェックしてください。entries`

const obj = {
a: 1,
b: 2,
c: 3
};for (const entry of Object.entries(obj)) {
console.log(`key: ${entry} : value: ${entry}`);
}

出力：

key: a : value: 1
key: b : value: 2
key: c : value: 3

すでにいい感じになっていますが、もっといい感じにしましょう

ステップ2: Destructingを使う

ここで「入力」を理解しましょう。上記のforループを以下のように更新すると

...for (const entry of Object.entries(obj)) {
console.log(entry);
}

出力は以下のようになります

うーん…。ということは、ES6 の Array destructuring を使えば、

const entry = ;
const = entry;
console.log(`key: ${key} : value: ${value}`);

同じ概念を for ループに適用してみましょう。

forEach

Array 組み込み関数に同じテクニックを適用するには、次のコードを試してみてください

const obj = {
a: 1,
b: 2,
c: 3
};
Object.entries(obj).forEach(() => {
console.info(`${key} : ${value}`);
});

Output:

a : 1
b : 2
c : 3

ありがとう！