2021年11月4日 JavaScript (JS Primer) ループと反復処理

Object.keysメソッド

前回はfor...inメソッドを使った際に親オブジェクト自身がプロパティを持っている場合に意図しない結果を生んでしまうこと問題があるという点まで学習しました。 Object.keysメソッドを使うことで安全にオブジェクトのプロパティを列挙することができます。

const obj = {
    "a": 1,
    "b": 2,
    "c": 3
};

Object.keys(obj).forEach(key => {
    const value = obj[key];
    console.log(`key:${key}, value:${value}`);
});
// "key:a, value:1"
// "key:b, value:2"
// "key:c, value:3"

// object.keysメソッドは引数に渡したオブジェクト内のプロパティ名を配列で返します。
// forEachで配列[a, b, c]の要素を一つずつコールバック関数で処理します。

オブジェクトのプロパティを列挙する方法

次の章”オブジェクト”で出てくる内容を引用します。

オブジェクトのプロパティを列挙する方法として、次の3つの静的メソッドが挙げられます。

• Object.keysメソッド: オブジェクトのプロパティ名を要素とした配列を返します。
• Object.valuesメソッド: オブジェクトの値を要素とした配列を返します。
• Object.entriesメソッド: オブジェクトのプロパティ名と値(プロパティ)の配列を要素とした配列を返します。 例： [[a: b], [c: d], [e: f]]

これらのメソッドは引数にオブジェクトを指定します。

const obj = {
    "one": 1,
    "two": 2,
    "three": 3
};
// `Object.keys`はキーを列挙した配列を返す
console.log(Object.keys(obj)); // => ["one", "two", "three"]
// `Object.values`は値を列挙した配列を返す
console.log(Object.values(obj)); // => [1, 2, 3]
// `Object.entries`は[キー, 値]の配列を返す
console.log(Object.entries(obj)); // => [["one", 1], ["two", 2], ["three", 3]]

for...of文

for...of文は配列に対して使います。ループ毎に配列の各要素を取り出します。

const array = [1, 2, 3];
for (const value of array) {
    console.log(value);
}
// 1
// 2
// 3

for...in文を配列で使ってみる

配列に対してfor...in文を使用すると、ループ毎に各要素のインデックス番号を取り出します。

const array = [1, 2, 3];
for (const value in array) {
    console.log(value);
}
// 0
// 1
// 2

この結果から、配列のインデックス番号は要素のキーであると認識できます。またこのインデックス番号は文字列として評価されます。

参考

JavaScript Primerループと反復処理
Object.keys, values, entries