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

Posted 优小U

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES8(2017)Object 扩展 values() / entries() / 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}
// }

以上是关于ES8(2017)Object 扩展 values() / entries() / getOwnPropertyDescriptors()的主要内容,如果未能解决你的问题,请参考以下文章

ES8对对象的扩展

es8 --- 新特性

ECMA Script 2017 (ES8)新内容

ECMA Script 2017 (ES8)新内容

ECMA Script 2017 (ES8)新内容

es8对object快速遍历的方法