当前位置:网站首页>for...in 和 for...of 的区别
for...in 和 for...of 的区别
2022-07-30 21:45:00 【鱼子酱酱酱】
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 10
yield 20
yield 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 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 p1
console.log(v1)
const v2 = await p2
console.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)
}
})()
边栏推荐
- About the error of SFML Rect.inl file
- Navigation Bar----Personal Center Dropdown
- Niu Ke Xiaobaiyue Race 53 A-E
- It is enough for MySQL to have this article (disgusting typing 37k words, just for Bojun!!!)
- A simple rich text editor
- IDEA 连接 数据库
- cmd(命令行)操作或连接mysql数据库,以及创建数据库与表
- cmd (command line) to operate or connect to the mysql database, and to create databases and tables
- MySQL压缩包方式安装,傻瓜式教学
- The most complete Redis basic + advanced project combat summary notes in history
猜你喜欢
openim支持十万超级大群
MySql创建数据表
Deep Non-Local Kalman Network for VideoCompression Artifact Reduction
基于ABP实现DDD--仓储实践
MySQL compressed package installation, fool teaching
cmd (command line) to operate or connect to the mysql database, and to create databases and tables
Google Earth Engine ——ee.List.sequence函数的使用
DistSQL in-depth analysis: creating a dynamic distributed database
navicat无法连接mysql超详细处理方法
类和对象——上
随机推荐
Google Earth Engine ——我们如何筛选一个列表中的排序以时间为例
手动从0搭建ABP框架-ABP官方完整解决方案和手动搭建简化解决方案实践
Qt 同时生成动态库和静态库
(7/29) Basic board minimum spanning tree prim+kruskal
Day 16 of HCIP
MYSQL JDBC Book Management System
新书上市 |《谁在掷骰子?》在“不确定性时代”中确定前行
你需要知道的ES6—ES13开发技巧
CISP-PTE真题演示
qt使用动态库(DLL)
navicat无法连接mysql超详细处理方法
关于MySQL主从复制的数据同步延迟问题
C语言犄角旮旯的知识之结构体
MySQL compressed package installation, fool teaching
共用体、共用体与结构体的区别、枚举之C语言犄角旮旯的知识
【科研】文献下载神器方式汇总
Apache DolphinScheduler新一代分布式工作流任务调度平台实战-
系统结构考点之CRAY-1向量处理机
8 ways to get element attributes in JS
The structure of knowledge in the corners of the C language