当前位置: 首页 > 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;}
}

相关文章:

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

文章目录forEach循环for–in循环for-of循环for-of循环使用例子&#xff1a;循环一个数组(Array):循环一个字符串&#xff1a;循环一个类型化的数组(TypedArray)&#xff1a;循环一个Map:循环一个 Set:循环一个 DOM collection循环一个拥有enumerable属性的对象循环一个生成器(g…...

汽车标定知识整理(二):CCP报文基本命令介绍

目录 一、基本命令 CRO命令报文的基本命令表&#xff1a; 二、基本命令与可选命令帧格式介绍 1、CONNECT——建立连接&#xff08;0x01&#xff09; 2、GET_CPP_VERSION——获取CCP版本&#xff08;0x1B&#xff09; 3、SET_MTA——设置内存传输地址&#xff08;0x02&#…...

windows系统安装Linux虚拟机教程

虚拟机的安装首先要下载虚拟机的安装包&#xff0c;当前最新版本是VMware 16.2.1。软件我都已经给大家准备好了&#xff08;含序列号&#xff09;&#xff0c;大家在这里下载就好。虚拟机安装包下载完毕之后&#xff0c;将它安装到电脑里。这个安装过程很简单&#xff0c;一路下…...

“基于Spring Cloud Alibaba的微服务架构实战:Nacos配置管理“

引言 Spring Cloud Alibaba 是 Spring Cloud 和 Alibaba 集团联合推出的开源微服务框架&#xff0c;旨在为 Java 开发者提供一种简单、易用、高效的微服务解决方案。Nacos 是一个面向云原生应用的动态服务发现、配置管理和服务管理平台&#xff0c;提供了服务注册与发现、配置管…...

【Linux】常见面试题

1. 查看文件内容 cat tail head less more 2. 几个查看文件内容的命令有什么区别 cat 文件名 # 将文件内的内容全部打印出来&#xff0c;cat 文件1 文件2 先将文件1全部法印&#xff0c;然后在打印文件2 more 文件名 # 分屏查看 less 文件名 # 上下分页查看 head 文件…...

【数据结构】顺序表:尾部操作我很行,随机访问我超快!!!

顺序表的模拟实现 文章目录顺序表的模拟实现1.线性表2.顺序表2.1概念结构2.2顺序表的模拟实现2.2.1顺序表的初始化2.2.2顺序表的销毁2.2.3尾插数据2.2.4尾删数据2.2.5头插数据2.2.6头删数据2.2.7中间插入数据2.2.8中间删除数据2.2.9打印顺序表2.2.10查找数据2.2.11复用Insert和…...

SQL优化

SQL优化 SQL优化的方法&#xff1a; sql查询语句尽不使用select * &#xff0c;而是具体的字段。 节约资源&#xff0c;减少网络开销。减少回表&#xff0c;提高查询效率。 避免在where子句中使用or来连接条件。 or可能会使索引失效&#xff0c;从而进行全表查询。 尽量使用…...

Java ArrayList 和 LinkList 原理对比

Java 中的 ArrayList 和 LinkedList 都是实现了 List 接口的集合类它们都允许添加、删除和修改元素。但是它们的底层实现原理不同导致它们在不同的场景下拥有不同的优劣势。 ArrayListArrayList 的底层是通过数组实现的因此它具有数组的特性。它允许快速随机访问元素但是在插入…...

【Spring】入门概述(一)

&#x1f697;Spring学习第一站~ &#x1f6a9;本文已收录至专栏&#xff1a;Spring家族学习之旅 &#x1f44d;希望您能有所收获 一.初识 Spring并不是单一的一个技术&#xff0c;而是一个大家族&#xff0c;发展到今天已经形成了一种开发的生态圈&#xff0c;Spring提供了若…...

十二、面向切面编程AOP

IoC使软件组件松耦合。AOP让你能够捕捉系统中经常使用的功能&#xff0c;把它转化成组件。 AOP&#xff08;Aspect Oriented Programming&#xff09;&#xff1a;面向切面编程&#xff0c;面向方面编程。&#xff08;AOP是一种编程技术&#xff09; AOP是对OOP的补充延伸。 …...

Mybatis 处理 CLOB/BLOB 类型数据

