JavaScript for...in VS for...of 循环

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 for..in 循环
  2. 在 JavaScript 中使用 for..of 循环
JavaScript for...in VS for...of 循环

本文比较了 JavaScript 中的 for..infor..of 循环。它识别了它们之间的区别并显示了我们可以在哪里使用它们。

for..in 循环对象的属性。它在每次迭代时返回一个键,该键可用于获取该特定键的值。for..of可迭代对象的值上创建循环,包括内置的 MapArraySetStringTypedArray

两者都有一个 variable 和一个 iterable。对于这两种情况,variable 可以是 constletvar。在 for..of 中,iterable 是一个对象,其可迭代属性被迭代,而 for..initerable 是一个对象本身。

在 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

下面的代码实例展示了 for..ofMap 的用法。

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 用作对象的默认迭代器。这个符号由 for-of 循环使用,其中我们有 iterable 的可迭代属性被迭代。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相关文章 - JavaScript Loop