当前位置: 首页 > 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.…...

Mac玩转老游戏:手把手教你用Wineskin配置RPG Maker游戏所需RTP环境

Mac玩转老游戏&#xff1a;手把手教你用Wineskin配置RPG Maker游戏所需RTP环境 在Mac上重温经典RPG游戏是许多怀旧玩家的梦想&#xff0c;但RPG Maker游戏往往依赖Windows特有的运行时包&#xff08;RTP&#xff09;&#xff0c;这让Mac用户望而却步。本文将带你深入探索如何利…...

基于节点电价的电网对电动汽车接纳能力评估模型研究附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、程序设计科研仿真。 &#x1f34e;完整代码获取 定制创新 论文复现点击&#xff1a;Matlab科研工作室 &#x1f447; 关注我领取海量matlab电子书和数学建模资料 &…...

GPT-Image 2 视觉模型的逻辑跃迁:涌现还是幻觉?

GPT-Image 2 的“涌现能力”&#xff1a;视觉模型是否也会发生“逻辑跃迁”&#xff1f;&#xff08;2026 深度观察与验证思路&#xff09; 过去很长一段时间&#xff0c;大家谈“涌现&#xff08;emergent&#xff09;能力”&#xff0c;更偏向自然语言模型&#xff1a;从文本…...

手把手教你模拟登录淘宝并爬取订单数据:从Cookie维护到反爬突破的完全指南

目录 一、技术选型:为什么最终选择了Playwright? 1.1 那些年被抛弃的方案 1.2 Playwright的优势 1.3 完整的依赖清单 二、登录流程的完整实现 2.1 两种登录方案的权衡 2.2 扫码登录的完整代码 2.3 Cookie持久化机制详解 三、订单列表爬取的两种思路 3.1 方式一:页…...

ElevenLabs旁遮普语TTS突然失真?3步定位Gurmukhi Unicode变体(U+0A02/U+0A3C/U+0A4D)引发的音素错位故障

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs旁遮普文语音合成异常现象综述 ElevenLabs 目前官方文档明确标注支持旁遮普语&#xff08;Gurmukhi script, language code: pa&#xff09;&#xff0c;但在实际调用其 REST API 进行语音合…...

实战指南:深度掌握5大梯度下降优化器的可视化秘籍

实战指南&#xff1a;深度掌握5大梯度下降优化器的可视化秘籍 【免费下载链接】gradient_descent_viz interactive visualization of 5 popular gradient descent methods with step-by-step illustration and hyperparameter tuning UI 项目地址: https://gitcode.com/gh_mi…...

零代码物联网实战:用WipperSnapper与Adafruit IO快速采集模拟与I2C传感器数据

1. 项目概述与核心价值在嵌入式开发和物联网项目的起步阶段&#xff0c;很多开发者&#xff0c;尤其是刚接触硬件的朋友&#xff0c;常常会卡在两个看似基础却至关重要的环节上&#xff1a;如何让微控制器“感知”到物理世界的连续变化&#xff0c;以及如何高效、可靠地读取那些…...

AssetStudio实战指南:解锁Unity游戏资源的完整解决方案

AssetStudio实战指南&#xff1a;解锁Unity游戏资源的完整解决方案 【免费下载链接】AssetStudio AssetStudio - Based on the archived Perfares AssetStudio, I continue Perfares work to keep AssetStudio up-to-date, with support for new Unity versions and additional…...

科技与科学新闻摘要-2026年5月16日

科技与科学新闻摘要 日期: 2026年5月16日 科技领域重点新闻 1. 中国2025年度十大科学进展揭晓 核心要点: 中国科学技术部发布了2025年度十大科学进展&#xff0c;覆盖深空探测、人工智能、生命科学、能源技术等多个领域&#xff0c;集中展示了中国基础研究和应用研究的突破性…...

iOS 17-26越狱终极指南:5个安全解锁iPhone隐藏功能的专业方法

iOS 17-26越狱终极指南&#xff1a;5个安全解锁iPhone隐藏功能的专业方法 【免费下载链接】Jailbreak iOS 26.4 - 26, 17 - 17.7.5 & iOS 18 - 18.7.3 Jailbreak Tools, Cydia/Sileo/Zebra Tweaks & Jailbreak News Updates || AI Jailbreak Finder &#x1f447; 项…...