js for...in和for...of的區別
阿新 • • 發佈:2021-12-12
for...in 迴圈
遍歷的是key(可遍歷物件、陣列或字串的key)
for...in 語句用於遍歷陣列或者物件的屬性(對陣列或者物件的屬性進行迴圈操作)。
for ... in 迴圈中的程式碼每執行一次,就會對陣列的元素或者物件的屬性進行一次操作。
使用for-in可以遍歷陣列,但是會存在以下問題:
1.index索引為字串型數字(注意,非數字),不能直接進行幾何運算。
2.遍歷順序有可能不是按照實際陣列的內部順序(可能按照隨機順序)。
3.使用for-in會遍歷陣列所有的可列舉屬性,包括原型。原型方法method和name屬性都會被遍歷出來,通常需要配合hasOwnProperty()方法判斷某個屬性是否該物件的例項屬性,來將原型物件從迴圈中剔除。
for (var key in myObject) { if(myObject.hasOwnProperty(key)){ console.log(key); } }
for-of迴圈
遍歷的是value(可遍歷物件、陣列或字串的value)
for-of可以簡單、正確地遍歷陣列(不遍歷原型method和name)。
var myArray = [1, 2, 4, 5, 6, 7]; myArray.name = "陣列"; myArray.getName = function() { return this.name; } for (var value of myArray) { console.log(value); }
1.這是最簡潔、最直接的遍歷陣列元素的語法。
2.這個方法避開了for-in迴圈的所有缺陷。
3.與forEach()不同的是,它可以正確響應break、continue和return語句。
因此建議是使用for-of遍歷陣列,因為for-of遍歷的只是陣列內的元素,而不包括陣列的原型屬性method和索引name。
區別總結
簡單總結就是,for in遍歷的是陣列的索引(即鍵名),而for of遍歷的是陣列元素值。
for-in總是得到物件的key或陣列、字串的下標。
for-of總是得到物件的value或陣列、字串的值,另外還可以用於遍歷Map和Set。
var set = new Set(); set.add("a").add("b").add("d").add("c"); // 遍歷Set for (let s of set) { console.log(s); } var map = new Map(); map.set("a", 1).set("b", 2).set(999, 3); // 遍歷Map for(let [k, v] of map) { console.log(k, v); }