8-ES6-对象的扩展

1、ES6允许直接写入变量和函数作为对象的属性和方法。

ES6允许对象只写属性名，不写属性值。这时，属性值等于属性名所代表的的变量。

例1

   let foo = 'bar';
   let obj = { foo };
   // 等同于
   let obj = { foo: foo };

例2

   function f( x, y ){
     return { x, y };
   };
   //等同于
   function f( x, y ){
     return { x: x, y: y };
   };
   f( 1, 2 ); // Object { x: 1, y: 2 }

2、除了属性简写，方法也可以简写

   let obj = {
     method(){
       return 'Hello!';
     };
   };
   // 等同于
   let obj = {
     method: function(){
       return "Hello";
     };
   };

3、属性名表达式。JavaScript语言定义对象的属性有两种方法

方法一 标识符作为属性名

    var obj = {};
    obj.foo = 'hello';

方法二 表达式作为属性名

    var obj = {};
    obj['a'+'bc'] = 123;

4、如果使用字面量方式定义对象(使用大括号{}),ES5只能使用标识符定义属性。ES6允许字面量定义对象属性时使用方法二(表达式作为对象的属性名)，即把表达式放在方括号内[]。

ES5

    var obj = { foo: true, abc: 123 };

ES6

    let proKey = 'foo';
    let obj = {
      [proKey]: true,
      ['a'+'bc']: 123
    }

5、属性名表达式与间接表示法不能同时使用，否则会报错

     // 报错
     let foo = 'bar';
     let bar = 'abc';
     var baz = { [foo] };

     // 正确
     let foo = 'bar';
     let baz = { [ foo ]: 'abc' }

6、属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串 [Obiect Obiect]

     const keyA = { a: 1 };
     const keyB = { b: 2 };
     const myObj = {
       [keyA]: 'valueA',
       [keyB]: 'valueB'
     };
     console.log(myObj.keyB );  // Object { [ Object Obiect ]: 'valueB' }
     
    上面代码中，[keyA]和[keyB]得到的都是 [ Object Obiect ], 所以 [ keyB ]会把
    [ keyA ] 覆盖掉，而 myObj 最后只有一个 [ Object Obiect ] 属性。

7、Object.is();

用来比较两个值是否严格相等，与严格相等运算符( === )行为基本一致。
不同之处只有两个：一是 +0 不等于 -0; 二是NaN 等于自身

        Object.is( +0, -0 );       // false
        Object.is( NaN, NaN );     // true
        Object.is( 'foo', 'foo' ); // true
        Obiect.is( {}, {} );       // false

8、Object.assign()基本用法;

1)将源对象(source)的所有可枚举属性赋值到目标对象(target)

     let target = { a: 1 };
     let source1 = { b: 2 };
     let source2 = { c: 3 };
     console.log(Object.assign(target, source1, source2));  // {a:1,b:2,c:3}

2)如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性

     let target = { a: 1, b: 1 };
     let source1 = { b: 2, c: 2 };
     let source2 = { c: 3 };
     Object.assign( target, source1, source2 ); // {a:1,b:2,c:3}

3)如果只有一个参数，Object.assign()会直接返回该参数

    let obj = { a: 1 };
    Object.assign( obj ) === obj; // true

4)如果参数不是对象，则会先转成对象，然后返回

    typeof Object.assign( 2 ); // Object

5)由于 undefined 和 null 无法转成对象，所以如果将它们作为参数就会报错

    Object.assign( undefined ); // 报错
    Object.assign( null );      // 报错

6)如果非对象参数出现在对象的位置(即非受参数),那么处理规则将有所不同。首先，
这些参数都会转成对象,如果无法转成对象便会跳过。意味着,如果 undefined 和
null 不在首参数便不会报错。

    let obj = { a: 1 };
    Object.assign( obj, undefined ); === obj; // true
    Obiect.assign( obj, null ) === obj;       // true

