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

基础06-JS中for-in和for-of有什么区别

for…in 和 for…of 的区别

题目

for…in 和 for…of 的区别

key 和 value

for…in 遍历 key , for…of 遍历 value

const arr = [10, 20, 30]
for (let n of arr) {console.log(n)
}const str = 'abc'
for (let s of str) {console.log(s)
}
function fn() {for (let argument of arguments) {console.log(argument) // for...of 可以获取 value ,而 for...in 获取 key}
}
fn(10, 20, 30)const pList = document.querySelectorAll('p')
for (let p of pList) {console.log(p) // for...of 可以获取 value ,而 for...in 获取 key
}

遍历对象

for…in 可以遍历对象,for…of 不可以

遍历 Map/Set

for…of 可以遍历 Map/Set ,for…in 不可以

const set1 = new Set([10, 20, 30])
for (let n of set1) {console.log(n)
}let map1 = new Map([['x', 10], ['y', 20], ['z', 3]
])
for (let n of map1) {console.log(n)
}

遍历 generator

for…of 可遍历 generator ,for…in 不可以

function* foo(){yield 10yield 20yield 30
}
for (let o of foo()) {console.log(o)
}

对象的可枚举属性

for…in 遍历一个对象的可枚举属性。

使用 Object.getOwnPropertyDescriptors(obj) 可以获取对象的所有属性描述,看 enumerable: true 来判断该属性是否可枚举。

对象,数组,字符传

可迭代对象

for…of 遍历一个可迭代对象。

其实就是迭代器模式,通过一个 next 方法返回下一个元素。

该对象要实现一个 [Symbol.iterator] 方法,其中返回一个 next 函数,用于返回下一个 value(不是 key)。

可以执行 arr[Symbol.iterator]() 看一下。

JS 中内置迭代器的类型有 String Array arguments NodeList Map Set generator 等。

答案

  • for…in 遍历一个对象的可枚举属性,如对象、数组、字符串。针对属性,所以获得 key
  • for…of 遍历一个可迭代对象,如数组、字符串、Map/Set 。针对一个迭代对象,所以获得 value

划重点

“枚举” “迭代” 都是计算机语言的一些基础术语,目前搞不懂也没关系。

但请一定记住 for…of 和 for…in 的不同表现。

连环问:for await…of

用于遍历异步请求的可迭代对象。

// 像定义一个创建 promise 的函数
function createTimeoutPromise(val) {return new Promise(resolve => {setTimeout(() => {resolve(val)}, 1000)})
}

如果你明确知道有几个 promise 对象,那直接处理即可

(async function () {const p1 = createTimeoutPromise(10)const p2 = createTimeoutPromise(20)const v1 = await p1console.log(v1)const v2 = await p2console.log(v2)
})()

如果你有一个对象,里面有 N 个 promise 对象,你可以这样处理

(async function () {const list = [createTimeoutPromise(10),createTimeoutPromise(20)]// 第一,使用 Promise.all 执行Promise.all(list).then(res => console.log(res))// 第二,使用 for await ... of 遍历执行for await (let p of list) {console.log(p)}// 注意,如果用 for...of 只能遍历出各个 promise 对象,而不能触发 await 执行
})()

【注意】如果你想顺序执行,只能延迟创建 promise 对象,而不能及早创建。

即,你创建了 promise 对象,它就立刻开始执行逻辑。

(async function () {const v1 = await createTimeoutPromise(10)console.log(v1)const v2 = await createTimeoutPromise(20)console.log(v2)for (let n of [100, 200]) {const v = await createTimeoutPromise(n)console.log('v', v)}
})()

相关文章:

基础06-JS中for-in和for-of有什么区别

for…in 和 for…of 的区别 题目 for…in 和 for…of 的区别 key 和 value for…in 遍历 key , for…of 遍历 value const arr [10, 20, 30] for (let n of arr) {console.log(n) }const str abc for (let s of str) {console.log(s) }function fn() {for (let argument…...

AI视频智能分析EasyCVR视频融合平台录像计划模块搜索框细节优化

EasyCVR支持海量视频汇聚管理,可提供视频监控直播、云端录像、云存储、录像检索与回看、智能告警、平台级联、智能分析等视频服务。在录像功能上,平台可支持: 根据业务场景自定义录像计划,可支持7*24H不间断录像,支持…...

TCP和UDP对比

TCP和UDP对比 UDP(用户数据报协议) 无连接(指的是逻辑连接关系,不是物理上的连接) 支持单播、多播以及广播,也就是UDP支持一对一、一对多、一对全 面向应用报文的,对应用层交付的报文直接打包 无连接不可靠的传输服务(适用于IP电话、视频会议等实时应用),不使用流量控制和…...

CVS Health 西维斯健康EDI需求

CVS Health西维斯健康在特拉华州成立,通过旗下的 CVS Pharmacy 和 Longs Drugs 零售店以及 CVS.com 电商提供处方药、美容产品、化妆品、电影和照片加工服务、季节性商品、贺卡和方便食品。CVS Health通过使高质量的护理变得更经济、更易获得、更简单、更无缝&#…...

Anaconda配置Python科学计算库SciPy的方法

本文介绍在Anaconda环境中,安装Python语言SciPy模块的方法。 SciPy是基于Python的科学计算库,用于解决科学、工程和技术计算中的各种问题。它建立在NumPy库的基础之上,提供了大量高效、易于使用的功能,包括统计分析、信号处理、优…...

数据库基本功之复杂查询的子查询

子查询返回的值可以被外部查询使用,这样的复合查询等效与执行两个连续的查询. 1. 单行单列子查询 (>,<,,<>,>,<)内部SELECT子句只返回一行结果 2.多行单列子查询 (all, any, in,not in) all (>大于最大的,<小于最小的) SQL> select ename, sal from…...

脑机接口科普0019——大脑的分区及功能

本文禁止转载&#xff01;&#xff01;&#xff01;&#xff01; 在前文脑机接口科普0018——前额叶切除手术_sgmcy的博客-CSDN博客科普中&#xff0c;有个这样的一张图&#xff1a; 这个图呢&#xff0c;把大脑划分为不同的区域&#xff0c;然后不同的区域代表不同的功能。 …...

阿里云服务器使用教程:CentOS 7 安装JDK及Tomcat(以jdk1.8、tomcat9.0.37为例)

目录 1、下载JDK及Tomcat的安装包并上传至服务器 2、安装JDK 3、安装Tomcat 4、Tomcat启动后无法打开Tomcat首页的原因 1、下载JDK及Tomcat的安装包并上传至服务器 &#xff08;1&#xff09;下载JDK1.8版本压缩包 官网&#xff1a;Java Downloads | Oracle &#xff08…...

Ubuntu20.04下安装vm17+win10/11

一、安装vmware17 1、官网下载 vmware官网&#xff1a;https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.html 2、安装依赖 sudo apt update sudo apt install build-essential linux-headers-generic gcc make3、权限和安装 到下载的目录下…...

Kalman Filter in SLAM (1) ——Data Fusion and Kalman Filter(数据融合和卡尔曼滤波)

文章目录0. 参考资料1. Intro Example 例子引入1.1. 测量硬币直径1.2. 思考2. Data Fusion 数据融合2.1. 数据融合在做什么&#xff1f;2.2. 数据融合的前提——不确定度2.3. 数据融合的结果——统计意义下的最优估计3. State Space Representation 状态空间表达式3.1. 状态方程…...

黑马程序最后

这里写自定义目录标题内建stl常用算法adjacent_findbinary_searchcountcount if常用排序算法常用拷贝和替换replace常用算术生成算法常用集合算法https://gitee.com/jiangjiandong/Cpp-0-1-Resource/blob/master/%E7%AC%AC5%E9%98%B6%E6%AE%B5-C%E6%8F%90%E9%AB%98%E7%BC%96%E7…...

u盘系统文件删除后的五种恢复方法

U盘是我们日常生活中使用较为普遍的移动存储设备&#xff0c;由于其便携性和易用性广受人们的欢迎。然而&#xff0c;在我们使用U盘的过程中&#xff0c;经常会出现误删文件的情况&#xff0c;例如本来要作为启动盘的u盘&#xff0c;误删里面的系统文件怎么办&#xff1f;当U盘…...

【玩转c++】List讲解和模拟底层实现

本期主题&#xff1a;list的讲解和模拟实现博客主页&#xff1a;小峰同学分享小编的在Linux中学习到的知识和遇到的问题小编的能力有限&#xff0c;出现错误希望大家不吝赐1.list的介绍和使用1.1.list的介绍1.list是可以在常数范围内在任意位置进行插入和删除的序列式容器&…...

【Python】特征编码

特征编码1. 独热编码(离散变量编码) sklearn.preprocessing.OneHotEncoder1.1 原理 & 过程1.2 封装函数2. 连续变量分箱(连续变量编码) sklearn.preprocessing.KBinsDiscretizer2.1 原理2.2 等宽分箱 KBinsDiscretizer(strategyuniform)2.3 等频分箱 KBinsDiscretizer(stra…...

前端开发者必备的Nginx知识

nginx在应用程序中的作用 解决跨域请求过滤配置gzip负载均衡静态资源服务器…nginx是一个高性能的HTTP和反向代理服务器&#xff0c;也是一个通用的TCP/UDP代理服务器&#xff0c;最初由俄罗斯人Igor Sysoev编写。 nginx现在几乎是众多大型网站的必用技术&#xff0c;大多数情…...

在 KubeSphere 中开启新一代云原生数仓 Databend

作者&#xff1a;尚卓燃&#xff08;https://github.com/PsiACE&#xff09;&#xff0c;Databend 研发工程师&#xff0c;Apache OpenDAL (Incubating) PPMC。 前言 Databend 是一款完全面向云对象存储的新一代云原生数据仓库&#xff0c;专为弹性和高效设计&#xff0c;为您…...

华为OD机试 - 最优资源分配(C 语言解题)【独家】

最近更新的博客 华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南)华为od机试,独家整理 已参加机试人员的实战技巧文章目录 使用说明本期题目:最优资源…...

求数组的中心索引

给你一个整数数组 nums &#xff0c;请计算数组的 中心下标 。 数组 中心下标 是数组的一个下标&#xff0c;其左侧所有元素相加的和等于右侧所有元素相加的和。 如果中心下标位于数组最左端&#xff0c;那么左侧数之和视为 0 &#xff0c;因为在下标的左侧不存在元素。这一点…...

Ubuntu 搭建NextCloud私有云盘【内网穿透远程访问】

文章目录1.前言2.本地软件安装2.1 nextcloud安装2.2 cpolar安装3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置4.公网访问测试5. 结语1.前言 对于爱好折腾的电脑爱好者来说&#xff0c;Linux是绕不开的、必须认识的系统&#xff08;大部分服务器都是采用Linux操作系统&a…...

如何使用vue创建一个完整的前端项目

搭建Vue项目的完整流程可以分为以下几个步骤&#xff1a;安装Node.js和npm&#xff1a;Vue.js是基于Node.js开发的&#xff0c;因此在开始搭建Vue项目之前&#xff0c;需要先安装Node.js和npm&#xff08;Node.js的包管理器&#xff09;。可以从官网下载Node.js安装包并安装。安…...

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

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

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

GAN模式奔溃的探讨论文综述(一)

简介 简介:今天带来一篇关于GAN的,对于模式奔溃的一个探讨的一个问题,帮助大家更好的解决训练中遇到的一个难题。 论文题目:An in-depth review and analysis of mode collapse in GAN 期刊:Machine Learning 链接:...

背包问题双雄:01 背包与完全背包详解(Java 实现)

一、背包问题概述 背包问题是动态规划领域的经典问题&#xff0c;其核心在于如何在有限容量的背包中选择物品&#xff0c;使得总价值最大化。根据物品选择规则的不同&#xff0c;主要分为两类&#xff1a; 01 背包&#xff1a;每件物品最多选 1 次&#xff08;选或不选&#…...

RabbitMQ 各类交换机

为什么要用交换机&#xff1f; 交换机用来路由消息。如果直发队列&#xff0c;这个消息就被处理消失了&#xff0c;那别的队列也需要这个消息怎么办&#xff1f;那就要用到交换机 交换机类型 1&#xff0c;fanout&#xff1a;广播 特点 广播所有消息​​&#xff1a;将消息…...

中科院1区顶刊|IF14+:多组学MR联合单细胞时空分析,锁定心血管代谢疾病的免疫治疗新靶点

中科院1区顶刊|IF14&#xff1a;多组学MR联合单细胞时空分析&#xff0c;锁定心血管代谢疾病的免疫治疗新靶点 当下&#xff0c;免疫与代谢性疾病的关联研究已成为生命科学领域的前沿热点。随着研究的深入&#xff0c;我们愈发清晰地认识到免疫系统与代谢系统之间存在着极为复…...