廢話不多說，先上表格對比。
| 方法 | 可遍歷對象 | ES | index OR key的類型 | 自定義屬性 | 原型鏈上的自定義屬性 |
|---|---|---|---|---|---|
| for | 數(shù)組、字符串 | - | number | 不可遍歷 | 不可遍歷 |
| for in | 數(shù)組、字符串、對象 | ES5 | string | 可遍歷 | 可遍歷 |
| for of | 數(shù)組、字符串 | ES6 | - | 不可遍歷 | 不可遍歷 |
| forEach | 數(shù)組 | ES5 | number | 不可遍歷 | 不可遍歷 |
| map | 數(shù)組 | ES5 | number | 不可遍歷 | 不可遍歷 |
for in 遍歷，根據(jù)key遍歷
根據(jù)屬性名遍歷所以key的類型是string，遍歷順序也可能不是實際數(shù)組的順序。
遍歷數(shù)組時如果給數(shù)組增加了自定義屬性，也會把自定義屬性遍歷出來，所以for in更適合遍歷對象。
如果對象原型上和原型鏈的對象原型上有自定義屬性都會遍歷出來，當不想遍歷原型鏈的屬性時可已使用hasOwnProperty過濾。注意：hasOwnProperty過濾的是自身以外的屬性for (const key in arr) { if (arr.hasOwnProperty(key)) { // 這樣就可以過濾掉原型鏈上的可枚舉屬性了 console.log(key, arr[key]); } }
for of 遍歷， 根據(jù)值遍歷
用來彌補for in在遍歷時不能根據(jù)值遍歷的不足。
由于是ES6，兼容性非常不好。
for (const iterator of obj) { console.log(iterator); }
forEach 遍歷，根據(jù)index遍歷
和for項目forEach除了寫法沒有任何優(yōu)勢。
forEach遍歷是從頭到尾遍歷，沒有中途跳出的方法，如：for遍歷 的break。
想能上 for>forEach。
arr.forEach((val, i, arr) => { console.log(val); });
map 遍歷，根據(jù)index遍歷
和forEach相比，map可以返回一個新數(shù)組，新數(shù)組的內(nèi)容是回調(diào)函數(shù)的返回值。
可以用來克隆數(shù)組。
arr.map((val, i, arr) => { return val * 2; });
本文內(nèi)容未經(jīng)過校驗，如有錯誤歡迎指出。
歡迎轉(zhuǎn)載，但請注明出處。
http://www.itdecent.cn/p/e8e04e33fa4d
