在 ES6 中，for...of 和 for...in 講解

落花看风雪發表於2024-04-05

在 ES6 中，for...of 和 for...in 是兩種用於遍歷不同資料結構的迴圈結構。它們各自有不同的用途和適用場景。

for...of

for...of 迴圈用於遍歷可迭代物件（包括 Array、Map、Set、String、TypedArray、函式的 arguments 物件等等）的值。

語法

for (variable of iterable) {  
  // 執行語句  
}

示例

const array = [1, 2, 3, 4, 5];  
for (const value of array) {  
  console.log(value); // 輸出每個陣列元素的值  
}

遍歷字串：

const str = "hello";  
for (const char of str) {  
  console.log(char); // 輸出字串的每個字元  
}

遍歷 Map 物件：

const map = new Map();  
map.set('key1', 'value1');  
map.set('key2', 'value2');  
for (const [key, value] of map) {  
  console.log(key, value); // 輸出 Map 中的每個鍵值對  
}

for...in

for...in 迴圈用於遍歷物件的可列舉屬性（包括物件自身的和繼承的屬性）。

語法

for (variable in object) {  
  // 執行語句  
}

示例

遍歷物件的屬性：

const obj = { a: 1, b: 2, c: 3 };  
for (const key in obj) {  
  console.log(key); // 輸出物件的每個屬性名  
  console.log(obj[key]); // 輸出物件的每個屬性值  
}

注意：for...in 迴圈不僅遍歷物件自身的屬性，還會遍歷其原型鏈上的屬性。如果你只想遍歷物件自身的屬性，可以使用 Object.prototype.hasOwnProperty.call() 方法來檢查屬性是否是物件自身的。

區別

  • for...of 用於遍歷可迭代物件的值，而 for...in 用於遍歷物件的可列舉屬性。
  • for...of 更適用於陣列、字串、Map、Set 等可迭代物件，而 for...in 更適用於物件的屬性遍歷。
  • for...in 還會遍歷物件原型鏈上的屬性，而 for...of 不會。

使用建議

  • 當需要遍歷陣列、字串、Map、Set 等可迭代物件的值時，使用 for...of。
  • 當需要遍歷物件的屬性時，使用 for...in，但需要注意可能遍歷到原型鏈上的屬性。
  • 如果只想遍歷物件自身的屬性，可以使用 Object.keys(), Object.values(), 或 Object.entries() 方法與 for...of 結合使用。 
    const obj = { a: 1, b: 2, c: 3 };  
for (const key of Object.keys(obj)) {  
  console.log(key); // 只輸出物件自身的屬性名  
}

相關文章