全面解析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 相关文章推荐
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
vue-router单页面路由
Jun 17 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
小程序实现上传视频功能
Aug 18 Javascript
原生js 实现表单验证功能
Feb 08 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
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上传文件并显示上传进度的方法
2015/03/24 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
医学专业毕业生个人求职信
2013/12/25 职场文书
《自然之道》教学反思
2014/02/11 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL