文档章节

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

鱼煎
 鱼煎
发布于 2016/06/25 11:00
字数 714
阅读 6
收藏 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;
  }
}

本文转载自:

共有 人打赏支持
鱼煎
粉丝 7
博文 193
码字总数 38711
作品 0
深圳
技术主管
私信 提问
关于js和JSTL的一些问题,希望大神帮我~

我现在有一个一对多循环,也就是循环,我想通过一个js方法得到这个标签里面的begin和end属性的值,然后通过js方法修改这两个值,从而实现分页的效果,请问该怎么用js得到JSTL标签里的属性并修...

上帝爱众生
2014/08/13
1K
10
对一个数组 FILTER、SOME、MAP、FOREACH的操作分别有什么作用?

大家好,我是IT修真院北京总院第24期的学员,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网JS任务4,深度思考中的知识点——对一个数组 FILTER、SOME、MAP、FOREACH的操作分别...

我是一只北极熊啊
2017/12/23
0
0
JavaScript基础——变量-运算符-流程控制语句

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

codejson
07/02
0
0
jQuery 操作 DOM 数组要注意什么?

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

justjavac
2012/07/25
0
1
前端高频面试题 JavaScript篇

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

大雄的学习人生
06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
2
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
4
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0
Kernel I2C子系统

备注:所有图片来源于网络 1,I2C协议: 物理拓扑: I2C总线由两根信号线组成,一条是时钟信号线SCL,一条是数据信号线SDA。一条I2C总线可以接多个设备,每个设备都接入I2C总线的SCL和SDA。I...

yepanl
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部