摘要：而的解析引擎遵循的是較老的第三版規范，屬性遍歷順序由屬性構建的順序決定。將屬性設置為不可枚舉結語這篇文章希望能讓大家更加理解中的遍歷，寫的不好多多見諒并指出

JavaScript中對象的屬性分為兩種： 數據屬性 和 訪問器屬性 。

根據具體的上下文環境的不同，又可以將屬性分為： 原型屬性 和 實例屬性 。

原型屬性 是定義在對象的原型prototype 中的屬性，

實例屬性 一方面來自構造的函數中，然后就是構造函數實例化后添加的新屬性。

JavaScript中遍歷一個對象的屬性并不太簡單，主要有兩個原因：

JavaScript中的對象通常都處在某個原型鏈中，它會從一個或多個的上層原型上繼承一些屬性

JavaScript中的屬性不光有值，它還有一些除了值以外的其他特性，其中一個影響屬性遍歷的特性就是Enumerable(一個屬性描述符) ，如果該值為 true ，則這個屬性是可枚舉的，否則反之

屬性描述符

屬性描述符 主要有兩種形式：數據描述符和存取描述符。

使用Object.getOwnPropertyDescriptor 與 Object.getOwnPropertyDescriptors兩個方法獲取對象的屬性描述符。

var obj = {
  name: "10",
  _age: 25,
  get age(){
    return this._age;
  },
  set age(age){
    if(age<1){
      throw new Error("Age must be more than 0");
    }else{
      this._age = age;
    }
  }
};

var des = Object.getOwnPropertyDescriptors(obj);
console.log(des);
/**
 * des: {
 *  name: {
 *    configurable: true,
 *    enumerable: true,
 *    value: "10",
 *    writable: true,
 *    __proto__: Object
 *  },
 *  _age: {
 *    configurable: true,
 *    enumerable: true,
 *    value: 25,
 *    writable: true,
 *    __proto__: Object
 *  },
 *  age: {
 *    configurable: true,
 *    enumerable: true,
 *    get: f age(),
 *    set: f age(age),
 *    __proto__: Object
 *  },
 *  __proto__: Object
 * }
*/

value

該屬性的值(僅針對數據屬性描述符有效)

writable

當writable屬性設置為false時，該屬性被稱為“不可寫”。它不能被重新分配。

get

獲取該屬性的訪問器函數（getter）。如果沒有訪問器， 該值為undefined。(僅針對包含訪問器或設置器的屬性描述有效)

set

獲取該屬性的設置器函數（setter）。 如果沒有設置器， 該值為undefined。(僅針對包含訪問器或設置器的屬性描述有效)

configurable

configurable特性表示對象的屬性是否可以被刪除，以及除writable特性外的其他特性是否可以被修改。

enumerable

enumerable定義了對象的屬性是否可以在 for...in 循環和 Object.keys() 中被枚舉。

name、_age擁有 "configurable"、"enumerable"、"value"、"writable"四個屬性描述符，統稱數據描述符

age擁有"configurable"、"enumerable"、"get"、"set"四個屬性描述符，統稱存取描述符

對象的屬性描述符，可以通過Object.defineProperty和Object.defineProperties來修改(configurable為true的條件下)

遍歷自身及原型鏈上所有可枚舉的屬性

使用 for...in 循環遍歷對象屬性時返回的屬性會因為各個 瀏覽器不同 導致對象屬性遍歷的順序有可能不是當初構建時的順序。

Chrome Opera 的 JavaScript 解析引擎遵循的是新版 ECMA-262 第五版規范。因此，使用 for-in 語句遍歷對象屬性時遍歷書序并非屬性構建順序。而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是較老的 ECMA-262 第三版規范，屬性遍歷順序由屬性構建的順序決定。

for-in 語句無法保證遍歷順序，應盡量避免編寫依賴對象屬性順序的代碼。如果想順序遍歷一組數據，請使用數組并使用 for 語句遍歷。

var Animal = function({name="none", age=3, weight=80}={}){
  this.name = name;
  this.age = age;
  this.weight = weight;
}

Animal.prototype = {
  color: "red"
}

var dog = new Animal()

// 將weight屬性設置為 不可枚舉
Object.defineProperty(dog, "weight", {
  enumerable: false
})

for(let i in dog){
  console.log(n);
}

//原型鏈上的color同樣被遍歷出來了，并且由于weight屬性被設置成了enumerable:false，所以不可被遍歷
//name 
//age 
//color

一個數據結構只要部署了Symbol.iterator屬性，就被視為具有 iterator 接口，就可以用for...of循環遍歷它的成員。也就是說，for...of循環內部調用的是數據結構的Symbol.iterator方法。

for...of循環可以使用的范圍包括數組、Set 和 Map 結構、某些類似數組的對象（比如arguments對象、DOM NodeList 對象）、Generator 對象，以及字符串。

如果不太清楚iterator，請去看看阮一峰大神的這篇文章，里面關于for...of以及iterator都講的非常詳細！

其實for...of和for...in都是迭代一些東西，它們之間的主要區別在于它們的迭代方式。

for...in語句以原始插入順序迭代對象的可枚舉屬性。

for...of 語句遍歷可迭代對象定義要迭代的數據。

請仔細看以下實例，理解其中的區別

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); //  0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); //  0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); //  3, 5, 7
}

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {}; 

let iterable = [3, 5, 7]; 
iterable.foo = "hello";

在這段代碼里面，由于繼承和原型鏈，對象iterable繼承屬性objCustom和arrCustom。

for (let i in iterable) {
  console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom" 
}

在這段代碼里面，此循環僅以原始插入順序記錄iterable 對象的可枚舉屬性。它不記錄數組元素3, 5, 7 或hello，因為這些不是枚舉屬性。但是它記錄了數組索引以及arrCustom和objCustom（為何記錄arrCustom和objCustom在本文for...in里面有講過）。

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); //  0, 1, 2, "foo"
  }
}

hasOwnProperty()用來檢查找到的枚舉屬性是不是對象自己的（即是不是繼承的）

for (let i of iterable) {
  console.log(i); //  3, 5, 7 
}

該循環迭代并記錄iterable作為可迭代對象定義的迭代值，這些是數組元素 3, 5, 7，而不是任何對象的屬性。

Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in 循環遍歷該對象時返回的順序一致 （兩者的主要區別是 一個 for-in 循環還會枚舉其原型鏈上的屬性）。

Object.getOwnPropertyNames()方法返回一個由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作為名稱的屬性）組成的數組,此方法不會獲取原型鏈上的屬性。

var Animal = function({name="", age=1, weight=70}={}){
  this.name = name;
  this.age = age;
  this.weight = weight;
}

Animal.prototype = {
  type: "Animal"
}

var dog = new Animal()

// 將height屬性設置為 不可枚舉
Object.defineProperty(dog, "weight", {
  enumerable: false
})

var keys = Object.getOwnPropertyNames(dog);
console.log(keys)
// ["name", "age", "weight"]

這篇文章希望能讓大家更加理解js中的遍歷，寫的不好多多見諒并指出！