給大家推薦一個實用面試題庫
1、前端面試題庫 （面試必備） ? ? ? ? ? ?推薦：★★★★★
地址：web前端面試題庫
JavaScript 是一門強大而靈活的編程語言，提供了多種迭代對象的方式。兩個常見的迭代方式是?for...in?和?for...of?循環。這兩種循環用于遍歷對象和數組中的元素，但它們有許多重要的區別和適用場景。在本文中，我們將深入探討?for...in?和?for...of?循環的區別，以及何時使用它們。
1.?for...in?循環
for...in?循環是一種用于遍歷對象的屬性的迭代方式。它的語法結構如下：
for (const key in object) {// 執行代碼
}
1.1 遍歷對象屬性
for...in?循環主要用于遍歷對象的屬性，它會將對象的每個可枚舉屬性作為迭代變量?key?的值。
const person = {name: 'John',age: 30,city: 'New York'
};for (const key in person) {console.log(key, person[key]);
}
在上面的示例中，for...in?循環遍歷了?person?對象的屬性，并打印了每個屬性的名稱和值。
1.2 遍歷原型鏈屬性
for...in?循環不僅會遍歷對象自身的屬性，還會遍歷其原型鏈上的屬性。這可能會導致意外的結果，因為你可能會獲取到不是你期望的屬性。
function Person(name) {this.name = name;
}Person.prototype.age = 30;const john = new Person('John');for (const key in john) {console.log(key, john[key]);
}
在上面的示例中，for...in?循環不僅遍歷了?john?對象自身的屬性（name），還遍歷了其原型鏈上的屬性（age）。
1.3 按照隨機順序
for...in?循環不保證按照屬性的順序進行迭代。屬性的順序可能是隨機的，這取決于 JavaScript 引擎的實現。
const colors = {a: 'red',b: 'green',c: 'blue'
};for (const key in colors) {console.log(key, colors[key]);
}
在上面的示例中，屬性的遍歷順序可能是?b、a、c?或其他隨機順序。
1.4 不能直接訪問屬性值
在?for...in?循環中，你需要通過屬性的名稱來訪問屬性的值，這可能會使代碼看起來更加冗長。
const person = {name: 'John',age: 30,
};for (const key in person) {const value = person[key];console.log(key, value);
}
在上面的示例中，我們需要使用?person[key]?來訪問屬性值，而不能直接訪問。
2.?for...of?循環
for...of?循環是一種用于遍歷可迭代對象（如數組、字符串、Map、Set 等）的迭代方式。它的語法結構如下：
for (const element of iterable) {// 執行代碼
}
2.1 遍歷數組元素
for...of?循環非常適合遍歷數組中的元素，它會將數組的每個元素作為迭代變量?element?的值。
const numbers = [1, 2, 3, 4, 5];for (const num of numbers) {console.log(num);
}
在上面的示例中，for...of?循環遍歷了?numbers?數組的元素，并打印了每個元素的值。
2.2 不遍歷對象屬性
與?for...in?循環不同，for...of?循環不會遍歷對象的屬性，它專門用于遍歷可迭代對象。如果你嘗試將對象用于?for...of?循環，將會得到錯誤。
const person = {name: 'John',age: 30,
};for (const value of person) {console.log(value);
}
// TypeError: person is not iterable
在上面的示例中，嘗試遍歷?person?對象會導致類型錯誤，因為對象不是可迭代的。
2.3 按照順序迭代
for...of?循環保證按照對象中元素的順序進行迭代。這意味著遍歷數組時會按照數組的順序進行，不會出現隨機順序的情況。
const colors = ['red', 'green', 'blue'];for (const color of colors) {console.log(color);
}
在上面的示例中，屬性的遍歷順序是?red、green、blue。
2.4 直接訪問元素值
在?for...of?循環中，你可以直接訪問可迭代對象的元素值，而不需要使用索引或屬性名稱。
const numbers = [1, 2, 3, 4, 5];for (const num of numbers) {console.log(num);
}
在上面的示例中，我們可以直接訪問?num?變量來獲取數組元素的值，而不需要使用?numbers[num]。
4. 總結
for...in?和?for...of?循環都是 JavaScript 中用于迭代的有用工具，但它們有不同的用途和適用場景。了解它們的區別可以幫助你更好地選擇合適的迭代方式。
- 使用?
for...in?循環遍歷對象的屬性，但要注意遍歷原型鏈上的屬性。 - 使用?
for...of?循環遍歷可迭代對象的元素，例如數組、字符串、Map、Set 等，它更直觀且不會遍歷原型鏈屬性。
?給大家推薦一個實用面試題庫
1、前端面試題庫 （面試必備） ? ? ? ? ? ?推薦：★★★★★
地址：web前端面試題庫