7)其他类型的值(即数值、字符串和布尔值)不在首参数也不会报错。但是，除了字符串会以
数组的形式复制到目标对象，其他值都不会产生效果。只有字符串的包装对象会产生可枚举
属性。

    let str = 'abc';
    let bool = true;
    let num = 10;
    let obj = Object.assign( obj, str, bool, num ); // {'0':'a','1':'b','2':c}

8)Object.assign()复制的属性是由限制的,值复制源对象的自身属性(不复制继承属性)，也
不复制不可枚举属性( enumerable: false )

    Object.assign({b:'1'},
      Object.defineProperty( {}, 'invisible', {
        enumerable: false,
        value: 'hello'
      })
    );
    // { b: '1' }

9)属性名为 Symbol 值得属性也会被 Object.assign()复制

    Object.assign({a:'b'},{ [Symbol('c')]: 'd'});
    // { a: 'b', [Symbol('c')]: 'd' }

9、Object.assign()—注意点

1)Object.assign()实行的是浅复制，而不是深复制。也就是说，如果源对象某个属性的值
是对象，那么目标对象复制得到的是这个对象的引用。

    let obj1 = { a: { b: '1' } };
    let obj2 = Object.assign( {}, obj1 );
    obj1.a.b = 2; // 1
    obj2.a.b;     // 2

10、Object.assign()—常见用途

1)为对象添加属性

      calss Point {
        constructor( x, y ){
          Object.assign( this, { x, y } );
        }
      };

2)为对象添加方法

    class SomeClass {}
    Object.assign( SomeClass.prototype, {
      someMethod(){}
    });

3)Object.assign()—克隆对象

      将原始对象复制到一个空对象中，得到原始对象的克隆。这种方法只能克隆原始对象
      自身的值，不能克隆它继承的值。

      let origin = { a: '1' };
      function clone( origin ){
        return Object.assign( {}, origin );
      };

      如果要保持继承链，采用下面写法
      function clone( origin ){
        let originProto = Object.getPrototypeOf( origin );
        return Object.assign( Object.create( originProto ), origin );
      };

4)Object.assign()—合并多个对象

    const merge = ( target, ...source ) => Object.assign(target,...source);

5)Object.assign()—合并返回一个新对象

	const merge = ( ...source ) => Object.assign( {}, ...source );

6)为属性指定默认值

    const EDFAULTS = {
      logLevel: 0,
      outputFormat: 'html'
    };

11、属性的可枚举性

    对象的每一个属性都具有一个描述对象(Descriptor)，用于控制该属性的行为

1)Object.getOwnPropertyDesctiptor()–获取该属性的描述对象

      let obj = { foo: 123 };
      Object.getOwnPropertyDescriptor( obj, 'foo' );
      // {
      //   value: 123,
      //   writable: true,     可读写
      //   enumerable: true,   可遍历
      //   configurable: true  可配置
      // }

2)ES5有3个操作会忽略 enumerable 为 false 的属性，ES6的 Object.assign() 也会忽略 enumerable 为 false 的属性。

      · for...in循环: 只遍历对象自身的和继承的可枚举属性
      · Object.keys(): 返回对象自身的所有可枚举属性的键名,以数组形式返回
      · JSON.stringify(): 只串行化对象自身的可枚举属性,返回对象形式
      · Object.assign(): 只复制对象自身的可枚举属性

      以上4个操作之中，只有 for...in会返回继承的属性。引入 enumerable 的最初目的就
      是让某些属性可以规避掉 for...in操作。对象原型的 toString() 以及数组的 length
      属性, 都是设置 enumerable 为 false 不被 for...in 遍历到。

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

3)ES6规定，所有 class 的原型方法都是不可被枚举的

      Object.getOwnPropertyDescriptor( class { foo(){} }.prototype, 'foo' ).enumerable; 
      // false

12、属性的遍历

