JavaScript for...in VS for...of Loop
この記事では、JavaScript の for..in ループと for..of ループを比較します。それらの違いを識別し、どこで使用できるかを示します。
for..in はオブジェクトのプロパティをループします。特定のキーの値を取得するために使用できる各反復でキーを返します。for..of は、組み込みの Map、Array、Set、String、および TypedArray を含む反復可能なオブジェクトの値をループします。
どちらにも変数と反復可能があります。どちらの場合も、variable は const、let、または var にすることができます。for..of では、iterable は反復可能なプロパティが繰り返されるオブジェクトであり、for..in の iterable はオブジェクト自体です。
JavaScript で for..in ループを使用する
const person = {
firstname: 'Delft',
lastname: 'Stack',
age: 30,
email: 'Delft.Stack@gmail.com'
};
for (const prop in person) console.log(`${prop}: ${person[prop]}`)
出力：
"firstname: Delft"
"lastname: Stack"
"age: 30"
"email: Delft.Stack@gmail.com"
上記のコードでは、for..in は person という名前のオブジェクトのプロパティをループしています。for..in のプロパティを繰り返し使用して練習しましょう。
以下のサンプルコードを参照してください。
const person = {
firstname: 'Delft',
lastname: 'Stack',
age: 30,
email: 'Delft.Stack@gmail.com'
};
function email() {
this.email = 'maofficial@gmail.com';
}
email.prototype = person;
var obj = new email();
for (const prop in obj) {
if (obj.hasOwnProperty(prop)) {
console.log(`obj.${prop} = ${obj[prop]}`);
}
}
出力：
obj.email = maofficial@gmail.com
上記のコードは、for..in ループを使用して、オブジェクトがそれ自体として特定のプロパティを持っているかどうかをチェックし、.hasOwnProperty() を使用します。指定されたプロパティが実際に独自のプロパティである場合、.hasOwnProperty() は true を返します。
JavaScript で for..of ループを使用する
配列を使用して for..of ループの練習を始めましょう。
const array = ['apple', 'banana', 'orange'];
for (const value of array) {
console.log(value);
}
出力：
apple
banana
orange
次のコードでは、iterable は文字列です。
const name = 'Delft';
for (const value of name) {
console.log(value);
}
出力：
M
e
h
v
i
s
h
次のコードインスタンスは、Map での for..of の使用法を示しています。
const personMap =
new Map([['firstname', 'Delft'], ['lastname', 'Stack'], ['age', 30]]);
for (const entry of personMap) {
console.log(entry);
}
出力：
[ 'firstname', 'Delft' ]
[ 'lastname', 'Stack' ]
[ 'age', 30 ]
iterable プロトコルを明示的に実装するオブジェクトを使用して for..of を練習してみましょう。
const userDefinedfunctions = {
[Symbol.iterator]() {
return {
num: 0,
next() {
if (this.num < 10) {
return {value: this.num++, done: false};
}
return {value: undefined, done: true};
}
};
}
};
for (const value of userDefinedfunctions) console.log(value);
出力：
0
1
2
3
4
5
6
7
8
9
Symbol.iterator は、オブジェクトのデフォルトのイテレータとして使用されます。このシンボルは、反復可能なプロパティが反復される iterable を持つ for-of ループによって使用されます。
