JavaScript里的循环方法:forEach,for-in,for-of
2019独角兽企业重金招聘Python工程师标准>>>
JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的:
for (var index = 0; index < myArray.length; index++) {console.log(myArray[index]);
}
自从JavaScript5起,我们开始可以使用内置的forEach
方法:
myArray.forEach(function (value) {console.log(value);
});
写法简单了许多,但也有短处:你不能中断循环(使用break
语句或使用return
语句。
JavaScript里还有一种循环方法:for
–in
。
for-in循环实际是为循环”enumerable“对象而设计的:
var obj = {a:1, b:2, c:3};for (var prop in obj) {console.log("obj." + prop + " = " + obj[prop]); }// 输出: // "obj.a = 1" // "obj.b = 2" // "obj.c = 3"
你也可以用它来循环一个数组:
for (var index in myArray) { // 不推荐这样console.log(myArray[index]);
}
不推荐用for-in来循环一个数组,因为,不像对象,数组的index
跟普通的对象属性不一样,是重要的数值序列指标。
总之,for
–in
是用来循环带有字符串key的对象的方法。
for-of循环
JavaScript6里引入了一种新的循环方法,它就是for-of循环,它既比传统的for循环简洁,同时弥补了forEach和for-in循环的短板。
我们看一下它的for-of的语法:
for (var value of myArray) {console.log(value);
}
for-of的语法看起来跟for-in很相似,但它的功能却丰富的多,它能循环很多东西。
for-of循环使用例子:
循环一个数组(Array
):
let iterable = [10, 20, 30];for (let value of iterable) {console.log(value); } // 10 // 20 // 30
我们可以使用const
来替代let
,这样它就变成了在循环里的不可修改的静态变量。
let iterable = [10, 20, 30];for (const value of iterable) {console.log(value); } // 10 // 20 // 30
循环一个字符串:
let iterable = "boo";for (let value of iterable) {console.log(value); } // "b" // "o" // "o"
循环一个类型化的数组(TypedArray
):
let iterable = new Uint8Array([0x00, 0xff]);for (let value of iterable) {console.log(value); } // 0 // 255
循环一个Map
:
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);for (let [key, value] of iterable) {console.log(value); } // 1 // 2 // 3for (let entry of iterable) {console.log(entry); } // [a, 1] // [b, 2] // [c, 3]
循环一个 Set
:
let iterable = new Set([1, 1, 2, 2, 3, 3]);for (let value of iterable) {console.log(value); } // 1 // 2 // 3
循环一个 DOM collection
循环一个DOM collections,比如NodeList
,之前我们讨论过如何循环一个NodeList,现在方便了,可以直接使用for-of循环:
// Note: This will only work in platforms that have // implemented NodeList.prototype[Symbol.iterator] let articleParagraphs = document.querySelectorAll("article > p");for (let paragraph of articleParagraphs) {paragraph.classList.add("read"); }
循环一个拥有enumerable属性的对象
for–of循环并不能直接使用在普通的对象上,但如果我们按对象所拥有的属性进行循环,可使用内置的Object.keys()方法:
for (var key of Object.keys(someObject)) {console.log(key + ": " + someObject[key]); }
循环一个生成器(generators)
我们可循环一个生成器(generators):
function* fibonacci() { // a generator functionlet [prev, curr] = [0, 1];while (true) {[prev, curr] = [curr, prev + curr];yield curr;} }for (let n of fibonacci()) {console.log(n);// truncate the sequence at 1000if (n >= 1000) {break;} }
转载于:https://my.oschina.net/u/200350/blog/700724
JavaScript里的循环方法:forEach,for-in,for-of相关推荐
- Javascript里的sleep()方法
Javascript里的sleep()方法 很多编程语言里都有sleep(),delay()等方法,它能让我们的程序不那么着急的去执行下一步操作,而是延迟.等待一段时间.软件开发中经常会遇到需要这样的 ...
- JavaScript(15) jquery循环方法
$.each(object,function(index,e){ ... }); object --> 需要遍历的对象或数组 index --> 索引 ...
- php break foreach_PHP foreach()跳出本次或当前循环与终止循环方法
PHPforeach()跳出本次或当前循环与终止循环方法 PHP中用foreach()循环中,想要在循环的时候,当满足某个条件时,想 $arr = array('a','b','c','d','e') ...
- javascript 终极循环方法for... of ..推荐
js目前有很多的循环方法,如for, forEach, for .. in, for of 等等,而在ES6里面,我们又增加了一些数据结构,比如set,map,Symbol等. 那么我们该选取哪一 ...
- js循环方法之 for forEach each map
前端开发 少不了使用 js循环. 循环方法太多了 ,选择一多就让选择困难症的人头疼 .用的最多的就是for和foreach ,但一直搞不懂就说为什么要用它而不用它 ,就查查资料总结记录下,希望以后再也 ...
- 常用的循环遍历的方法---for循环、forEach循环、$(‘‘).each()、$.each()
1.for循环 <script>var arr = ['nick','freddy','mike','james']; for(var index = 0, len=arr.length; ...
- javascript调用Flash里对象的方法(函数)搞了五个小时。
搞了几个小时后,才发现,之前走的路是错的. 今天在Firefox浏览器上测试一个javascript调用Flash中的一个对象的方法时遇到问题了, 一搞就整整搞了一个下午. 我记得之前我用Flash8 ...
- 数组常见的遍历循环方法、数组的循环遍历的效率对比
1 遍历数组的方法 1-1.for / while 最普通的循环 效率最高 兼容ie6 tips:for循环更适用于循环的开始和结束已知,循环次数固定的场合:while循环更适合于条件不确定的场合 1 ...
- Javascript中for循环
在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循 ...
最新文章
- java判断一个数是不是质数(素数)
- PhoneGap工作原理及需改进的地方(转)
- java异常——异常分类+声明已检查异常+如何抛出异常+自定义异常类
- [vue] vue生命周期的作用是什么?
- JMS与Spring之二(用message listener container异步收发消息)
- ASP.NET MVC 5调用其他Action
- 读《人月神话》有感2
- 前端实现街道地图_来自法国的注重保护个人隐私的开源地图
- html两个部分组成部分组成,html页面由哪几部分组成
- Andriod获取本机ip地址
- 欧洲批准最强粒子对撞机计划,造价210亿欧元,全长100公里,耗资巨大引争议...
- ARM架构——转自维基百科
- 动态加载listvi
- 2014年终总结,我决定要实现的三个目标
- iOS TouchID指纹验证
- linux poodle漏洞,Claws Mail 3.11.0发布 修复了POODLE 漏洞
- ie 无人操作自动关闭_为什么一打开IE浏览器就自动关闭解决办法 IE浏览器打开后马上自动关闭了如何办...
- Windows家庭版如何打开本地组策略编辑器
- css实现人走路效果,如何使用纯CSS实现一个人独自行走的动画效果(附源码)
- 应用层读写i2c从设备寄存器