全面解析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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
node.js中 stream使用教程
Aug 28 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
python中global用法实例分析
2015/04/30 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
详解python中asyncio模块
2018/03/03 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
如何一键升级Python所有包
2020/11/05 Python
python中Mako库实例用法
2020/12/31 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
简历中的自我评价范文
2014/02/05 职场文书
伦敦奥运会口号
2014/06/13 职场文书
干部作风建设工作总结
2014/10/29 职场文书
安全先进班组材料
2014/12/26 职场文书
python glom模块的使用简介
2021/04/13 Python