JS获取对象属性名总结

 更新时间:2022年01月30日 08:55:02   投稿:wdc  
这篇文章主要总结介绍了JS如何获取对象属性名的方法,需要的朋友可以参考下

最近面试遇到问如何获取对象全部属性名的方法,总结一下:

对象属性类型分类:

1.ESMAScript分类

数据类型 又分为可枚举和不可枚举类型
访问器类型 

2.上下文分类

原型属性
实例属性 

1.列举自身但不包括原型的可枚举属性名 Object.keys(obj)

  // 遍历对象
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.demo = function() {};

let cj = new Person('cj', 25);
// 通过Object.defineProperty定义一个不可枚举属性
Object.defineProperty(cj, 'weight', {
  enumerable:false 
})

// enumerable = true
// console.log(Object.keys(cj)) // name age

// enumerable = false
// console.log(Object.keys(cj)) // name age weight

2.列举包括自身不可枚举但不包括原型的属性名 Object.getOwnPropertyNames(obj)

function Person(name, age) {
  this.name = name;
  this.age = age;
}
// 设置原型属性
Person.prototype.demo = function() {};

let cj = new Person('cj', 25);
// 通过Object.defineProperty定义一个不可枚举属性
Object.defineProperty(cj, 'weight', {
  enumerable:false 
})
// 获取属性名
console.log(Object.getOwnPropertyNames(cj)) // name age weight

3.获取自身和原型链上的可枚举属性 for in 返回的顺序可能与定义顺序不一致

function Person(name, age) {
  this.name = name;
  this.age = age;
}
// 设置原型属性
Person.prototype.demo = function() {};
Object.prototype.j = 1
let cj = new Person('cj', 25);
// 通过Object.defineProperty定义一个不可枚举属性
Object.defineProperty(cj, 'weight', {
  enumerable:false 
})

let props = []
for(prop in cj){
  props.push(prop)
}

console.log(props) //name age weight j

4.获取自身Symbol属性 Object.getOwnPropertySymbols(obj)

let obj = {};
// 为对象本身添加Symbol属性名
let a = Symbol("a");
obj[a] = "localSymbol";
// 为对象原型添加Symbol属性名
let b = Symbol("b")
Object.prototype[b] = 111
let objectSymbols = Object.getOwnPropertySymbols(obj);
console.log(objectSymbols); //Symbol(a)

5.获取自身包括不可枚举和Symbol属性名,但不包括原型 Reflect.ownKeys(obj)

  // 遍历对象
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.demo = function() {};
let s = Symbol('s')
let cj = new Person('cj', 25);
// 通过Object.defineProperty定义一个不可枚举属性
Object.defineProperty(cj, 'weight', {
  enumerable: false 
})
cj[s] = 1
let a = Symbol('a')
Object.prototype[a] = 1
console.log(Object.getOwnPropertyNames(cj)) //name age weight 
console.log(Reflect.ownKeys(cj)) //name age weight Symbol(s)

 更多关于JS获取对象属性名的使用小技巧请查看下面的相关链接

相关文章

  • 微信小程序  audio音频播放详解及实例

    微信小程序 audio音频播放详解及实例

    这篇文章主要介绍了微信小程序 audio音频播放详解及实例的相关资料,附有实例代码及实现效果图,对初学者是个很好的帮助,需要的朋友可以参考下
    2016-11-11
  • JavaScript中isPrototypeOf函数

    JavaScript中isPrototypeOf函数

    这篇文章主要介绍了JavaScript中isPrototypeOf函数,isPrototypeOf() 是 Object函数(类)的下的一个方法,用于判断当前对象是否为另外一个对象的原型,如果是就返回 true,否则就返回 false,下面来看看详细内容,需要的朋友可以参考一下
    2021-11-11
  • 微信小程序 modal组件详细介绍

    微信小程序 modal组件详细介绍

    这篇文章主要介绍了微信小程序 modal组件详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • 微信小程序 label 组件详解及简单实例

    微信小程序 label 组件详解及简单实例

    这篇文章主要介绍了微信小程序 label 组件详解及简单实例的相关资料,需要的朋友可以参考下
    2017-01-01
  • 微信小程序(二十)slider组件详细介绍

    微信小程序(二十)slider组件详细介绍

    这篇文章主要介绍了 微信小程序(二十)slider组件详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • 打包非 JavaScript 静态资源详情

    打包非 JavaScript 静态资源详情

    这篇文章主要介绍了打包非 JavaScript 静态资源,打包工具中的自定义导入,种常见的方法是利用已有的静态导入语法。有些打包工具可能会通过文件扩展名来自动检测格式,而有些其他打包工具则允许插件使用自定义的 URL Scheme,下面具体内举例说明,需要的朋友可以参考一下
    2021-10-10
  • 浅谈JS正则RegExp对象

    浅谈JS正则RegExp对象

    这篇文章主要介绍JS正则RegExp对象,正则表达式是描述字符模式的对象,用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。下面就来看具体详情,需要的朋友可以参考一下
    2021-10-10
  • 微信小程序(十五)checkbox组件详细介绍

    微信小程序(十五)checkbox组件详细介绍

    这篇文章主要介绍了微信小程序checkbox组件详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • 详解Anyscript开发指南绕过typescript类型检查

    详解Anyscript开发指南绕过typescript类型检查

    这篇文章主要为大家介绍了详解Anyscript开发指南绕过typescript类型检查,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 微信小程序 Image API实例详解

    微信小程序 Image API实例详解

    这篇文章主要介绍了微信小程序 Image API实例详解的相关资料,需要的朋友可以参考下
    2016-09-09

最新评论