JS-- for...in和for...of

1,for...in

用于遍历对象的可枚举属性(包括原型链上的),返回的是属性名(字符串)。

也可以遍历数组,但返回的是索引(字符串类型),不推荐用于数组。

2,for..of

用于遍历可迭代对象(如数组、字符串、Map、Set等),返回的是每一项的值。

不能直接用于普通对象(非可迭代对象)。

3,举例:

3.1 for...in遍历对象。不想要遍历原型链上的属性和方法通过obj.hasOwnProperty过滤掉

javascript 复制代码
for (const key in data) {
    if (data.hasOwnProperty(key)) {
        const value = data[key];
        if (value !== undefined) {
            items.push(`"${key}":${stringify(value)}`);
        }
    }
}

3.2 用for...of替代for...in,那么通过Object.keys(obj),拿到所有的对象的key

你可以用 for (const key of Object.keys(obj)) 替换 for...in,这样更安全,只遍历自有属性。

javascript 复制代码
for (const key of Object.keys(data)) {
    const value = data[key];
    if (value !== undefined) {
        items.push(`"${key}":${stringify(value)}`);
    }
}

for...in 用于遍历对象的属性名,返回字符串(包括原型链上的)。

for...of 用于遍历可迭代对象的值,不能直接用于普通对象。

相关推荐
木易 士心24 分钟前
Promise深度解析:前端异步编程的核心
前端·javascript
im_AMBER28 分钟前
Web 开发 21
前端·学习
又是忙碌的一天28 分钟前
前端学习day01
前端·学习·html
韩立学长30 分钟前
【开题答辩实录分享】以《基于python的奶茶店分布数据分析与可视化》为例进行答辩实录分享
开发语言·python·数据分析
Joker Zxc32 分钟前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
天若有情67336 分钟前
C++空值初始化利器:empty.h使用指南
开发语言·c++
excel37 分钟前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
远远远远子42 分钟前
类与对象 --1
开发语言·c++·算法
大前端helloworld1 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端
无敌最俊朗@1 小时前
C/C++ 关键关键字面试指南 (const, static, volatile, explicit)
c语言·开发语言·c++·面试