【ES8系列】获取 Object 对象属性描述符

最新推荐文章于 2024-11-10 10:48:29 发布

原创最新推荐文章于 2024-11-10 10:48:29 发布 · 518 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#对象属性描述符 #getOwnPropertyDescriptors

Javascript 基本功同时被 2 个专栏收录

43 篇文章

订阅专栏

ES8

4 篇文章

订阅专栏

本文详细解释了JavaScript中描述符(descriptor)的概念，包括其在Object.defineProperty中的应用，以及如何使用Object.getOwnPropertyDescriptors和Object.getOwnPropertyDescriptor来获取对象属性的描述符。通过具体示例，展示了如何设置属性的可枚举性，为理解和操作对象属性提供了实用指南。

什么是描述符(descriptor)？

// 业务场景：从接口拿到学生信息数据，某些学生退学，所以展示时需要跳过
const data = {
  PortLand: '78/50',
  DuLin: '88/52',
  Lima: '58/40'
}
// 使指定数据不可枚举
Object.defineProperty(data, 'Lima', {
  enumerable: false
})
console.log(Object.keys(data)) // ["PortLand", "DuLin"]

defineProperty 的第三个参数就是描述符(descriptor)。这个描述符包括几个属性：

value [属性的值]
writable [属性的值是否可被改变]
enumerable [属性的值是否可被枚举]
configurable [描述符本身是否可被修改，属性是否可被删除]

Object.getOwnPropertyDescriptors()

获取对象的所有属性的描述符

// 业务场景：从接口拿到学生信息数据，某些学生退学，所以展示时需要跳过
const data = {
  PortLand: '78/50',
  DuLin: '88/52',
  Lima: '58/40'
}
// 使指定数据不可枚举
Object.defineProperty(data, 'Lima', {
  enumerable: false
})
console.log(Object.keys(data)) // ["PortLand", "DuLin"]
console.log(Object.getOwnPropertyDescriptors(data))
// {PortLand: {…}, DuLin: {…}, Lima: {…}}
// DuLin:
//     configurable: true
//     enumerable: true
//     value: "88/52"
//     writable: true
//     __proto__: Object
// Lima:
//     configurable: true
//     enumerable: false
//     value: "58/40"
//     writable: true
//     __proto__: Object
// PortLand:
//     configurable: true
//     enumerable: true
//     value: "78/50"
//     writable: true
//     __proto__: Object
// __proto__: Object

Object.getOwnPropertyDescriptor()

获取对象指定属性的描述符

const data = {
  PortLand: '78/50',
  DuLin: '88/52',
  Lima: '58/40'
}
// 使指定数据不可枚举
Object.defineProperty(data, 'Lima', {
  enumerable: false
})
console.log(Object.keys(data)) // ["PortLand", "DuLin"]
console.log(Object.getOwnPropertyDescriptor(data, 'Lima')) 
//{value: "58/40", writable: true, enumerable: false, configurable: true}