在我學習JavaScript時，一遇到關於for...of和for...in循環之間的區別時就頭大。所以今天，我打算一勞永逸地解決這個問題。
一起來看看吧。
for...of循環MDN定義：
for...of語句創建循環來迭代可迭代對象，包括：內置字符串、數組、類數組對象（例如，參數或NodeList）、TypedArray、Map、Set以及用戶定義的可迭代對象。
也就是說，for...of循環僅適用於可迭代對象。JavaScript中的可迭代對象，是可以循環遍歷的對象。
String、Array、TypedArray、Map和Set都是內置的可迭代對象，因為它們的原型對象都實現了@@iterator方法。因此，for...of循環適用於上述提到的對象類型。
JavaScript中的對象默認是不可迭代的。因此，for...of循環不適用於對象。
簡而言之，for...of可以處理字符串和數組，但不能處理對象。
例如：
cosntstr="HelloWorld";for(elementofstr){console.log(element);}//Hello""Worldfor...in循環MDN 定義
for...in語句迭代對象的所有以字符串為鍵的可枚舉屬性（忽略以Symbols為鍵的對象），包括繼承的可枚舉屬性。
我們上面說到，for...of不適用於（非可迭代的）對象，那麼我們如何遍歷對象的鍵和值呢？答案是for...in循環。
for...in適用於可枚舉標誌設置為true的那些屬性。
例如：
conststudent={registration:"123456",name:"Sandeep",age:33,}for(keyinstudent){console.log(key,student[key]);}/*registration"123465"name"Sandeep"age33*/現在我們向student對象添加一個新屬性（marks），並將其可枚舉標誌設置為false。隨着我們將可枚舉標誌設置為false，marks鍵不會出現在for...in循環的結果中。
conststudent={registration:"123456",name:"Sandeep",age:33,}Objec.defineProperty(student,"marks",{value:98,enumerable:false,})console.log(student.marks);//98for(keyinstudent){console.log(key,student[key]);}/*registration"123465"name"Sandeep"age33*///marks鍵不會出現在for...in循環的結果中.for...in也適用於字符串和數組，因為字符串和數組屬性的可枚舉標誌在默認情況下也是true。
簡而言之，使用for...in來循環對象。雖然for...in也可用於字符串和數組，但不建議。
結論for...of —— 用於循環字符串和數組。
for...in —— 用於循環對象。
感謝大家的閱讀。我們下次再見。
每日分享前端插件乾貨，歡迎關注！
點讚和在看就是最大的支持❤️
留言列表