切換語言為:簡體

JavaScript中for...in和for..of的區別

  • 爱糖宝
  • 2024-09-16
  • 2042
  • 0
  • 0

一、for-in 迴圈

for-in 迴圈是一種迭代物件屬性的方法。它可以用於遍歷物件中的所有可列舉屬性,包括從原型鏈繼承的屬性。通常,我們使用 for-in 迴圈來遍歷物件的鍵名。

下面是一個簡單的例子:

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};
 
for (const key in person) {
  console.log(key, person[key]);
}


在這個例子中,我們使用 for-in 迴圈遍歷了 person 物件的所有鍵名。輸出結果如下:

name John
age 30
gender male


需要注意的是,for-in 迴圈並不是按照物件屬性在物件中的順序迭代的。這是因為 JavaScript 中的物件屬性沒有固定的順序。因此,我們在使用 for-in 迴圈迭代物件時,不能保證它們的順序。

另外,由於 for-in 迴圈會遍歷物件的原型鏈,因此可能會迭代到不是自身屬性的屬性。爲了避免這種情況,我們可以使用 hasOwnProperty 方法來檢查屬性是否為物件自身的屬性。

下面是一個使用 hasOwnProperty 的例子:

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};
 
for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key, person[key]);
  }
}


在這個例子中,我們使用 hasOwnProperty 方法來檢查屬性是否為 person 物件自身的屬性。輸出結果與之前相同。

二、for-of 迴圈

for-of 迴圈是一種迭代可迭代物件的方法。它可以用於遍歷陣列、字串、Map、Set、TypedArray 等可迭代物件。通常,我們使用 for-of 迴圈來遍歷陣列或字串的值。

下面是一個簡單的例子:

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


在這個例子中,我們使用 for-of 迴圈遍歷了陣列 arr 的所有值。輸出結果如下:

1
2
3


需要注意的是,for-of 迴圈不適用於迭代物件屬性。如果我們嘗試使用 for-of 迴圈迭代物件,將會丟擲 TypeError 異常。

下面是一個嘗試使用 for-of 迴圈迭代物件的例子:

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};
 
for (const value of person) {
  console.log(value);
}


在這個例子中,我們嘗試使用 for-of 迴圈迭代物件 person,但會丟擲 TypeError 異常。

三、for-in 和 for-of 的區別

for-in 迴圈和 for-of 迴圈雖然都是用於迭代物件的方法,但它們有一些不同之處。

1、迭代物件的內容不同

for-in 迴圈迭代物件的是鍵名,而 for-of 迴圈迭代物件的是值。因此,for-in 迴圈適用於迭代物件的鍵名,而 for-of 迴圈適用於迭代物件的值。

2、迭代物件的型別不同

for-in 迴圈適用於遍歷物件,包括普通物件、陣列、函式等,而 for-of 迴圈適用於遍歷可迭代物件,包括陣列、字串、Map、Set、TypedArray 等。

3、迭代物件的順序不同

for-in 迴圈的迭代順序是不確定的,因為物件的屬性沒有固定的順序。而 for-of 迴圈的迭代順序是確定的,因為可迭代物件的值是按照一定順序排列的。

4、迭代物件的原理不同

for-in 迴圈遍歷物件時,會遍歷物件的原型鏈,並且會包含從原型鏈繼承的屬性。而 for-of 迴圈遍歷的物件是可迭代物件,它們的值是可列舉的。

四、如何選擇合適的迴圈方法

在選擇使用 for-in 迴圈還是 for-of 迴圈時,我們需要考慮物件的型別以及我們需要迭代的內容。通常,如果我們需要迭代物件的鍵名,我們可以使用 for-in 迴圈;如果我們需要迭代物件的值,我們可以使用 for-of 迴圈。

另外,當我們需要遍歷陣列或字串時,我們可以使用 for-of 迴圈,因為它可以提供更好的效能和可讀性。相比之下,for-in 迴圈會遍歷物件的原型鏈,會導致效能下降。

如果我們需要遍歷一個物件,同時又需要過濾掉從原型鏈繼承的屬性,我們可以使用 hasOwnProperty 方法進行過濾。

五、總結

for-in 迴圈和 for-of 迴圈是 JavaScript 中用於迭代物件的兩種方法。它們的區別在於迭代物件的內容、型別、順序和原理。通常,我們應該根據需要選擇合適的迴圈方法,以提高效的迭代物件。

同時,我們也需要注意到 for-in 迴圈的一些缺陷。由於它會遍歷物件的原型鏈,導致效能下降,而且不能保證迭代順序,所以我們應該避免在陣列和字串上使用 for-in 迴圈。

最後,我們還可以使用其他一些方法來迭代物件,例如 forEach 方法、map 方法、reduce 方法等。這些方法不僅可以提供更好的效能和可讀性,還可以透過回撥函式來實現更加靈活的操作。

總的來說,for-in 迴圈和 for-of 迴圈都是 JavaScript 中用於迭代物件的重要方法。我們需要根據物件的型別和需要迭代的內容來選擇合適的迴圈方法,以提高程式碼的效能和可讀性。同時,我們也需要注意 for-in 迴圈的缺陷,並且學會使用其他方法來迭代物件,以實現更加靈活和高效的操作。

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.