[TOC] >[success] # for?...?in，for?...?of之間有什么區別 [內容來自30s](https://www.30secondsofcode.org/blog/s/javascript-for-in-for-of-foreach) [推薦系列](https://www.softwhy.com/article-9990-1.html) ~~~ 1.'for...in'用于迭代對象的所有'可枚舉'屬性，包括繼承的可枚舉屬性,?該迭代語句可用于數組字符串或普通對象， 但不能用于Map或Set對象 2.'for...of'用于'可迭代'對象，迭代其值而不是其屬性，該迭代語句可以與數組，字符串Map或Set對象一起使用， 但不能與普通對象一起使用。 ~~~ >[danger] ##### for...in 針對可枚舉 [Object.kes具有與for..in循環完全相同的行為](https://www.30secondsofcode.org/blog/s/eslint-refactor-for-in) ~~~ 1.Array：打印出來的是下角標 2.String：打印出來的是下角標 3.Object：打印的是'可枚舉'的屬性，這里要做個簡單說明關于'可枚舉'，可以使用getOwnPropertyDescriptor 來參看當前屬性是否可枚舉，通過es6 class 創建掛載到原型的方法也是不可枚舉的可以參考 'https://2ality.com/2015/10/enumerability-es6.html' 4.Map或Set :直接免疫都不走 ~~~ ~~~ // ---------針對數組使用 --------------------------- // js 數組本身就是一個為對象 因此打印的數組下角標 const list = ['a','b','c'] for(let prop in list){ console.log(prop) // 0, 1, 2 (array indexes) } // -------字符串打印的是對應字符的下角標 ------------ const str = 'abc' for(let prop in str){ console.log(prop) // 0, 1, 2 (string indexes) } // --------對象 可枚舉-------------- const obj = {a:1,b:2,c(){}} for(let prop in obj){ console.log(prop) // a, b, c (object property names) } // ------------es5 生成的對象特殊 ------------------ function Obj2(){ this.a = 1 this.b = 2 } Obj2.prototype.c = function(){} const obj2 = new Obj2() for(let prop in obj2){ console.log(prop) // a, b c(object property names) } // ------------class 生成的對象特殊 ------------------ class Obj1{ constructor(){ this.a = 1 this.b = 2 } c(){} } const obj1 = new Obj1() for(let prop in obj1){ console.log(prop) // a, b (object property names) } // -----------------set --------------------------- const set = new Set([1,2,3]) for(let prop in set){ console.log(prop) // 這里都不執行 } ~~~ >[danger] ##### for...of 針對可迭代 ~~~ 1.of 循環的是可迭代的對象，迭代是值而不是屬性，可以迭代數組，字符串Map或Set對象， 但不能與普通對象一起使用 ~~~ [關于更多](http://www.hmoore.net/cyyspring/more/1316856) ~~~ for (let val of ['a', 'b', 'c']) console.log(val); // a, b, c (array values) for (let val of 'str') console.log(val); // s, t, r (string characters) for (let val of {a: 1, b: 2, c: 3}) console.log(prop); // TypeError (not iterable) for (let val of new Set(['a', 'b', 'a', 'd'])) console.log(val); // a, b, d (Set values) ~~~ >[danger] ##### forEach 循環 ~~~ 1.forEach()是Array原型的一種方法，它允許您遍歷數組的元素，注意他是數組的方法'Symbol.iterator'配置 是無效的 ~~~ ~~~ ['a', 'b', 'c'].forEach( val => console.log(val) // a, b, c (array values) ); ['a', 'b', 'c'].forEach( (val, i) => console.log(i) // 0, 1, 2 (array indexes) ); ~~~