全面解析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模拟页面加载进度条的实现代码
Dec 19 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
vuex实现数据状态持久化
Nov 11 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中使用Imagick操作PSD文件实例
2015/01/26 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
Python实现建立SSH连接的方法
2015/06/03 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
python监控文件并且发送告警邮件
2018/06/21 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
python实现连续图文识别
2018/12/18 Python
python实现简单银行管理系统
2019/10/25 Python
django-csrf使用和禁用方式
2020/03/13 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
详解python tcp编程
2020/08/24 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
试述DBMS的主要功能
2016/11/13 面试题
教育科学研究生自荐信
2013/10/09 职场文书
教学大赛获奖感言
2014/01/15 职场文书
安全生产大检查方案
2014/05/07 职场文书
实习单位鉴定意见
2015/06/04 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫
A22国内电台短波广播频率表
2022/05/10 无线电