文档章节

JavaScript里的循环方法:forEach,for-in,for-of

鱼煎
 鱼煎
发布于 2016/06/25 11:00
字数 714
阅读 5
收藏 0

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
// 3

for (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 function
  let [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 1000
  if (n >= 1000) {
    break;
  }
}

本文转载自:

共有 人打赏支持
鱼煎
粉丝 5
博文 183
码字总数 37937
作品 0
深圳
技术主管
JavaScript基础——变量-运算符-流程控制语句

JavaScript是在客户端浏览器解释执行的语言,一个完整的 JavaScript 实现是由以下 3 个不同部分组成的: 1.ECMAScript:描述了该语言的语法和基本对象; 2.文档对象模型(Document Object M...

codejson
07/02
0
0
前端高频面试题 JavaScript篇

以下问题都来自于互联网前端面经分享,回答为笔者通过查阅资料加上自身理解总结,不保证解答的准确性,有兴趣讨论的同学可以留言或者私信讨论。 1.JS的异步机制? 2.闭包如何实现? 3.原型链、...

大雄的学习人生
06/25
0
0
如何有效实现前端压缩图片并上传功能

  随着现在手机的像素越来越高,很多照片动辄几兆甚至十几兆,上传后在服务器端压缩已经越来越不能满足当今的需求。这对于许多技术人员来说,处理起来这样的问题往往不知道该怎么下手,那么...

燚轩科技
04/23
0
0
[JavaScript]-Array构造的数组使用map为何失效?

[示例] 假设你需要生成一个从0到99的数组。你要怎么做呢?下面是一种解法: 看到这种使用传统的for循环的方式会有点不大习惯。事实上,各种高阶函数,像forEach, map, filter, reduce足以写出...

xiaoLoo
06/27
0
0
jQuery 操作 DOM 数组要注意什么?

DOM 数组本质上不是 Array,是 NodeList。 你可以通过 Array.prototype.slice.call(nodeList, 0) 把节点全部复制到 Array 再操作。 传说在 IE6 里面访问 nodeList.length 比较慢,所以建议先...

justjavac
2012/07/25
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

spring-boot | 日志

引言 好久不见,都还好吗? 大家都知道,我一般都是带来实用的东西,这次也一样,我们来试试项目开发中的日志处理。 理论知识 1、为什么要用日志?你是否因为项目出现问题,查找日志文件定位...

成都_小冯同学
14分钟前
0
0
dubbo下的补偿实现(一)

背景 由于前面几篇文章涉及的问题 分布式事务的思考 在我们微服务的场景下 各种本地事务都没有办法控制的很好。 A服务调用B服务 当B服务成功提交之后 A发生了异常 这种情况下要如何处理呢??...

Mr_Qi
23分钟前
2
0
HTML显示json字符串并且进行格式化

通过pre标签进行格式化展示,使用JSON.stringify()方法转换。 代码如下:   <html> <head> <title>HTML显示json字符串并且进行格式化</title> </head> <body> <p id="show_p">{ "name": "B......

writeademo
44分钟前
0
0
LNMP——php-fpm

php-fpm的pool •vim /usr/local/php/etc/php-fpm.conf //在[global]部分增加include并删除我们之前www池子 • include = etc/php-fpm.d/*.conf • mkdir /usr/local/php/etc/php-fpm.d/ • ......

chencheng-linux
47分钟前
0
0
TensorFlow layers slim 模块搭建cnn对mnist分类,比较bn效果

shape变化 (?, 784)(?, 28, 28, 1)(?, 14, 14, 8)(?, 7, 7, 8)(?, 1, 1, 8)(?, 8)(?, 10) 结果对比,基本上还是有点用的 0.91725457 0.9232 0.9548 0.95530.9177273 0.9234 0....

阿豪boy
50分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部