五分鐘掌握 for...in 和 for...of 區別
阿新 • • 發佈:2018-11-04
GitHub 地址,歡迎star,檢視更多整理的前端知識
for...in
for...in 語句以任意順序遍歷一個物件的可列舉屬性。
for...in 遍歷物件本身的所有可列舉屬性,以及物件從其建構函式原型中繼承的屬性。
for (variable in object) {...}
-
variable
在每次迭代時,將不同的屬性名分配給變數。 -
object
被迭代列舉其屬性的物件。
只遍歷自身的可列舉屬性,可以使用 hasOwnProperty
for (var prop in obj) { if (obj.hasOwnProperty(prop)) { console.log(`obj.${prop} = ${obj[prop]}`); } }
for...of
for...of 語句在可迭代物件(包括 Array,Map,Set,String,TypedArray,arguments 物件等等)上建立一個迭代迴圈,呼叫自定義迭代鉤子,併為每個不同屬性的值執行語句。
對於for...of的迴圈,可以由break, throw 或return終止(使用return報錯?)。
for (variable of iterable) {
//statements
}
-
variable
在每次迭代中,將不同屬性的值分配給變數。 -
iterable
被迭代列舉其屬性的物件。
let iterable = [10, 20, 30]; for (const value of iterable) { console.log(value); } // 10 // 20 // 30
for...of 與 for...in 區別
- for...in 語句以原始插入順序迭代物件的可列舉屬性。
- for...of 語句遍歷可迭代物件定義要迭代的資料。
區別示例:
Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {}; let iterable = [3, 5, 7]; iterable.foo = 'hello'; for (let i in iterable) { console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom" } for (let i in iterable) { if (iterable.hasOwnProperty(i)) { console.log(i); // 0, 1, 2, "foo" } } for (let i of iterable) { console.log(i); // 3, 5, 7 }