深刻理解枚舉屬性與for-in和for-of

首先要分清什麼是可枚舉屬性，什麼是不可枚舉屬性

1.可枚舉屬性

在JavaScript中，對象的屬性分爲可枚舉和不可枚舉之分，它們是由屬性的enumerable值決定的。可枚舉性決定了這個屬性可否被for…in查找遍歷到。

1.1怎麼判斷屬性是否可枚舉

js中基本包裝類型的原型屬性是不可枚舉的,如Object, Array, Number等，若是你寫出這樣的代碼遍歷其中的屬性：

var num = new Number();
for(var pro in num) {
    console.log("num." + pro + " = " + num[pro]);
}

它的輸出結果會是空。這是由於Number中內置的屬性是不可枚舉的，因此不能被for…in訪問到。

Object對象的propertyIsEnumerable()方法能夠判斷此對象是否包含某個屬性，而且這個屬性是否可枚舉。

須要注意的是：若是判斷的屬性存在於Object對象的原型內，無論它是否可枚舉都會返回false。

1.2枚舉性的做用

舉個例子：

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

function Person() {
    this.name = "KXY";
}
Person.prototype = {
    constructor: Person,
    job: "student",
};
 
var kxy = new Person();
Object.defineProperty(kxy, "sex", {
    value: "female",
    enumerable: false
});

則用for in 來遍歷的話

for(var pro in kxy) {
    console.log("kxy." + pro + " = " + kxy[pro]);
}
// kxy.name = KXY
// kxy.constructor = function Person() {
// this.name = "KXY";
// }
// kxy.job = student
// kxy.objCustom = function () { }

在這個kxy實例對象之中，咱們能夠發現咱們能夠遍歷出四個可枚舉屬性，這個單純看的話，很難理解爲何會有這四個屬性，因而我畫了張圖，給你們解釋下，紅色部分表示不可枚舉屬性，綠色表示可枚舉屬性。這張圖呢若是一看一臉懵逼，你們能夠去參考《JavaScript高級程序設計》這本書的原型講解的那一部分，我以前也發過隨筆單獨作了原型那一部分的筆記，也能夠去翻一翻。

其中sex不能夠枚舉是由於設置了enumberle這個屬性，而object是由於他是JS基本包裝類，因此他的任何屬性都不能夠被枚舉。

咱們for-in的事這個實例，他有proto和sex這兩個屬性，sex不行，因此順着__proto__是往下翻，能夠接收到他的原型的constructor， job， __proto__其中job能夠直接枚舉，而後剩下兩個constructor和__proto__能夠接着往下找，constructor是鏈接着構造函數，構造函數裏有一個name因此將他輸出，而後這一條路結束了。而後看原型的__proto__就是Object，由於他是JS的基本包裝類，因此他裏面的任何自帶屬性都不能被枚舉,而咱們自定義的objCustom方法是能夠被枚舉的，他不是自帶的屬性。因此綜上所述，最後迭代出四個屬性。因此for-in的大體過程就是這樣。

1.3 Object.keys() 和JSON.stringify()

這兩個方法也能夠幫助咱們判斷屬性是否能夠枚舉。

首先 Object.keys() 這個方法是專門用來返回一個對象的全部可枚舉屬性的字符串的。因此用它能夠達到和for-in近似的效果。惟一不一樣的就是不能取到全部屬性的值。

而JSON.stringify()這個只能stringify可枚舉屬性的值，若是不可枚舉的是不會顯示的。

2.for-in和for-of

2.1for-in

上面講了那麼多，感受for-in講的已經差很少了，for-in的主要做用就是迭代一個對象裏的可枚舉屬性。

用法是：

for (variable in object) {...}

• variable

  在每次迭代時，將不一樣的屬性名分配給變量。

• object

  被迭代枚舉其屬性的對象。

實例：

<script>
    function Person() {
      this.name = "KXY";
    }

    var kxy = new Person();
    for (var pro in kxy) {
      kxy[pro] = 'yxk'
      console.log("kxy." + pro + " = " + kxy[pro]);
    }
    console.log(kxy);
  </script>

結果：

值得一提的是，for-in 和for-of在迭代的過程當中若是修改了屬性的值，會直接做用在對象上。可是不推薦這麼作由於這裏並不保證是否一個被添加的屬性在迭代過程當中會被訪問到，不保證一個修改後的屬性（除非是正在被訪問的）會在修改前或者修改後被訪問，不保證一個被刪除的屬性將會在它被刪除以前被訪問。

另外for-in不推薦去迭代一個數組，由於數組索引只是具備整數名稱的枚舉屬性，而且與通用對象屬性相同。不能保證for ... in將以任何特定的順序返回索引。

2.1.1 hasOwnProperty()

asOwnProperty() 方法會返回一個布爾值，指示對象自身屬性中是否具備指定的屬性（也就是是否有指定的鍵）

最開始的枚舉屬性的例子for-in不只會將實例的屬性迭代，並且會將原型上的屬性一併迭代，若是隻想迭代自身屬性的話，那麼就要配合上hasOwnProperty()這個屬性了。

實例：

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

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

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

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

// 結果：
// logs 0, 1, 2, "foo", "arrCustom", "objCustom"

2.2 for-of

for...of語句在可迭代對象上（包括Array,Map,Set,String,TyedArray,arguments對象等等）上建立一個迭代循環，調用自定義迭代鉤子，併爲每一個不一樣屬性的值執行語句

用法

for (variable of iterable) {
    //statements
}

• variable

在每次迭代中，將不一樣屬性的值分配給變量。

• iterable

被迭代枚舉其屬性的對象。

for-of一樣能夠直接修改迭代對象的值，並且不像for-in會去迭代可枚舉屬性的值。

For-of除了遍歷最基本的數組，還常常用在迭代字符串上。

具體更多的方法就參考文檔吧，for-of感受並無什麼難點。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of
更多的遍歷數組能夠看我上一篇隨筆：http://www.javashuo.com/article/p-dezyiili-my.html

就寫這麼多吧，只是很簡單的總結，若是有什麼問題請你們指正。