全面解析JavaScript里的循环方法之forEach,for-in,for-of


Posted in Javascript onApril 20, 2020

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的:

for (var index = 0; index < myArray.length; index++) {
console.log(myArray[index]);
}

自从JavaScript5起,我们开始可以使用内置的 forEach 方法:

myArray.forEach(function (value) {
console.log(value);
});

写法简单了许多,但也有短处:你不能中断循环(使用语句或使用语句。

JavaScript里还有一种循环方法:。

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循环使用例子:

let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30

我们可以使用来替代,这样它就变成了在循环里的不可修改的静态变量。

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"
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);
}
// 0
// 255
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]
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;
}
}

到此这篇关于全面解析JavaScript里的循环方法之forEach,for-in,for-of的文章就介绍到这了,更多相关js循环方法foreach for in for of内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS实现self的resend
Jul 22 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
简单理解Vue中的nextTick方法
Jan 30 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
Javascript之Date对象详解
Jun 07 #Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 #Javascript
javascript之Boolean类型对象
Jun 07 #Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 #Javascript
javascript之Array 数组对象详解
Jun 07 #Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 #Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 #Javascript
You might like
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
javascript 必知必会之closure
2009/09/21 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
python 性能提升的几种方法
2016/07/15 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python的json包位置及用法总结
2020/06/21 Python
8种常用的Python工具
2020/08/05 Python
python开发入门——列表生成式
2020/09/03 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
大学信息公开实施方案
2014/03/09 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
项目经理岗位职责
2015/01/31 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python