【前言】

在 JavaScript 中，for 循環(huán)語(yǔ)句是編寫(xiě)復(fù)雜程序時(shí)經(jīng)常使用的一種工具。其中，for-in 和 for-of 是兩個(gè)最常用的變體。盡管這兩者非常相似，但它們?cè)诘鷮?duì)象方面有所不同。在本文中，我們將探討 for-in 和 for-of 的不同之處，以及如何正確使用它們。

【正文】

一、for-in 循環(huán)

for-in 循環(huán)是一種迭代對(duì)象屬性的方法。它可以用于遍歷對(duì)象中的所有可枚舉屬性，包括從原型鏈繼承的屬性。通常，我們使用 for-in 循環(huán)來(lái)遍歷對(duì)象的鍵名。

下面是一個(gè)簡(jiǎn)單的例子：

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

for (const key in person) {
  console.log(key, person[key]);
}

在這個(gè)例子中，我們使用 for-in 循環(huán)遍歷了 person 對(duì)象的所有鍵名。輸出結(jié)果如下：

name John
age 30
gender male

需要注意的是，for-in 循環(huán)并不是按照對(duì)象屬性在對(duì)象中的順序迭代的。這是因?yàn)?JavaScript 中的對(duì)象屬性沒(méi)有固定的順序。因此，我們?cè)谑褂?for-in 循環(huán)迭代對(duì)象時(shí)，不能保證它們的順序。

另外，由于 for-in 循環(huán)會(huì)遍歷對(duì)象的原型鏈，因此可能會(huì)迭代到不是自身屬性的屬性。為了避免這種情況，我們可以使用 hasOwnProperty 方法來(lái)檢查屬性是否為對(duì)象自身的屬性。

下面是一個(gè)使用 hasOwnProperty 的例子：

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key, person[key]);
  }
}

在這個(gè)例子中，我們使用 hasOwnProperty 方法來(lái)檢查屬性是否為 person 對(duì)象自身的屬性。輸出結(jié)果與之前相同。

二、for-of 循環(huán)

for-of 循環(huán)是一種迭代可迭代對(duì)象的方法。它可以用于遍歷數(shù)組、字符串、Map、Set、TypedArray 等可迭代對(duì)象。通常，我們使用 for-of 循環(huán)來(lái)遍歷數(shù)組或字符串的值。

下面是一個(gè)簡(jiǎn)單的例子：

const arr = [1, 2, 3];

for (const value of arr) {
  console.log(value);
}

在這個(gè)例子中，我們使用 for-of 循環(huán)遍歷了數(shù)組 arr 的所有值。輸出結(jié)果如下：

1
2
3

需要注意的是，for-of 循環(huán)不適用于迭代對(duì)象屬性。如果我們嘗試使用 for-of 循環(huán)迭代對(duì)象，將會(huì)拋出 TypeError 異常。

下面是一個(gè)嘗試使用 for-of 循環(huán)迭代對(duì)象的例子：

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

for (const value of person) {
  console.log(value);
}

在這個(gè)例子中，我們嘗試使用 for-of 循環(huán)迭代對(duì)象 person，但會(huì)拋出 TypeError 異常。

三、for-in 和 for-of 的區(qū)別

for-in 循環(huán)和 for-of 循環(huán)雖然都是用于迭代對(duì)象的方法，但它們有一些不同之處。

1. 迭代對(duì)象的內(nèi)容不同

for-in 循環(huán)迭代對(duì)象的是鍵名，而 for-of 循環(huán)迭代對(duì)象的是值。因此，for-in 循環(huán)適用于迭代對(duì)象的鍵名，而 for-of 循環(huán)適用于迭代對(duì)象的值。

2. 迭代對(duì)象的類(lèi)型不同

for-in 循環(huán)適用于遍歷對(duì)象，包括普通對(duì)象、數(shù)組、函數(shù)等，而 for-of 循環(huán)適用于遍歷可迭代對(duì)象，包括數(shù)組、字符串、Map、Set、TypedArray 等。

3. 迭代對(duì)象的順序不同

for-in 循環(huán)的迭代順序是不確定的，因?yàn)閷?duì)象的屬性沒(méi)有固定的順序。而 for-of 循環(huán)的迭代順序是確定的，因?yàn)榭傻鷮?duì)象的值是按照一定順序排列的。

4. 迭代對(duì)象的原理不同

for-in 循環(huán)遍歷對(duì)象時(shí)，會(huì)遍歷對(duì)象的原型鏈，并且會(huì)包含從原型鏈繼承的屬性。而 for-of 循環(huán)遍歷的對(duì)象是可迭代對(duì)象，它們的值是可枚舉的。

四、如何選擇合適的循環(huán)方法

在選擇使用 for-in 循環(huán)還是 for-of 循環(huán)時(shí)，我們需要考慮對(duì)象的類(lèi)型以及我們需要迭代的內(nèi)容。通常，如果我們需要迭代對(duì)象的鍵名，我們可以使用 for-in 循環(huán)；如果我們需要迭代對(duì)象的值，我們可以使用 for-of 循環(huán)。

另外，當(dāng)我們需要遍歷數(shù)組或字符串時(shí)，我們可以使用 for-of 循環(huán)，因?yàn)樗梢蕴峁└玫男阅芎涂勺x性。相比之下，for-in 循環(huán)會(huì)遍歷對(duì)象的原型鏈，會(huì)導(dǎo)致性能下降。

如果我們需要遍歷一個(gè)對(duì)象，同時(shí)又需要過(guò)濾掉從原型鏈繼承的屬性，我們可以使用 hasOwnProperty 方法進(jìn)行過(guò)濾。例如：

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key, person[key]);
  }
}

五、總結(jié)

for-in 循環(huán)和 for-of 循環(huán)是 JavaScript 中用于迭代對(duì)象的兩種方法。它們的區(qū)別在于迭代對(duì)象的內(nèi)容、類(lèi)型、順序和原理。通常，我們應(yīng)該根據(jù)需要選擇合適的循環(huán)方法，以提高效的迭代對(duì)象。

同時(shí)，我們也需要注意到 for-in 循環(huán)的一些缺陷。由于它會(huì)遍歷對(duì)象的原型鏈，導(dǎo)致性能下降，而且不能保證迭代順序，所以我們應(yīng)該避免在數(shù)組和字符串上使用 for-in 循環(huán)。

最后，我們還可以使用其他一些方法來(lái)迭代對(duì)象，例如 forEach 方法、map 方法、reduce 方法等。這些方法不僅可以提供更好的性能和可讀性，還可以通過(guò)回調(diào)函數(shù)來(lái)實(shí)現(xiàn)更加靈活的操作。

總的來(lái)說(shuō)，for-in 循環(huán)和 for-of 循環(huán)都是 JavaScript 中用于迭代對(duì)象的重要方法。我們需要根據(jù)對(duì)象的類(lèi)型和需要迭代的內(nèi)容來(lái)選擇合適的循環(huán)方法，以提高代碼的性能和可讀性。同時(shí)，我們也需要注意 for-in 循環(huán)的缺陷，并且學(xué)會(huì)使用其他方法來(lái)迭代對(duì)象，以實(shí)現(xiàn)更加靈活和高效的操作。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-697654.html

到了這里，關(guān)于你理解了for-in 和 for-of 嗎？他們有什么區(qū)別？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！