1)for…in:
循环遍历对象的自身和继承的可枚举属性(不含Symbol属性)

    2)Object.keys():
      返回一个数组,包括对象自身的所有可枚举属性(不含继承的,不含Symbol属性)

    3)Object.getOwnPropertyNames(obj):
      返回一个数组,包含对象的所有属性(不含Symbol属性),包括不可枚举属性

    4)Object.getOwnPropertySymbols(obj):
      返回一个数组,包含对象自身的所有 Symbol 属性

    5)Reflect.ownKeys(obj):
      返回一个数组,包含对象自身的属性,不管属性名是 Symbol 还是 string 也不管是否可枚举

    以上5中方法遍历对象的属性时都遵守同样的属性遍历次序：
    · 首先遍历所有属性名为 数值 的属性，按照数字排序
    · 其次遍历所有的属性名为 字符串 的属性，按照生成时间排序
    · 最后遍历所有属性名为 Symbol 值的属性，按照生成时间排序

13、Object.getPrototypeOf(obj)

1)读取一个对象的 prototype 对象

   function Rectangle(){};
   let rec = new Rectangle();
   Object.getPrototypeOf( rec ).constructor;       // f Rectangle
   Object.getPrototypeOf( rec ) === rec.prototype; // true

   Object.setPrototypeOf( rec, Object.prototype );
   Object.getPrototypeOf( rec ) === rec.prototype; // false

2)如果参数不是对象，则会自动转为对象

   Object.getPrototypeOf( 1 );     // Number {}
   //等同于 Object.getPrototypeOf( Number( 1 ) );

   Object.getPrototypeOf( '1' );   // String {}
   //等同于 Object.getPrototypeOf( String( 1 ) );

   Object.getPrototypeOf( true );  // Boolean {}
   //等同于 Object.getPrototypeOf( Boolean( 1 ) );

3)如果参数是 undefined 或 null,它们无法转为对象,所以会报错

        Object.getPrototypeOf( null );
        // TypeError: Cannot convert undefined or null to object

        Object.getPrototypeOf( undefined );
        // TypeError: Cannot convert undefined or null to object

14、Object.setPrototypeOf(Object,prototype)

1)设置一个对象的 prototype 对象,返回参数对象本身(第一个参数)

      let obj = Object.setPrototypeOf( {}, null );
      // 等同于下面函数
      function ( obj, proto ){
        obj.__proto__: proto;
        return obj
      };

2)如果第一个参数不是对象，则会自动转为对象。但是由于返回的还是第一个参数，所以这个操作不会产生任何效果。

        Object.setPrototypeOf( 1, {} ) === 1;         // true
        Object.setPrototypeOf( '1', {} ) === '1';     // true
        Object.setPrototypeOf( true, {} ) === true;   // true

3)由于 undefined 和 null 无法转为对象,所以如果第一个参数是 undefined或 null会报错

        Object.setPrototypeOf( undefined );
        // TypeError: Object.setPrototypeOf called on null undefined

        Object.setPrototypeOf( null );
        // TypeError: Object.setPrototypeOf called on null undefined

15、Object.keys()返回一个数组，成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名

    let obj = { foo: 'bar', baz: 42 };
    console.log( Object.keys( obj ) ); // [ 'foo', 'baz' ]

16、Object.values()返回一个数组，成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值

      let obj = { foo: 'bar', baz: 42 };
      console.log( Object.values( obj ) );  // [ 'bar', 42 ]

1)Object.values()会过滤属性名为 Symbol 值的属性

    console.log( Object.values( { [Symbol()]: 123, foo: 'abc' } ) ); // [ 'abc' ]

2)Object.values()的参数是一个字符串，则会返回各个字符组成的一个数组

      console.log( Object.values( 'foo' ) );
      // [ 'f', 'o', 'o' ]

3)如果参数不是对象，Object.values()会先将其转为对象。由于数值和布尔值的包装对象
都不会为实例添加非继承的属性，所有 Object.values() 会返回一个空数组

      console.log( Object.values( 1 ) );    // []
      console.log( Objcet.values( true ) ); // []

17、Object.entries()返回一个数组，成员是参数对象的(不含继承的)所有可遍历(enumerable: true)属性的键值对数组

      let obj = { foo: 'bar', baz: 42 };
      console.log( Object.entries( obj ) ); // [ [ "foo", "bar" ], [ "baz", 42 ] ]

