JS获取对象属性的各种方式和区别(自身/原型属性、可枚举/不可枚举)
对象的属性有自身属性和原型属性之分,自身属性是对象自己的属性,原型属性是存在于原型链上的属性。
可以用Object.prototype.hasOwnProperty()判断是自身属性还是原型属性。(in操作符只可以判断对象是否有某个属性,不能判断是自身的,还是原型上的)
对象属性也有可枚举和不可枚举之分,可枚举属性的属性描述符enumerable为true,不可枚举属性的为false。
原生对象的大多数属性都是不可枚举的,比如数组和字符串的length,对象原型上的一些方法和属性,比如toString、constructor、hasOwnProperty等等
下面看下都有哪些方式可以获取对象的属性
Object.keys()
返回自身的可枚举属性组成的数组 (不包含symbol)
Object.getOwnPropertyNames()
返回所有的自身属性 组成的数组 (不包含symbol)
Object.getOwnPropertySymbols()
返回自身所有的Symbol属性组成的数组
for...in
遍历对象的所有可枚举属性
区别
可枚举 | 可枚举和不可枚举 | |
---|---|---|
仅自身属性 | Object.keys | Object.getOwnPropertyNames |
自身和原型属性 | for...in |
没有原生的方法可以获取对象上所有的属性,包含自身和原型、可枚举和不可枚举,需要自己实现,示例如下:
function getAllkeys (obj) {
const keys = []
let temp = obj
while (temp) {
keys.push.apply(keys, Object.getOwnPropertyNames(temp))
keys.push.apply(keys, Object.getOwnPropertySymbols(temp))
temp = Object.getPrototypeOf(temp)
}
return keys
}
for...of 和 for...in的区别
for let i in obj 是以任意顺序遍历对象的可枚举属性,i是key
for let value of iterable 是按顺序迭代一个可迭代对象,i是值
iterable可迭代对象包括:Array、Map、Set、String、TypedArray、arguments