ES6之对象新操作

1. 属性的简洁表示.

   ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

   const foo = 'bar';

   const baz = {foo};

   baz // {foo: "bar"}

   // 等同于

   const baz = {foo: foo}

   上面的代码中，变量 foo 直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值。

2. 属性名表达式

   JavaScript 定义对象的属性，有两种方法。

   // 方法一

   obj.foo = true;

   // 方法二

   obj['a' + 'bc'] = 123;

   上面代码的方法一是直接用标识符作为属性名，方法二是用表达式作为属性名，这时要将表达式放在方括号之内。

   ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

   但是，如果使用字面量方式定义对象（使用大括号），在 ES5 中只能使用方法一（标识符）定义属性。

3. 方法的name属性

   函数的name属性，返回函数名。对象方法也是函数，因此也有 name 属性。

4. 属性的可枚举性

   对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为。 Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

5. super关键字

   我们知道， this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字 super ，指向当前对象的原型对象。

   注意：super 关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

6. 对象的扩展运算符

   对象的扩展运算符（ ... ）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

   例如：let z = { a: 3, b: 4 };

        let n = { ...z };

            n // { a: 3, b: 4 }

   注意：如果扩展运算符后面不是对象，则会自动将其转为对象。扩展运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象。

   例如：{...'hello'}    // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

   let ab = { ...a, ...b };    // 等同于 let ab = Object.assign({}, a, b);

7. 链式判断运算符

   背景：在实际编程中，如果读取对象内部的某个属性，往往需要判断一下该对象是否存在如下所示，可是这样的层层判断非常麻烦，因此 ES2020 引入了“链判断运算符”（optional chaining operator） ?. ，简化下面的写法。

   const firstName = (message&& message.body&& message.body.user&& message.body.user.firstName) || 'default';

   改进之后，为下面所示：

   const firstName = message?.body?.user?.firstName || 'default';

   上面代码使用了 ?. 运算符，直接在链式调用的时候判断，左侧的对象是否为 null 或 undefined 。如果是的，就不再往下运算，而是返回 undefined 。

   下面是判断对象方法是否存在，如果存在就立即执行的例子。

   例子：iterator.return?.()

8. Null判断运算符

   读取对象属性的时候，如果某个属性的值是 null 或 undefined ，有时候需要为它们指定默认值。常见做法是通过 || 运算符指定默认值。

   例如：const headerText = response.settings.headerText || 'Hello, world!';但是在这种做法是错误的，因为开发者的原意是，只要属性的值为 null 或 undefined ，默认值就会生效，但是属性的值如果为空字符串或 false 或 0 ，默认值也会生效。

   为此，ES2020引入一个新的 Null 判断运算符 ?? 。它的行为类似 || ，但是只有运算符左侧的值为 null 或 undefined 时，才会返回右侧的值。
   

   例如：const animationDuration = response.settings.animationDuration ?? 300;这一行代码中，默认值只有在属性值为 null 或 undefined 时，才会生效。

   这个运算符的一个目的，就是跟链判断运算符 ?. 配合使用，为 null 或 undefined 的值设置默认值。

   例如：const animationDuration = response.settings?.animationDuration ?? 300;上面代码中， response.settings 如果是 null 或 undefined ，就会返回默认值300。

   注意：现在的规则是，如果多个逻辑运算符比如 || &&等一起使用，必须用括号表明优先级，否则会报错。

9. Object.assign()方法

   语法：Object.assign(target, …sources)；

   特点：浅拷贝、对象属性的合并。若目标和源有同名的，则后面的会覆盖前面同名的属性值。

   应用场合：

   （1）合并多个对象；

       /////////////////// 输出结果为：    {name: "shu", age: 12, sex: "男"}

   （2）克隆对象（浅）；

                           Object.assign({}, originObj); // 将原始对象复制给空对象

   （3）为对象添加多个方法。

10. 对象的方法扩展

    Object.values():返回一个给定对象所有可枚举属性值的数组

    Object.keys():返回对象的键名
    Object.entries():返回一个给定对象自身可遍历属性[key,value]的数组，方便map()方法遍历

11. ES6 一共有5 种方法可以遍历对象的属性。

    （1）for...in

    for...in 循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。

    （2）Object.keys(obj)

    Object.keys 返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

    （3）Object.getOwnPropertyNames(obj)

    Object.getOwnPropertyNames 返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

    （4）Object.getOwnPropertySymbols(obj)

    Object.getOwnPropertySymbols 返回一个数组，包含对象自身的所有 Symbol 属性的键名。

    （5）Reflect.ownKeys(obj)

    Reflect.ownKeys 返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

    以上的 5 种方法遍历对象的键名，都遵守同样的属性遍历的次序规则。

    首先遍历所有数值键，按照数值升序排列。

    其次遍历所有字符串键，按照加入时间升序排列。

    最后遍历所有 Symbol 键，按照加入时间升序排列。

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。