Object.assign()

目录

1、Object.assign()是什么？

2、Object.assign()用法：

3、Object.assign()用法示例：

       3.1  目标对象和源对象无重名属性 : 直接合并

        3.2  目标对象和源对象有重名属性 : 后面的覆盖前面的

                3.3 有多个源对象: 源对象往target上合并，同时遇到属性相同，后者覆盖前者

        3.4  Object.assign() 只会拷贝对象自身并且可枚举的属性到目标对象上，继承属性和不可枚举属性是不能拷贝的：布尔值和数值属性都是不可枚举的

        3.5  碰到...拓展运算符

4、注意事项：

---

1、Object.assign()是什么？

        ES6文档：Object.assign() 用于将所有可枚举属性的值从一个或多个源对象（sources）分配到目标对象（target），并返回目标对象（target）。

       Object.assign()是对象的静态方法，主要用于对象合并。Object.assign()拷贝是浅拷贝，它拷贝的是属性值

2、Object.assign()用法：

Object.assign(target, ...sources)

// 参数：target--->目标对象

     // source--->源对象

// 返回值：target，目标对象

3、Object.assign()用法示例：

       3.1  目标对象和源对象无重名属性 : 直接合并

var target = {name:'xx', age:20}
var source = {class: '3班'}
var result = Object.assign(target,source)
console.log(result); // {name: 'xx', age: 20, class: '3班'}
console.log(target); // {name: 'xx', age: 20, class: '3班'}
console.log(source); // {name: 'xx', age: 20, class: '3班'}
console.log(target===result); // true



// 如果只想把多个属性合并一起，不想改变原来对象属性，用一个空对象作为target对象
var target = {name:'xx', age:20}
var source = {class: '3班'}
var result = Object.assign({}, target,source)
console.log(result); // {name: 'xx', age: 20, class: '3班'}
console.log(target); // {name:'xx', age:20}
console.log(source); // {class: '3班'}
console.log(target===result); // false

        3.2  目标对象和源对象有重名属性 : 后面的覆盖前面的

var target = {name:'xx', age:20}
var source = {class: '3班', age:23}
var result = Object.assign(target,source)
console.log(result); // {name: 'xx', age: 23, class: '3班'}
console.log(target); // {name: 'xx', age: 23, class: '3班'}
console.log(source); // {name: 'xx', age: 23, class: '3班'}
console.log(target===result); // true



// 如果只想把多个属性合并一起，不想改变原来对象属性，用一个空对象作为target对象
var target = {name:'xx', age:20}
var source = {class: '3班', age:23}
var result = Object.assign({}, target,source)
console.log(result); // {name: 'xx', age: 23, class: '3班'}
console.log(target); // {name:'xx', age:20}
console.log(source); // {class: '3班', age:23}
console.log(target===result); // false

        3.3 有多个源对象: 源对象往target上合并，同时遇到属性相同，后者覆盖前者

var target = {name:'xx', age:20}
var source = {class: '3班', age:23}
var sou = {friend: 'yy', sport: 'running'}
var result = Object.assign(target, source, sou)
console.log(result); // {name: 'xx', age: 23, class: '3班', friend: 'yy', sport: 'running'}
console.log(target); // {name: 'xx', age: 23, class: '3班', friend: 'yy', sport: 'running'}
console.log(source); // {name: 'xx', age: 23, class: '3班', friend: 'yy', sport: 'running'}
console.log(target===result); // true



var target = {name:'xx', age:20}
var source = {class: '3班', age:23}
var sou = {friend: 'yy', class: '4班'}
var result = Object.assign(target, source, sou)
console.log(result); // {name: 'xx', age: 23, class: '4班', friend: 'yy'}
console.log(target); // {name: 'xx', age: 23, class: '4班', friend: 'yy'}
console.log(source); // {name: 'xx', age: 23, class: '4班', friend: 'yy'}
console.log(target===result); // true

        3.4  Object.assign() 只会拷贝对象自身并且可枚举的属性到目标对象上，继承属性和不可枚举属性是不能拷贝的：布尔值和数值属性都是不可枚举的

var s = "abc";
var so = true;
var sou = 10;
var result = Object.assign({}, s, so, sou)
console.log(result); // {0: 'a', 1: 'b', 2: 'c'}
console.log(s); // 'abc'
console.log(so); // true
console.log(so); // 10


var s = "abc";
var so = true;
var sou = 10;
var result = Object.assign(s, so, sou)
console.log(result); // {'abc'}
console.log(s); // 'abc'
console.log(so); // true
console.log(so); // 10

        3.5  碰到...拓展运算符

let obj ={
    a:1,
    b:2,
}
let obj2={
    c:3,
    a:4,
    b:5,
}
let obj3={
    ...obj,  // 后面的合并前面的
    c:3,
    a:4,
    b:5
}
console.log(obj3);//{ a: 4, b: 5, c: 3 }


let obj4={
    c:3,
    a:4,
    b:5,
    ...obj // 后面的合并前面的
}
console.log(obj4);//{ c: 3, a: 1, b: 2 }
console.log(obj2 === obj)//false

4、注意事项：

        4.1  目前IE浏览器不兼容Object.assign()

        4.2  异常会终止拷贝

        4.3  Object.assign()拷贝是浅拷贝，它拷贝的是属性值，假如源对象的属性值是一个对象 obj，那么拷贝的则是这个对象值的指针（也就是地址）；这个时候修改obj 的值，则目标对象会受到影响。

var tar = {a:1, b: {c:2}}
var sou = {d:3}
var result = Object.assign(sou, tar)
console.log(result); // {d:3,a:1, b: {c:2}}
tar.b.c = 4
console.log(result); // {d:3,a:1, b: {c:4}}


var tar = {a:1, b: {c:2}}
var sou = {d:3}
var result = Object.assign(sou, JSON.parse(JSON.stringify(tar)))
console.log(result); // {d:3,a:1, b: {c:2}}
tar.b.c = 4
console.log(result); // {d:3,a:1, b: {c:2}}
// JSON.parse(JSON.stringify())深拷贝方法