一、介紹

在JavaScript中，for-in 和 for-of 是兩種不同的循環(huán)結(jié)構(gòu)，它們有一些重要的區(qū)別和聯(lián)系。

1.1、for-in

for-in 循環(huán)用于遍歷對(duì)象的可枚舉屬性。

語(yǔ)法如下：

for (variable in object) {
  // 循環(huán)體
}

在這個(gè)循環(huán)中，variable 是我們定義的屬性名，object 是我們要遍歷的對(duì)象。

這個(gè)循環(huán)會(huì)遍歷對(duì)象的所有可枚舉屬性（包括它的原型鏈上的屬性），并且屬性名的順序是不確定的。

例如：

如果我們有一個(gè)對(duì)象 obj，它包含屬性 a、b 和 c，我們可以使用 for-in 循環(huán)來(lái)遍歷這些屬性：

let obj = { a: 1, b: 2, c: 3 };  
for (let key in obj) {  
  console.log(key); // 輸出 'a', 'b', 'c' (但順序可能每次不同)  
}

需要注意的是，for-in 不僅會(huì)遍歷對(duì)象的自身屬性，還會(huì)遍歷它的原型鏈上的屬性。

如果你只想遍歷對(duì)象的自身屬性，可以使用 Object.keys() 方法來(lái)獲取對(duì)象的所有鍵名，然后使用 for-of 循環(huán)來(lái)遍歷這些鍵名對(duì)應(yīng)的值。

1.2、for-of

for-of 循環(huán)用于遍歷可迭代對(duì)象（包括 Array，Map，Set，String，TypedArray，arguments對(duì)象等等）。

語(yǔ)法如下：

for (value of iterable) {
  // 循環(huán)體
}

在這個(gè)循環(huán)中，value 是當(dāng)前迭代到的元素，iterable 是我們要遍歷的可迭代對(duì)象。

這個(gè)循環(huán)會(huì)按照特定的順序遍歷對(duì)象的每一個(gè)元素。

例如：

let arr = [1, 2, 3];
for (let value of arr) {
  console.log(value); // 輸出 '1', '2', '3' (按照數(shù)組順序)
}

二、區(qū)別

• for-in 是用于遍歷對(duì)象的屬性， for-of 是用于遍歷可迭代對(duì)象的元素
• for-in 會(huì)遍歷對(duì)象的原型鏈， for-of 則不會(huì)

具體而言：

2.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.2、迭代對(duì)象的類型不同

for-in 循環(huán)適用于遍歷對(duì)象，包括普通對(duì)象、數(shù)組、函數(shù)等

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

2.3、迭代對(duì)象的順序不同

for-in 循環(huán)的迭代順序是不確定的，因?yàn)閷?duì)象的屬性沒(méi)有固定的順序。

for-of 循環(huán)的迭代順序是確定的，因?yàn)榭傻鷮?duì)象的值是按照一定順序排列的。

2.4、迭代對(duì)象的原理不同

for-in 循環(huán)遍歷對(duì)象時(shí)，會(huì)遍歷對(duì)象的原型鏈，并且會(huì)包含從原型鏈繼承的屬性。

for-of 循環(huán)遍歷的對(duì)象是可迭代對(duì)象，它們的值是可枚舉的。

三、聯(lián)系

• 雖然它們的應(yīng)用場(chǎng)景不同，但它們都提供了一種方便的方式來(lái)遍歷一個(gè)集合的元素。
• 在某些情況下，它們也可以互相替代。

例如

如果你有一個(gè)對(duì)象數(shù)組，你可以使用 for-of 來(lái)遍歷數(shù)組中的每個(gè)對(duì)象。

同樣，如果你有一個(gè)包含鍵值對(duì)的對(duì)象，你可以使用 for-in 來(lái)遍歷這些鍵值對(duì)。

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

在選擇使用 for-in 循環(huán)還是 for-of 循環(huán)時(shí)，我們需要考慮對(duì)象的類型以及我們需要迭代的內(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)容、類型、順序和原理。

通常，我們應(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ì)象的類型和需要迭代的內(nèi)容來(lái)選擇合適的循環(huán)方法，以提高代碼的性能和可讀性。

同時(shí)，我們也需要注意 for-in 循環(huán)的缺陷，并且學(xué)會(huì)使用其他方法來(lái)迭代對(duì)象，以實(shí)現(xiàn)更加靈活和高效的操作。

六、最后

到此這篇關(guān)于js中for-in和for-of的區(qū)別的文章就介紹到這了,更多相關(guān)js中for-in和for-of的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論