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

posted @ 2021-07-16 22:26  Claiyre  阅读(1334)  评论(0编辑  收藏  举报