全面解析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 相关文章推荐
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
jQuery load方法用法集锦
Dec 06 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
js命名空间写法示例
Dec 18 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
Node.js 中判断一个文件是否存在
Aug 24 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配置心得包含MYSQL5乱码解决
2006/11/20 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
vue实现搜索过滤效果
2019/05/28 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python实现的生成word文档功能示例
2019/08/23 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
党员公开承诺书
2014/03/25 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang