全面解析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 相关文章推荐
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 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书写安全的脚本代码
2012/02/05 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
通过cmd进入python的实例操作
2019/06/26 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
中软国际Java程序员笔试题
2014/07/19 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
毕业学生推荐信
2013/12/01 职场文书
心理健康教育心得体会
2013/12/29 职场文书
承诺书样本
2014/08/30 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
世界遗产的导游词
2015/02/13 职场文书
清洁员岗位职责
2015/02/15 职场文书
闪闪的红星观后感
2015/06/08 职场文书
公司处罚决定书
2015/06/24 职场文书
高二语文教学反思
2016/02/16 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书