ES6 一共有 5 种方法可以遍历对象的属性。
先声明一个变量:
代码语言:javascript复制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']
如果要遍历处理对象属性的值:
代码语言:javascript复制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 属性。
未经允许不得转载:w3h5 » ES6遍历对象属性的5种方法