ES8(2017)Object 扩展 values() / entries() / getOwnPropertyDescriptors()

Posted 2021-05-18 优小U

文章目录

• Object.values()
• Object.entries()
• Object.getOwnPropertyDescriptors()

ES8之前获取对象的每个属性的value值：

const obj = {
    name: 'xiaoming',
    course: 'es'
}
console.log(Object.keys(obj))
const res = Object.keys(obj).map(key => obj[key])
console.log(res)
// ["xiaoming", "es"]

ES8中对象扩展补充了两个静态方法，用于遍历对象：Object.values()，Object.entries()

Object.values()

Object.values() 返回一个数组，其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。（for...in还会遍历原型上的属性值）

const obj = {
    name: 'xiaoming',
    course: 'es'
}
console.log(Object.values(obj))
// ["xiaoming", "es"]

Object.values 是在对象上找到可枚举的属性的值，所以只要这个对象是可枚举的就可以，不只是{}这种形式。

Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for...in循环遍历该对象时返回的顺序一致。（区别在于 for-in 循环也枚举原型链中的属性）

我们知道 Object 是不可直接遍历的，如果使用Object.entries()则可以完成遍历任务。

let xiaoming = {
    'name': 'xiaoming',
    'age': 18,
    'addr': 'China'
}

for (let [k, v] of Object.entries(xiaoming)) {
    console.log(k, v)
}
// name,xiaoming
// age,18
// addr,China

Object.entries() 返回的是个数组，里面包含了[key,value]的数据，这里也用了解构赋值的方式。

Object.getOwnPropertyDescriptors()

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

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

const data = {
    zhangsan: 60,
    lisi: 88,
    wangwu: 90
}
// 设置 lisi 不可枚举
Object.defineProperty(data, 'lisi', {
    enumerable: false
})

Object.entries(data).map(([city, temp]) => {
    console.log(city, temp)
})
// zhangsan,60
// wangwu,90

// 获取对象指定属性的描述符
console.log(Object.getOwnPropertyDescriptor(data, 'lisi'))
// {"value":88,"writable":true,"enumerable":false,"configurable":true}

// 获取对象所有属性的描述符 （getOwnPropertyDescriptors  多了一个s）
console.log(Object.getOwnPropertyDescriptors(data))
// {
//   "zhangsan":{"value":60,"writable":true,"enumerable":true,"configurable":true},
//   "lisi":{"value":88,"writable":true,"enumerable":false,"configurable":true},
//   "wangwu":{"value":90,"writable":true,"enumerable":true,"configurable":true}
// }