当前位置: 首页 > news >正文

JavaScript里的循环方法:forEach,for-in,for-of

文章目录

    • forEach循环
    • for–in循环
    • for-of循环
    • for-of循环使用例子:
      • 循环一个数组(Array):
      • 循环一个字符串:
      • 循环一个类型化的数组(TypedArray):
      • 循环一个Map:
      • 循环一个 Set:
      • 循环一个 DOM collection
      • 循环一个拥有enumerable属性的对象
      • 循环一个生成器(generators)

JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的:

for (var index = 0; index < myArray.length; index++) {console.log(myArray[index]);
}

forEach循环

自从JavaScript5起,我们开始可以使用内置的forEach方法:

myArray.forEach(function (value) {console.log(value);
});

写法简单了许多,但也有短处:你不能中断循环(使用break语句或使用return语句。

for–in循环

JavaScript里还有一种循环方法:for–in。

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循环使用例子:

循环一个数组(Array):

let iterable = [10, 20, 30];for (let value of iterable) {console.log(value);
}
// 10
// 20
// 30

我们可以使用const来替代let,这样它就变成了在循环里的不可修改的静态变量。

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"

循环一个类型化的数组(TypedArray):

let iterable = new Uint8Array([0x00, 0xff]);for (let value of iterable) {console.log(value);
}
// 0
// 255

循环一个Map:

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);for (let [key, value] of iterable) {console.log(value);
}
// 1
// 2
// 3for (let entry of iterable) {console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

循环一个 Set:

let iterable = new Set([1, 1, 2, 2, 3, 3]);for (let value of iterable) {console.log(value);
}
// 1
// 2
// 3

循环一个 DOM collection

比如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 functionlet [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 1000if (n >= 1000) {break;}
}
http://www.lryc.cn/news/31504.html

相关文章:

  • 汽车标定知识整理(二):CCP报文基本命令介绍
  • windows系统安装Linux虚拟机教程
  • “基于Spring Cloud Alibaba的微服务架构实战:Nacos配置管理“
  • 【Linux】常见面试题
  • 【数据结构】顺序表:尾部操作我很行,随机访问我超快!!!
  • SQL优化
  • Java ArrayList 和 LinkList 原理对比
  • 【Spring】入门概述(一)
  • 十二、面向切面编程AOP
  • Mybatis 处理 CLOB/BLOB 类型数据
  • 【NLP经典论文阅读】Efficient Estimation of Word Representations in Vector Space(附代码)
  • Spring bean生命周期分为几个阶段?
  • 【基础算法】单链表的OJ练习(4) # 分割链表 # 回文链表 #
  • SpringBoot整合定时任务和邮件发送(邮箱 信息轰炸 整蛊)
  • Arduino添加ESP32开发板
  • Mysql通配符的使用
  • RocketMQ-02
  • 深度学习卷积神经网络CNN之 VGGNet模型主vgg16和vgg19网络模型详解说明(理论篇)
  • 三:BLE协议架构简介
  • 小型双轮差速底盘双灰度循迹功能的实现
  • 电子签名?玩具罢了!
  • 【Spring Boot读取配置文件的方式】
  • java学习路线规划
  • 格密码学习笔记(二):连续极小、覆盖半径和平滑参数
  • ios 通过搜索设备MAC地址绑定
  • Python实现人脸识别,进行视频跟踪打码,羞羞的画面统统打上马赛克
  • vcf bed起始位置是0还是1
  • Hexo+live2d | 如何把live2d老婆放进自己的博客
  • 【微信小程序】-- 页面导航 -- 导航传参(二十四)
  • Pytorch学习笔记#2: 搭建神经网络训练MNIST手写数字数据集