Mybatis 处理 CLOB/BLOB 类型数据 BLOB 和 CLOB 都是大型字段类型。 BLOB通过二进制存储&#xff0c;而CLOB可以直接存储文本。 通常&#xff0c;图片、文件、音乐等信息存储在 BLOB 字段中。首先&#xff0c;文件是转换为二进制&#xff0c;然后存储在。文章或较长的文本存…...

【NLP经典论文阅读】Efficient Estimation of Word Representations in Vector Space(附代码)

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️&#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…...

Spring bean生命周期分为几个阶段?

bean 的生命周期从调用 beanFactory 的 getBean 开始&#xff0c;到这个 bean 被销毁&#xff0c;可以总结为以下七个阶段&#xff1a;处理名称&#xff0c;检查缓存→处理父子容器→处理 dependsOn→选择 scope 策略→创建 bean→类型转换处理→销毁 bean划分的阶段和名称并不…...

【基础算法】单链表的OJ练习(4) # 分割链表 # 回文链表 #

文章目录前言分割链表回文链表写在最后前言 本章的OJ练习相对前面的难度加大了&#xff0c;但是换汤不换药&#xff0c;还是围绕单链表的性质来出题的。我相信&#xff0c;能够过了前面的OJ练习&#xff0c;本章的OJ也是轻轻松松。 对于OJ练习(3)&#xff1a;-> 传送门 <…...

SpringBoot整合定时任务和邮件发送(邮箱 信息轰炸 整蛊)

SpringBoot整合定时任务和邮件发送&#xff08;邮箱 信息轰炸 整蛊&#xff09; 目录SpringBoot整合定时任务和邮件发送&#xff08;邮箱 信息轰炸 整蛊&#xff09;1.概述2.最佳实践2.1创建项目引入依赖(mail)2.2 修改yml配置文件2.3 启动类添加EnableScheduling注解2.4 执行的…...

Arduino添加ESP32开发板

【2023年3月4日】 最近要在新电脑上安装Arduino&#xff0c;需要进行一些配置&#xff0c;正好记录一下&#xff01; Arduino2.0.1 下的开发板添加操作。 ESP32开发板GitHub链接&#xff1a; GitHub - espressif/arduino-esp32: Arduino core for the ESP32Arduino core for…...

Mysql通配符的使用

LIKE操作符 通配符&#xff1a;用来匹配值的一部分的特殊字符。 搜索模式&#xff1a;由字面值&#xff0c;通配符或两者组合构成的搜索条件。 百分号(%)通配符 搜索模式使用例如下 SELECT prod_id, prod_name FROM products WHERE prod_name Like jet%; 这条子句表示&…...

RocketMQ-02

1. 案例介绍 1.1 业务分析 模拟电商网站购物场景中的【下单】和【支付】业务 ###1&#xff09;下单 用户请求订单系统下单订单系统通过RPC调用订单服务下单订单服务调用优惠券服务&#xff0c;扣减优惠券订单服务调用调用库存服务&#xff0c;校验并扣减库存订单服务调用用户…...

深度学习卷积神经网络CNN之 VGGNet模型主vgg16和vgg19网络模型详解说明(理论篇)

1.VGG背景 2. VGGNet模型结构 3. 特点&#xff08;创新、优缺点及新知识点&#xff09; 一、VGG背景 VGGNet是2014年ILSVRC&#xff08;ImageNet Large Scale Visual Recognition Challenge大规模视觉识别挑战赛&#xff09;竞赛的第二名&#xff0c;解决ImageNet中的1000类图…...

三:BLE协议架构简介

低功耗蓝牙体系整体架构说明1. PHY(物理层)2. LL(链路层)3. HCI(主机与控制器通信接口)4. L2CAP(逻辑链路控制及适配协议)5. ATT(属性协议)6. GATT(通用属性规范)7. GAP(通用访问规范)8. SM(安全管理)整体架构说明 架构层说明PHY1. 物理层2. 控制射频的发送和接收LL1. 链路层2.…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

ubuntu22.04有线网络无法连接,图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

jdbc查询mysql数据库时,出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

大模型——基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程

基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程 下载安装Docker Docker官网:https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘,大小大概2.9G,做这行最忌讳的就是安装软件全装C盘,所以我调整了下安装路径。 新建安装目录:E:\MyS…...