1)如果原对象的属性名是一个 Symbol 值,该属性会被忽略

      let obj = { [Symbol()]: 123, foo: 'abc' };
      console.log( Object.entries( obj ) ); // [ 'foo', 'abc' ]

2)Object.entries()可以将对象转为真正的 Map 结构

      let obj = { foo: 'bar', baz: 42 };
      let map = new Map( Object.entries( obj ) );
      // Map { foo: 'bar', baz: 42 }

18、对象的扩展运算符

1)解构赋值–对象的解构赋值用于从一个对象取值,相当于将所以可遍历的、但尚未被读取的属性分配指定对象上。所有的键和他们的值都会复制到新对象上面

        let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
        // x 1
        // y 2
        // z { a: 3, b: 4 }

2)由于解构赋值要求等号右边是一个对象,所以如果等号右边是 undefined 或 null 就会报错，因为它们无法转为对象。

        let { x, y, ...z } = null;       // 运行报错
        let { x, y, ...z } = undefined;  // 运行报错

3)解构赋值必须是最后一个参数，否则会报错

        let { ...x, y, z } = obj;     // 语法错误
        let { x, ...y, ...z } = obj;  // 语法错误

4)解构赋值的复制是浅复制，即如果一个键的值是复合类型的值( 数组、对象、函数),那么 解构赋值复制的是这个值的引用，而不是这个值的副本。

        let obj = { a: { b: 1} };
        let { ...x } = obj;
        obj.a.b = 2;
        x.a.b = 2;

5)解构赋值不会复制继承自原型对象的属性

        let obj1 = { a: 1 };
        let obj2 = { b: 2 };
        obj2.__proto__ = obj1;
        let { ...obj3 } = obj2;

1)扩展运算符—扩展运算符(…)用于取出参数对象的所有可遍历属性，并将其赋值到当前对象之中。

        let z = { a: 3, b: 4 };
        let n = { ...z };       // n { a: 3, b: 4 }
        // 等同于 Object.assign()
        let n = { ...z };
        let obj = Object.assign({},n);

2)如果想完整克隆一个对象, 还要复制对象原型的属性

        // 写法一
        const clone1 = {
          __proto__: Object.getPrototypeOf( obj );
          ...obj
        };

        // 写法二
        const clone2 = Object.assign(
          Object.create( Object.getPrototypeOf( obj ) ),
          obj
        );

3)扩展运算符可以合并两个对象

       let a = { a: '1' };
       let b = { b: '2' };
       let newObj = { ...a, ...b };    // { a: '1', b: '2' }

4)如果用户自定义的属性放在扩展运算后面，则扩展运算符内部的同名属性会被覆盖

       let obj1 = { a: '1', b: '2' };
       let obj2 = { ...obj1, x: '6', y: '5' };
       obj2 = { ...obj1, ...{ x: '10', y: '20' } }; // {a: "1", b: "2", x: "10", y: "20"}

5)如果把自定义属性放在扩展运算符前面,就变成了设置新对象的默认属性值

       let obj1 = { s: '1' };
       let obj2 = { x: '1', y: '2', ...s };
       // 等同于
       let newObj = Object.assign( {}, { x: '1', y: '2' }, obj1 );

6)对象的扩展运算符后面可以带有表达式

       const obj = {
         ...( x > 1 ? { a: 1 } : {} ),
         b: 2
       };

7)如果扩展运算符后面是一个空对象,则没有任何效果

       { ...{}, a: 1 };   // { a: 1 }

19、Object.getOwnPropertyDescriptors()—返回指定对象所有自身属性(非继承属性)的描述对象

       let obj = {
         foo: 123,
         get bar(){ return 'abc' }
       };
       Object.getOwnPropertyDescriptors( obj );
       // {
       //   foo: {
       //     value: 123,
       //     writable: true,
       //     enumerable: true,
       //     configurable: true
       //   },
       //    bar: {
       //      get:[ Function: bar ],
       //      set: undefined,
       //      enumerable: true,
       //      configurable: true
       //    }
       // }