废话不多说,先上表格对比。
方法 | 可遍历对象 | 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