Array.prototype.sayLength=function(){
console.log(this.length);
}
let arr = ['a','b','c','d'];
arr.name='數組';
Object.defineProperties(arr,{
type:{
value:true,
writable:true,
enumerable:true
}
})
// for in 一般用于遍歷對象的屬性；
1.作用于數組的for in除了會遍歷數組元素外,還會遍歷自定義可枚舉的屬性,以及原型鏈上可枚舉的屬性;
2.作用于數組的for in的遍歷結果是數組的索引,且都為字符串型,不能用于運算;
3.某些情況下,可能按照隨機順序遍歷數組元素;
for(let i in arr){ //輸出的都是屬性
console.log(i) //0,1,2,3,name,type,sayLength
}

Object.keys()
1.遍歷結果為對象自身可枚舉屬性組成的數組，數組中的屬性名排列順序與使用for in循環遍歷該對象時返回的順序一致，
2.與for in區別在于不能遍歷出原型鏈上的屬性；
*

Array.prototype.sayLength=function(){

console.log(this.length);
}

let arr=['a','b','c','d'];
arr.name = '數組';

Object.defineProperties(arr,{
type:{
value:true,
writable:true,
enumerable:true
}
});

var keys = Object.keys(arr);
console.log(keys); //)["0", "1", "2", "3", "name", "type"]

for of
1.es6中添加的循環語法；
// 2.for of支持遍歷數組、類對象(例如：DOM NodeList)、字符串、map對象、Set對象
3.for of不支持遍歷普通對象，可通過與Object.keys()搭配使用遍歷（例子2）;
4.for of 遍歷后的輸出結果為數組元素的值；
5搭配實例方法entries(),同時輸出數組內容弄和索引（例子2）
例子1

* */
Array.prototype.sayLength=function(){
console.log(this.length);
}

let arr= ['a','b','c','d'];
arr.name ='數組';
Object.defineProperties(arr,{
type:{
value:true,
writable:true,
enumerable:true
}
});

for(let i of arr){
console.log(i);// a,b,c,d
}

//例子2

var person={
name:'coco',
age:24,
locate:{
country:'china',
city:'beijing',
}
}

for(var key of Object.keys(person)){
//使用Object.keys()方法獲取對象key的數組
console.log(key+":"+person[key]);//name:coco age:24 locate:[object Object]

}

//例子3
let arr3=['a','b','c'];
for(let [index,val] of arr3.entries()){
console.log(index+":"+val);
}

//讓jquery對象支持for of遍歷
// 因為jQuery對象與數組相似
// 可以為其添加與數組一致的迭代器方法

** jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

總結

以上是生活随笔為你收集整理的for in,Object.keys()与for of的用法与区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。