Es6 Object.assign()方法简单理解？

Object.assign() 的剖析？

• Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。【大白话：用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）】

语法：

Object.assign(target, ...sources) // 参数：（目标对象，...源对象） 
// 只有第一个是目标对象，后面的均是源对象。
// 返回值：目标对象
****** 注意的此方法 用于可枚举的对象 （常见小问题 12 有说明）*****

实例：

<script>
    const target_obj = { a: 1, b: 2 } // 此为目标对象
    const source_obj = { c: 3, d: 4 } // 此为源对象
    const result_obj = Object.assign(target_obj, source_obj)
    console.log(result_obj) // object => {a: 1, b: 2, c: 3, d: 4}
  </script>

实例说明：如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。(如下面代码所示)

<script>
    const target_obj = { a: 1, b: 2 } // 此为目标对象
    const source_obj = { b: "rose", d: "jack" } // 此为源对象
    const result_obj = Object.assign(target_obj, source_obj)
    console.log(result_obj) // object => {a: 1, b: "rose", d: "jack"}
  </script>

常见的小问题？

// 1.只有一个参数
const obj = {one: 88}
console.log(Object.assign(obj)) // 直接返回 {one: 88}

// 2.如果该参数不是对象？--- 如果参数非对象，这里也会默认转化为对象
const notObj = ['I','love','you']
console.log(Object.assign(notObj)) //  ["I", "love", "you"]
console.log(typeof Object.assign(notObj)) // object 

// 3. 对象为 undefined 和 null 呢？--- 报错
console.log(Object.assign(undefined))
console.log(Object.assign(null))

* 报错error: Cannot convert undefined or null to object 
* at Function.assign (<anonymous>)

// 4. 非对象参数，undefined 和 null 并非出现在 第一个参数位(目标参数)，不报错
  const obj_a = { a: 33 }
  const obj_null = null
  console.log(Object.assign(obj_a, obj_null)) // {a: 33}

// 5.其他类型的值不在首参数也不会报错。但是字符串会以数组的形式 拷贝入对象，其他值不会产生其他效果
  const v1 = 'abc';
  const v2 = true;
  const v3 = 10;
  const v4 = { 'Symbol': 0 };
  const obj2 = Object.assign({}, v1, v2, v3, v4);
  console.log(obj2); // {0: "a", 1: "b", 2: "c", Symbol: 0}

// 6.Object.assign拷贝的属性是有限制的，只拷贝原对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性
  const data = Object.assign({ b: 'c' },
    Object.defineProperty({}, 'invisible', {
      enumerable: false,
      value: 'hello'
    })
  )
  console.log(data) // 打印只有目标对象 {b: 'c'}

// 7.属性名为Symbol值得属性，也会被Object.assign拷贝
  Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
  console.log(Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' }))

// 8.注意点：
// 浅拷贝 如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用（如果有不理解，下面有解释?）。
  const obj3 = { a: { b: 1 } };
  const obj4 = Object.assign({}, obj3)
  obj3.a.b = 2;
  console.log(obj4) // {a: {b: 2}}
  console.log(obj4.a.b) // 2

// 9.同名属性的替换 一旦遇到同名属性，Object.assign的处理方法是替换，而不是添加
  const target1 = { a: 8 };
  const source3 = { a: 9 };
  console.log(Object.assign(target1, source3)) // {a: 9}

// 10.数组处理 把数组视为对象，将源对象复制到目标对象合并，替换目标对象所对应值，从下标0开始，返回值 -- 目标对象
  var c1 = [66, 55, "目标对象多余，下标为2"]
  var c2 = [55, 44]
  console.log(Object.assign(c1, c2)) // [55, 44]
  var obj5 = Object.assign([1, 2, 3], [4, 5]);
  console.log(typeof obj5) // object
  console.log(obj5); // [4, 5, 3]

// 11.取值函数的处理 如果要复制的值是取值函数，那么求值后再复制
  const source4 = {
    get foo() { return 1 }
  }
  const target4 = {};
  console.log(Object.assign(target4, source4)); // {foo: 1}

// 12.只有字符串的包装对象才可能有自身可枚举属性。
  const s1 = "abc";
  const s2 = true;
  const s3 = 10;
  const s4 = Symbol("foo")
  const res_obj = Object.assign({}, s1, null, s2, undefined, s3, s4);
  // 原始类型会被包装，null 和 undefined 会被忽略。
  // 注意，只有字符串的包装对象才可能有自身可枚举属性。
  console.log(res_obj); // { "0": "a", "1": "b", "2": "c" }

什么是对象的引用？

举个例子：

// 数值类型

var a = 1;
var b = a;
b = a;
console.log(a) // 1

// 引用类型
var a1 = {x:1};
var b1 = a1;
b1.x = 3
console.log(a1.x) // 3

说明：引用相当于指针。多个变量引用同一个对象实例，通过其中一个去修改它，结果会作用到所有引用变量上，因为它们其实都指向同一个对象。

常见的用途？

    // 1.为对象添加属性
    class Point {
      constructor(x, y) {
        Object.assign(this, { x: 1, y: 2 })
      }
    }
    console.log(new Point()) // Point {x: 1, y: 2}

    // 2.为对象添加方法
    const funcObj = { a: 22 }
    // var addFunc = Object.assign(Point.prototype, {
    //   someMethod(arg1, arg2) { },
    //   anotherMethod() { }
    // });
    var addFunc = Object.assign(funcObj, {
      someMethod(arg1, arg2) { },
      anotherMethod() { }
    });
    console.log(addFunc) // {a: 22, someMethod: ƒ, anotherMethod: ƒ}

    // 3.克隆对象
    const target5 = {} // 最终 目标地
    const source_1 = { one: '这里是将要被克隆的 源对象1' }
    const source_2 = { two: '这里是将要被克隆的 源对象2' }
    console.log(Object.assign(target5, source_1, source_2))
    // {one: "这里是将要被克隆的 源对象1", two: "这里是将要被克隆的 源对象2"}
    // 克隆(合并多个)方法
    function clone(...origin) {
      return Object.assign({}, origin);
    }
    var res = clone(source_1, source_2)
    console.log(res)
    // {0: {…}, 1: {…}}
    // 0: {one: "这里是将要被克隆的 源对象1"}
    // 1: {two: "这里是将要被克隆的 源对象2"}
    // __proto__: Object
    

Object.assign() 是深拷贝还是浅拷贝？

当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。

?请戳这里   JavaScript|MDN 官方讲解