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里还有一种循环方法:forin

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跟普通的对象属性不一样,是重要的数值序列指标。

总之,forin是用来循环带有字符串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相关推荐

  1. Javascript里的sleep()方法

    Javascript里的sleep()方法 很多编程语言里都有sleep(),delay()等方法,它能让我们的程序不那么着急的去执行下一步操作,而是延迟.等待一段时间.软件开发中经常会遇到需要这样的 ...

  2. JavaScript(15) jquery循环方法

    $.each(object,function(index,e){  ...  });         object --> 需要遍历的对象或数组     index  --> 索引     ...

  3. php break foreach_PHP foreach()跳出本次或当前循环与终止循环方法

    PHPforeach()跳出本次或当前循环与终止循环方法 PHP中用foreach()循环中,想要在循环的时候,当满足某个条件时,想 $arr = array('a','b','c','d','e') ...

  4. javascript 终极循环方法for... of ..推荐

    js目前有很多的循环方法,如for, forEach,  for .. in,  for of 等等,而在ES6里面,我们又增加了一些数据结构,比如set,map,Symbol等. 那么我们该选取哪一 ...

  5. js循环方法之 for forEach each map

    前端开发 少不了使用 js循环. 循环方法太多了 ,选择一多就让选择困难症的人头疼 .用的最多的就是for和foreach ,但一直搞不懂就说为什么要用它而不用它 ,就查查资料总结记录下,希望以后再也 ...

  6. 常用的循环遍历的方法---for循环、forEach循环、$(‘‘).each()、$.each()

    1.for循环 <script>var arr = ['nick','freddy','mike','james']; for(var index = 0, len=arr.length; ...

  7. javascript调用Flash里对象的方法(函数)搞了五个小时。

    搞了几个小时后,才发现,之前走的路是错的. 今天在Firefox浏览器上测试一个javascript调用Flash中的一个对象的方法时遇到问题了, 一搞就整整搞了一个下午. 我记得之前我用Flash8 ...

  8. 数组常见的遍历循环方法、数组的循环遍历的效率对比

    1 遍历数组的方法 1-1.for / while 最普通的循环 效率最高 兼容ie6 tips:for循环更适用于循环的开始和结束已知,循环次数固定的场合:while循环更适合于条件不确定的场合 1 ...

  9. Javascript中for循环

    在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循 ...

最新文章

  1. java判断一个数是不是质数(素数)
  2. PhoneGap工作原理及需改进的地方(转)
  3. java异常——异常分类+声明已检查异常+如何抛出异常+自定义异常类
  4. [vue] vue生命周期的作用是什么?
  5. JMS与Spring之二(用message listener container异步收发消息)
  6. ASP.NET MVC 5调用其他Action
  7. 读《人月神话》有感2
  8. 前端实现街道地图_来自法国的注重保护个人隐私的开源地图
  9. html两个部分组成部分组成,html页面由哪几部分组成
  10. Andriod获取本机ip地址
  11. 欧洲批准最强粒子对撞机计划,造价210亿欧元,全长100公里,耗资巨大引争议...
  12. ARM架构——转自维基百科
  13. 动态加载listvi
  14. 2014年终总结,我决定要实现的三个目标
  15. iOS TouchID指纹验证
  16. linux poodle漏洞,Claws Mail 3.11.0发布 修复了POODLE 漏洞
  17. ie 无人操作自动关闭_为什么一打开IE浏览器就自动关闭解决办法 IE浏览器打开后马上自动关闭了如何办...
  18. Windows家庭版如何打开本地组策略编辑器
  19. css实现人走路效果,如何使用纯CSS实现一个人独自行走的动画效果(附源码)
  20. 应用层读写i2c从设备寄存器

热门文章

  1. 前端二十七:四彩边框
  2. mybaits二十三:二级缓存
  3. 汇编: 使用ds data
  4. springboot2自定义HttpTraceRepository
  5. 五种js判断是否为整数类型方式
  6. R有序因子和无序因子(4)
  7. 现代软件工程 第十六章 【IT 行业的创新】练习与讨论
  8. 外部表External table
  9. Node.js 使用webpack-dev-server工具运行项目实现自动打包编译的功能
  10. 那传说中的P、NP以及NPC问题