首先要分清什么是可枚舉屬性，什么是不可枚舉屬性
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
更多的遍歷數組可以看我上一篇隨筆：https://www.cnblogs.com/wangzirui98/p/11226781.html
就寫這么多吧，只是很簡單的總結，如果有什么問題請大家指正。