js中的for in 和 for of 的區別

for...in和for...of的區別

[ ]for...in是es5的標準，該方法遍歷的是物件的屬性名稱(key：鍵名)。乙個array物件也是乙個物件，陣列中的每個元素的索引被視為屬性名稱，所以在使用for...in遍歷array時，拿到的是每個元素索引

一般用於遍歷物件自身的和繼承的可列舉屬性。以及物件從建構函式原型中繼承的屬性。對於每個不同的屬性，語句都會被執行。

不建議使用for in 遍歷陣列，因為輸出的順序是不固定的。

如果迭代的物件的變數值是null或者undefined, for in不執行迴圈體，建議在使用for in迴圈之前，先檢查該物件的值是不是null或者undefined

for…in 語句以原始插入順序迭代物件的可列舉屬性(只能迭代出可列舉的屬性，可列舉屬性【js自定義屬性】/不可列舉屬性【物件的內建屬性，如陣列的length 就是乙個內建屬性，所以for…in遍歷不出來】)。

-for…in的原理是: object.keys()：返回給定物件所有可列舉屬性的字串陣列

for...of是es6的標準，該方法遍歷的是物件的屬性所對應的值(value：鍵值)。所以它用來遍歷陣列時得到每個元素的值

for…of 語句在可迭代物件（包括 array，map，set，string，typedarray，arguments 物件等等）上建立乙個迭代迴圈，呼叫自定義迭代鉤子，並為每個不同屬性的值執行語句

for…of 語句遍歷可迭代物件定義要迭代的資料（非自定義屬性）

for…of迴圈可以使用的範圍包括陣列、set 和 map 結構、某些類似陣列的物件、generator 物件，以及字串。

for...in和for...of的使用測試

使用兩個方法對array，set，map做測試

var a = ['a','b','c'];

var s = new set(['a','b','c']);

var m = new map([[1:'x'],[2:'y'],[3,'z']]);

//遍歷陣列

for(var x of a)

for(var x in a)

//遍歷set集合

for(var x of s)

for(var x in s)

//遍歷map集合

for(var x of m)

for(var x in m)

for...in和for...of遍歷陣列和物件

遍歷物件：

var s=;

var s1=object.create(s);

for(var prop in s1)

for(let prop of s1)

for(let prop of object.keys(s1))

遍歷陣列

var arr=['a','b','c'];

arr.hobby = 'foosball';

for(let i in a)

for(let i of a)

object.prototype.objcustom = function() {};

array.prototype.arrcustom = function() {};

arr.hobby = 'foosball';

for (let i in arr)

for (let i in iterable)

}for (let i of iterable)

將objcustom屬性和arrcustom屬性新增到object.prototype和array.prototype。由於繼承和原型鏈，物件arr繼承屬性objcustom和arrcustom。使用hasownproperty() 來檢查，證明屬性arrcustom和objcustom是繼承的。由此可見，for…of迴圈的是的是可迭代物件的value（值），in迴圈的是可迭代物件的key（屬性），for…of迴圈不能迴圈普通的物件，對普通物件的屬性遍歷推薦使用for…in。

但是非要使用for…of來迴圈物件，並不是不可以。此時就要結合object.keys()進行使用：

js中的for in 和 for of 的區別

js中for of 和for in區別？

Js中for in 和for of的區別

for in 和 for of 的對比

js中的for in 和 for of 的區別

js中for of 和for in區別？

Js中for in 和for of的區別

for in 和 for of 的對比

相關推薦