for in,Object.keys()與for of的區別

for in

• for in一般用於遍歷對象的屬性；
• 作用於數組的for in除了會遍歷數組元素外，還會遍歷自定義可枚舉的屬性，以及原型鏈上可枚舉的屬性；
• 作用於數組的for in的遍歷結果是數組的索引，且都為字符串型，不能用於運算；
• 某些情況下，可能按照隨機順序遍歷數組元素；

 Array.prototype.sayLength = function(){  2    console.log(this.length);  3  }  4  let arr = ['a','b','c','d'];  5  arr.name = '數組';  6  Object.defineProperties(arr,{  7  type:{  8                 value:true,  9                 writable:true, 10                 enumerable:true
 } 12  }); 13  for(let i in arr){ 14      console.log(i);//0,1,2,3,name,type,sayLength
  }

 

 

---

 

Object.keys()

• 遍歷結果為由對象自身可枚舉屬性組成的數組，數組中的屬性名排列順序與使用for in循環遍歷該對象時返回的順序一致；
• 與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

• ES6中添加的循環語法；
• for of支持遍歷數組、類對象（例如DOM NodeList對象）、字符串、Map對象、Set對象；
• for of不支持遍歷普通對象，可通過與Object.keys()搭配使用遍歷；（見示例二）
• for of遍歷后的輸出結果為數組元素的值；
• 搭配實例方法entries()，同時輸出數組內容和索引；（見示例三）
  

示例一：

Array.prototype.sayLength = function(){  2  console.log(this.length);  3}  4  let arr = ['a','b','c','d'];  5  arr.name = '數組';  6  Object.defineProperties(arr,{  7  type:{  8        value:true,  9        writable:true, 10        enumerable:true
 } 12 }); 13  for(let i of arr){ 14      console.log(i);//a,b,c,d
 }

 示例二：

var person={
    name:'coco',
    age:22,
    locate:{
        country:'China',
        city:'beijing',
    }
}
for(var key of Object.keys(person)){
    //使用Object.keys()方法獲取對象key的數組
    console.log(key+": "+person[key]);//name: coco,age: 22,locate: [object Object]
}

示例三：

let arr3 = ['a', 'b', 'c'];
        for (let [index, val] of arr3.entries()) {
            console.log(index + ':' + val);//0:a 1:b 2:c
        }

PS：讓jquery對象支持for of遍歷

// 因為jQuery對象與數組相似
// 可以為其添加與數組一致的迭代器方法

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

 

 

 

 

 

 

注：本文部分內容來自以下鏈接內容

MDN web docs

深入淺出ES6（二）

杜培東的博客