for循环、for-in、forEach、for-of四大循环
2018-02-12 17:50
651 查看
平时自己在写一些小栗子的时候,用到的基本上是for循环,因为在学专业课(C,C++,JAVA,...)的时候用的最多的就是for循环,不过for循环的效率也是比较高的。
但是for循环在写的时候,涉及到length,index这几个变量,使用起来个人觉得还是有点复杂。
ECMAScript对象的属性没有顺序,因此通过for-in循环输出的属性名的顺序是不可预测的,所有属性都会被返回一次,但是返回的顺序因浏览器不同。
之前如果要迭代的对象的变量值为null或undefined,for-in语句会抛出错误。但是ECMAScript5更正了这一行为:对这种情况不再抛出错误,而只是不执行循环体。为了保证最大限度的兼容,建议使用for-in循环之前,先检测确认该对象的值不是null或undefined。
每个Array也有一个length属性,导致看起来像是一个数组。但是length这个属性是不可枚举的,所以在使用for-in循环遍历Array时,没有length。
即使不在Array中添加新的属性,也不会只输出数组中的内容。
// array[0]:1
// array[1]:2
// array[2]:3
// array[name]:hello world
// array[father]:xiaoming
for-in循环的每次迭代操作会同时搜索实例或者原型属性,for-in循环的每次迭代会产生很多开销。除非明确要迭代一个属性数量未知的对象,否则应该避免使用for-in循环
// a 0 (11) ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
// b 3 (11) ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
// c 10 (11) ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
forEach循环不会遍历原型链上的属性
为什么要引进for-of循环呢?
forEach不能break和return
for-in缺点更加明显,不仅会遍历数组中的元素,还会遍历自定义的属性,甚至把原型链上的属性都被访问到。而且遍历数组元素的顺序可能是随机的。
for-of循环可以干什么呢?
跟forEach相比,可以正确响应break,continue,return
for-of循环不仅支持数组,还支持大多数类数组对象,例如DOM nodelist对象
for-of循环也支持字符串遍历,将字符串视为一系列的Unicode字符来进行遍历
for-of也支持Map和Set(两者均为ES6中新增的类型)遍历。
这是最直接、最简洁的遍历数组的方法
这个方法避开了for-in循环的所有缺陷
与forEach不同的是,可以使用break,continue,return语句
不仅可以遍历数组,还可以遍历类数组对象和其他可迭代对象。
但是需要注意的是for-of不遍历普通对象,ES6引进的另一个方式也能实现遍历数组的值,那就是Iterator。
这里我只是简单总结了一点点,自己也认真看了书上的知识,推荐一篇写的很好的。https://zhuanlan.zhihu.com/p/23812134?utm_source=tuicool&utm_medium=referral
但是for循环在写的时候,涉及到length,index这几个变量,使用起来个人觉得还是有点复杂。
for-in循环
最近自己在复习高程的时候,也看了看for-in循环,这个循环是特别针对遍历对象属性的。ECMAScript对象的属性没有顺序,因此通过for-in循环输出的属性名的顺序是不可预测的,所有属性都会被返回一次,但是返回的顺序因浏览器不同。
之前如果要迭代的对象的变量值为null或undefined,for-in语句会抛出错误。但是ECMAScript5更正了这一行为:对这种情况不再抛出错误,而只是不执行循环体。为了保证最大限度的兼容,建议使用for-in循环之前,先检测确认该对象的值不是null或undefined。
Array的真相
在JavaScript中,所有的东西可可以看作是一个对象,Array也是一个对象,Array的索引就是属性名。实际上,Array的索引也不是Number类型,而是String类型的。每个Array也有一个length属性,导致看起来像是一个数组。但是length这个属性是不可枚举的,所以在使用for-in循环遍历Array时,没有length。
即使不在Array中添加新的属性,也不会只输出数组中的内容。
Array.prototype.father = "xiaoming"; const arr = [1,2,3]; arr.name = "hello world"; let index; for(index in arr){ console.log("array["+index+"]:"+arr[index]); }
// array[0]:1
// array[1]:2
// array[2]:3
// array[name]:hello world
// array[father]:xiaoming
for-in循环的每次迭代操作会同时搜索实例或者原型属性,for-in循环的每次迭代会产生很多开销。除非明确要迭代一个属性数量未知的对象,否则应该避免使用for-in循环
forEach循环
forEach循环是js高程上数组的一个方法,还有几个方法参看其他几个迭代方法const arr = []; arr[0] = "a"; arr[3] = "b"; arr[10] = "c"; arr.name = "Hello world"; arr.forEach((data, index, array) => { console.log(data, index, array); //这里的index是Number类型,这里并没有遍历到name属性 });
// a 0 (11) ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
// b 3 (11) ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
// c 10 (11) ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
forEach循环不会遍历原型链上的属性
for-of循环
这个是ES6新增的一个方法,用于解决for-in用来遍历数组出现的问题。为什么要引进for-of循环呢?
forEach不能break和return
for-in缺点更加明显,不仅会遍历数组中的元素,还会遍历自定义的属性,甚至把原型链上的属性都被访问到。而且遍历数组元素的顺序可能是随机的。
for-of循环可以干什么呢?
跟forEach相比,可以正确响应break,continue,return
for-of循环不仅支持数组,还支持大多数类数组对象,例如DOM nodelist对象
for-of循环也支持字符串遍历,将字符串视为一系列的Unicode字符来进行遍历
for-of也支持Map和Set(两者均为ES6中新增的类型)遍历。
这是最直接、最简洁的遍历数组的方法
这个方法避开了for-in循环的所有缺陷
与forEach不同的是,可以使用break,continue,return语句
不仅可以遍历数组,还可以遍历类数组对象和其他可迭代对象。
但是需要注意的是for-of不遍历普通对象,ES6引进的另一个方式也能实现遍历数组的值,那就是Iterator。
这里我只是简单总结了一点点,自己也认真看了书上的知识,推荐一篇写的很好的。https://zhuanlan.zhihu.com/p/23812134?utm_source=tuicool&utm_medium=referral
相关文章推荐
- JavaScript里的循环方法:forEach,for-in,for-of
- 循环遍历总结(for/foreach/forin/forof/map/some/filter)
- JavaScript中forEach、for-in、for-of循环的比较
- 使用for...of 优点,代替for...in,forEach和for循环
- JavaScript里的循环方法:forEach,for-in,for-of
- JavaScript里的循环方法之forEach,for...in,for...of
- JavaScript里的循环方法:forEach,for-in,for-of
- [置顶] 浅谈for,for-in,forEach,for-of几种循环
- for...in和for...of循环以及forEach方法
- JavaScript里的循环方法:forEach,for-in,for-of
- javaScript循环总结(for,for-in,for-of,forEach,map,filter,every,reduce,reduceRight)
- js中的循环遍历数组中的元素,ES6(for-of)、ES5(forEach、for-in)、通用(for(i=0;i<length;i++))
- 全面解析JavaScript里的循环方法之forEach,for-in,for-of
- 全面解析JavaScript里的循环方法之forEach,for-in,for-of
- for ... of循环和for ... in循环的区别
- for循环与for...in循环的区别
- 详谈js中标准for循环与foreach(for in)的区别
- Effective JavaScript Item 49 对于数组遍历,优先使用for循环,而不是for..in循环
- Effective JavaScript Item 49 对于数组遍历,优先使用for循环,而不是for..in循环
- [Effective JavaScript 笔记]第49条:数组迭代要优先使用for循环而不是for...in循环