细究 ES6 中多种遍历对象键名方式的区别

一、前言

说到遍历对象,第一反应是用 for...in..、和 Object.keys()。平常最多用的就是这俩个。

最近重新翻看 《ES6 标准入门》这本书,发现遍历对象键名的方式还是挺多的。

今天借此机会,以一个基本案例,总结五种遍历对象键名的使用及其不同点。

基本案例代码

js 复制代码
const parentObj = {
  inheritedProp: 'inherited value',
}

// 给父对象添加 Symbol 属性
const inheritedSymbol = Symbol('inheritedSymbol property')
parentObj[inheritedSymbol] = 'inheritedSymbol value'

// 创建子对象,继承父对象
const childrenObj = Object.create(parentObj)

// 添加自身的可枚举属性
childrenObj.enumerableProp = 'enumerable value';

// 添加自身的不可枚举属性
Object.defineProperty(childrenObj, 'nonEnumerableProp', {
  value: 'non - enumerable value',
  enumerable: false
});

// 添加自身的 Symbol 属性
const symbolProp = Symbol('symbol property');
childrenObj[symbolProp] = 'symbol value';

二、for...in...

使用

js 复制代码
for (let key in childrenObj) {
  console.log(key, ':', childrenObj[key]) 
}

输出结果

复制代码
 enumerableProp : enumerable value
 inheritedProp : inherited value

结论

for..in..:遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)

三、Object.keys()

使用

js 复制代码
Object.keys(childrenObj).map(key => {
  console.log(key, ':', childrenObj[key])
})

输出结果

复制代码
enumerableProp : enumerable value

结论

Object.keys():遍历对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名

四、Object.getOwnPropertyNames()

使用

js 复制代码
Object.getOwnPropertyNames(childrenObj).map(key => {
  console.log(key, ':', childrenObj[key]) 
})

输出结果

复制代码
 enumerableProp : enumerable value
 nonEnumerableProp : non - enumerable value

结论

Object.getOwnPropertyNames():包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名

五、Object.getOwnPropertySymbols

使用

js 复制代码
Object.getOwnPropertySymbols(childrenObj).map(key => {
  console.log(key, ':', childrenObj[key]) 
})

输出结果

复制代码
Symbol(symbol property) : symbol value

结论

Object.getOwnPropertySymbols:包含对象自身的所有 Symbol 属性的键名

六、Reflect.ownKeys()

使用

js 复制代码
Reflect.ownKeys(childrenObj).map(key => {
  console.log(key, ':', childrenObj[key])
})

输出结果

复制代码
 enumerableProp : enumerable value
 nonEnumerableProp : non - enumerable value
 Symbol(symbol property) : symbol value

结论

Reflect.ownKeys():包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举

七、总结

for...in:遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)

Object.keys():遍历对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名

Object.getOwnPropertyNames():包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名

Object.getOwnPropertySymbols():包含对象自身的所有 Symbol 属性的键名

Reflect.ownKeys():包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举

相关推荐
黑云压城After2 分钟前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
芙蓉王真的好17 分钟前
NestJS API 提示信息规范:让日志与前端提示保持一致的方法
前端·状态模式
dwedwswd13 分钟前
技术速递|从 0 到 1:用 Playwright MCP 搭配 GitHub Copilot 搭建 Web 应用调试环境
前端·github·copilot
2501_9387742927 分钟前
Leaflet 弹出窗实现:Spring Boot 传递省级旅游口号信息的前端展示逻辑
前端·spring boot·旅游
meichaoWen42 分钟前
【CSS】CSS 面试知多少
前端·css
我血条子呢1 小时前
【预览PDF】前端预览pdf
前端·pdf·状态模式
90后的晨仔1 小时前
报错 找不到“node”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 "node" 的入口点 。
前端
90后的晨仔1 小时前
5分钟搭建你的第一个TypeScript项目
前端·typescript
专注前端30年2 小时前
Vue2 中 v-if 与 v-show 深度对比及实战指南
开发语言·前端·vue
90后的晨仔2 小时前
TypeScript是什么?为什么前端必须学它?
前端