遍历方法 for、for in、for of、forEach、map的区别

废话不多说，先上表格对比。

方法	可遍历对象	ES	index OR key的类型	自定义属性	原型链上的自定义属性
for	数组、字符串	-	number	不可遍历	不可遍历
for in	数组、字符串、对象	ES5	string	可遍历	可遍历
for of	数组、字符串	ES6	-	不可遍历	不可遍历
forEach	数组	ES5	number	不可遍历	不可遍历
map	数组	ES5	number	不可遍历	不可遍历

for in 遍历，根据key遍历
根据属性名遍历所以key的类型是string，遍历顺序也可能不是实际数组的顺序。
遍历数组时如果给数组增加了自定义属性，也会把自定义属性遍历出来，所以for in更适合遍历对象。
如果对象原型上和原型链的对象原型上有自定义属性都会遍历出来，当不想遍历原型链的属性时可已使用hasOwnProperty过滤。注意：hasOwnProperty过滤的是自身以外的属性

for (const key in arr) {
    if (arr.hasOwnProperty(key)) { // 这样就可以过滤掉原型链上的可枚举属性了
        console.log(key, arr[key]);
    }
}

for of 遍历， 根据值遍历
用来弥补for in在遍历时不能根据值遍历的不足。
由于是ES6，兼容性非常不好。
for (const iterator of obj) { console.log(iterator); }

forEach 遍历，根据index遍历
和for项目forEach除了写法没有任何优势。
forEach遍历是从头到尾遍历，没有中途跳出的方法，如：for遍历 的break。
想能上 for>forEach。
arr.forEach((val, i, arr) => { console.log(val); });

map 遍历，根据index遍历
和forEach相比，map可以返回一个新数组，新数组的内容是回调函数的返回值。
可以用来克隆数组。
arr.map((val, i, arr) => { return val * 2; });

本文内容未经过校验，如有错误欢迎指出。
欢迎转载，但请注明出处。
https://www.jianshu.com/p/e8e04e33fa4d