学习ES6 对对象的扩展方法-对象属性可枚举性

前言

前一篇更文对 ES6 对于对象的新增扩展 对象扩展运算符使用进行了学习了解, 以及有对对象的扩展进行了初步学习-对象属性的简写. 本文继续来学习 ES6 的重要的知识点: 关于对 对象的扩展 属性的可枚举性

熟练使用 ES6 及更高版本对于我们在项目开发中可提高开发效率! 前面文章学习了 JavaScript 中操作数组的一些方法(Array.splice()/slice()/map()/reduce()等高阶函数), JavaScript 并不完美但是不影响其运行, 这里学习其中的一些神奇"bug"直达列表

ES6 - 对象的扩展

ES6 对对象扩展了许多方法, 这些方法不仅方便了我们书写, 有对有些数据处理进行了优化, 更加便捷地方便我们处理数据逻辑等.

对象-属性的可枚举性

可枚举性:

MDN | 可枚举属性 是指那些内部 “可枚举” 标志设置为 true 的属性, 对于通过直接的赋值和属性初始化的属性, 该标识值默认为即为 true, 对于通过 Object.defineProperty 等定义的属性, 该标识值默认为 false。

一个对象的所有的属性可以一次性的获取到, 内置的方法可以用于判断、迭代/枚举以及获取对象的一个或一组属性

对象的每个属性都有一个描述对象（Descriptor）, 用来控制该属性的行为。

可以通过 Object.getOwnPropertyDescriptor()方法可以获取该属性的描述对象, 代码如下

let obj = { pro: 222222 };
Object.getOwnPropertyDescriptor(obj, 'pro')
//  {
//    value: 222222,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

可枚举的属性可以通过 for...in 循环进行遍历（除非该属性名是一个 Symbol）

对象的 enumerable 属性作为是否可枚举的标志, 称为“可枚举性”, 如果该属性为false, 就表示某些操作会忽略当前属性:

目前, 有四个操作会忽略enumerable为false的属性。

这四个操作之中, 前三个是 ES5 就有的, 而 Object.assign()是 ES6 新增的。

1. JSON.stringify()： 只串行化对象自身的可枚举的属性。
2. Object.keys()： 返回对象自身的所有可枚举的属性的键名。
3. for...in循环： 只遍历对象自身的和继承的可枚举的属性。
4. Object.assign()： 忽略enumerable为false的属性, 只拷贝对象自身的可枚举的属性。

Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false

Object.getOwnPropertyDescriptor([], 'length').enumerable
// false

注意: ES6 规定, 所有 Class 的原型的方法都是不可枚举的。

相关阅读文章列表

• JavaScript 学习-函数剩余参数
• JS 小问题学习-函数可选参数
• JS 学习-for 循环
• JS 不完美亦可运行-自动加分号(;)问题、
• JS 不完美亦可运行-数组对象相加问题、
• JS 并不完美之箭头函数相关(二)、
• JS 并不完美~(一)浮点数
• JavaScript 高阶函数(一)
• JavaScript 高阶函数之 reduce
• 数组扁平化 Array.prototype.flat()
• 灵活操作数组数据 slice()
• 灵活操作数组-数组中间插入数据 splice()

学习 ES6系列:

1. ES6-解构赋值
2. ES6-数组扩展方法-find()/findIndex()
3. ES6-数组扩展方法-Array.from()处理数组
4. ES6 学习理解-Array 扩展方法 includes()
5. ES6 学习理解-Array 扩展 sort()排序的稳定性
6. ES6 学习理解-Proxy(一)
7. ES6 学习理解-Proxy的使用(二)
8. ES6 对对象的扩展方法-属性简写
9. ES6 对对象的扩展方法-扩展运算符

学习参考文档

• MDN | ES6-Object