ES6遍历对象属性的5种方法

ES6 一共有 5 种方法可以遍历对象的属性。

先声明一个变量：

const site = {
  name: '前端资源网',
  url: 'www.w3h5.com'
}

for...in

for...in 循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。

const siteKeys = []; 
for (let key in site) {
  siteKeys.push(key)
}
console.log(siteKeys)
// ['name', 'url']

Object.keys(obj)

Object.keys 返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

Object.keys(site)
// ['name', 'url']

如果要遍历处理对象属性的值：

let siteValues = [];
Object.keys(site).forEach(item => {
  siteValues.push(site[item])
})
console.log(siteValues)
// ['前端资源网', 'www.w3h5.com']

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames 返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols 返回一个数组，包含对象自身的所有 Symbol 属性的键名。

Reflect.ownKeys(obj)

Reflect.ownKeys 返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。

• 首先遍历所有数值键，按照数值升序排列。

• 其次遍历所有字符串键，按照加入时间升序排列。

• 最后遍历所有 Symbol 键，按照加入时间升序排列。

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

上面代码中，Reflect.ownKeys 方法返回一个数组，包含了参数对象的所有属性。这个数组的属性次序是这样的，首先是数值属性 2 和 10，其次是字符串属性 b 和 a，最后是 Symbol 属性。

未经允许不得转载：Web前端开发资源网 » ES6遍历对象属性的5种方法

推荐阅读：

JetbrainsCrack-2.7激活补丁更新 亲测激活PhpStorm2018

input[type=file]去掉“未选择任何文件”及样式改进

【笔记】微信小程序通过app.json设置底部导航

JetBrains IDE Support 浏览器自动刷新插件（不定时更新）

html CSS引用字体文件