for in,Object.keys()與for of的用法與區別
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的用法與區別