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

JavaScript遍历对象的7种方式

注:纯手打,如有错误欢迎评论区交流!
转载请注明出处:https://blog.csdn.net/testleaf/article/details/145523427
编写此文是为了更好地学习前端知识,如果损害了有关人的利益,请联系删除!
本文章将不定时更新,敬请期待!!!
欢迎点赞、收藏、转发、关注,多谢!!!

目录

    • 一、for...in 循环
    • 二、Object.keys() 方法结合 forEach 方法
    • 三、Object.values() 方法结合 forEach 方法
    • 四、Object.entries() 方法结合 for...of 循环
    • 五、Reflect.ownKeys() 方法结合 forEach 方法
    • 六、Object.getOwnPropertyNames() 方法结合 forEach 方法
    • 七、Object.getOwnPropertySymbols() 方法结合 forEach 方法

一、for…in 循环

for...in 循环用于遍历对象的可枚举属性,包括对象自身的属性以及继承的属性,但不包含 Symbol 类型的属性。
示例代码:

const person = {name: 'Alice',age: 25,occupation: 'Engineer'
};for (const key in person) {console.log(`${key}: ${person[key]}`);
}

注意事项:由于 for...in 会遍历继承的属性,若只想遍历对象自身的属性,可以使用 hasOwnProperty 方法进行过滤。

for (const key in person) {if (person.hasOwnProperty(key)) {console.log(`${key}: ${person[key]}`);}
}

二、Object.keys() 方法结合 forEach 方法

Object.keys() 方法会返回一个由对象的可枚举属性名组成的数组,然后可以使用 forEach 方法遍历这个数组。
示例代码:

const person = {name: 'Alice',age: 25,occupation: 'Engineer'
};const keys = Object.keys(person);
keys.forEach(key => {console.log(`${key}: ${person[key]}`);
});

三、Object.values() 方法结合 forEach 方法

Object.values() 方法会返回一个由对象的可枚举属性值组成的数组,然后使用 forEach 方法遍历这个数组。不过这种方式只能获取到值,无法直接获取对应的键。
示例代码:

const person = {name: 'Alice',age: 25,occupation: 'Engineer'
};const values = Object.values(person);
values.forEach(value => {console.log(value);
});

四、Object.entries() 方法结合 for…of 循环

Object.entries() 方法会返回一个由对象的键值对组成的二维数组,每个子数组包含一个键和对应的值,接着可以使用 for...of 循环遍历这个二维数组。
示例代码:

const person = {name: 'Alice',age: 25,occupation: 'Engineer'
};for (const [key, value] of Object.entries(person)) {console.log(`${key}: ${value}`);
}

五、Reflect.ownKeys() 方法结合 forEach 方法

Reflect.ownKeys() 方法会返回一个由对象的所有属性名(包括 Symbol 类型的属性)组成的数组,然后使用 forEach 方法遍历这个数组。
示例代码:

const symbolKey = Symbol('symbolKey');
const person = {name: 'Alice',age: 25,[symbolKey]: 'Secret'
};Reflect.ownKeys(person).forEach(key => {console.log(`${key}: ${person[key]}`);
});

六、Object.getOwnPropertyNames() 方法结合 forEach 方法

Object.getOwnPropertyNames() 方法会返回一个由对象自身的所有属性名(不包括 Symbol 类型的属性)组成的数组,再使用 forEach 方法遍历这个数组。
示例代码:

const person = {name: 'Alice',age: 25,occupation: 'Engineer'
};Object.getOwnPropertyNames(person).forEach(key => {console.log(`${key}: ${person[key]}`);
});

七、Object.getOwnPropertySymbols() 方法结合 forEach 方法

如果需要专门遍历对象的 Symbol 类型的属性,可以使用 Object.getOwnPropertySymbols() 方法,它会返回一个由对象自身的 Symbol 类型属性组成的数组,然后使用 forEach 方法遍历该数组。
示例代码:

const symbolKey = Symbol('symbolKey');
const person = {[symbolKey]: 'Secret'
};Object.getOwnPropertySymbols(person).forEach(symbol => {console.log(`${symbol.toString()}: ${person[symbol]}`);
});
http://www.lryc.cn/news/533322.html

相关文章:

  • 如何避免NACK重传风暴
  • 并发工具CountDownLatch、CyclicBarrier、Semaphore
  • 十二. Redis 集群操作配置(超详细配图,配截图详细说明)
  • 网络工程师 (26)TCP/IP体系结构
  • TensorFlow域对抗训练DANN神经网络分析MNIST与Blobs数据集梯度反转层提升目标域适应能力可视化...
  • 保姆级教程--DeepSeek部署
  • 机器学习之心的创作纪念日
  • VeryReport和FastReport两款报表软件深度分析对比
  • libtorch的c++,加载*.pth
  • 去除 RequestTemplate 对象中的指定请求头
  • b s架构 网络安全 网络安全架构分析
  • 【DeepSeek论文精读】2. DeepSeek LLM:以长期主义扩展开源语言模型
  • Spring Boot和SpringMVC的关系
  • java基础4(黑马)
  • nodejs - vue 视频切片上传,本地正常,线上环境导致磁盘爆满bug
  • 注意力机制(Attention Mechanism)和Transformer模型的区别与联系
  • C++,设计模式,【单例模式】
  • C++:类和对象初识
  • 官网下载Redis指南
  • 活动预告 |【Part1】 Azure 在线技术公开课:迁移和保护 Windows Server 和 SQL Server 工作负载
  • 【Linux系统编程】五、进程创建 -- fork()
  • 深入解析 STM32 GPIO:结构、配置与应用实践
  • 深入探究 C++17 std::is_invocable
  • Vmware网络模式
  • 神经辐射场(NeRF):从2D图像到3D场景的革命性重建
  • 深入解析AI技术原理
  • PDF 2.0 的新特性
  • Matlab机械手碰撞检测应用
  • (root) Additional property include:is not allowed
  • react 18父子组件通信