ES6 Object.assign用法

一、Object.assign是什么

首先了解下Object.assign()是什么。我们先看看ES6官方文档是怎么介绍的

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

简单来说，就是Object.assign()是对象的静态方法，可以用来复制对象的可枚举属性到目标对象，利用这个特性可以实现对象属性的合并。

二、用法

 Object.assign(target, ...sources)
 参数： target--->目标对象
       source--->源对象
       返回值：target，即目标对象

三、使用示例

3.1 目标对象和源对象无重名属性

var target={name:'guxin',age:25};
var source={state:'single'}
var result=Object.assign(target,source);
console.log(target,target==result);

结果

我们可以看到source上的state属性合并到了target对象上。如果只是想将两个或多个对象的属性合并到一起，不改变原有对象的属性，可以用一个空的对象作为target对象。像下面这样：

var result=Object.assign({},target,source);

3.2 目标对象和源对象有重名属性

上面的示例目标对象和源对象是没有重名属性的，那么如果他们有重名属性又会怎样呢？是后面的属性覆盖前面的还是前面的属性覆盖后面的呢？我们接下来看下一个例子：

var target={name:'guxin',age:18}
var source={state:'signle',age:22}
var result=Object.assign(target,source)
console.log(target)

结果

可以看到如果有同名属性的话，后面的属性值会覆盖前面的属性值。

3.3 有多个源对象

前面的示例都是只有一个源对象，那么如果有多个源对象情况会不会不同呢？我们继续看下面的例子

        var target={name:'guxin',age:18}
        var source1={state:'signle',age:22}
        var source2={mood:'happy',age:25}
        var result=Object.assign(target,source1,source2)
        console.log(target)

结果

可以看到有多个源对象情况也是和一个源对象一样的。没有同名的属性会直接复制到目标对象上，同名的属性后面的属性值会覆盖前面的同名属性值。

四、注意事项

• Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象，继承属性和不可枚举属性是不能拷贝的。

• 针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。目标对象自身也会改变

• 异常会打断后续拷贝任务

五、兼容性

目前IE浏览器不兼容Object.assign()，如果需要兼容IE的话最好不要直接使用这个方法。

5.1 解决方法1

JSON.parse(JSON.stringify())

5.2 解决方法2

使用 Jquery的$.extend() 替换 Object.assign()

5.3 解决方法3

使用以下方式进行添加

if(typeof Object.assign != 'function') {
    (function() {
        Object.assign = function(target) {
            'use strict';
            if(target === undefined || target === null) {
                throw new TypeError('Cannot convert undefined or null to object');
            }

            var output = Object(target);
            for(var index = 1; index < arguments.length; index++) {
                var source = arguments[index];
                if(source !== undefined && source !== null) {
                    for(var nextKey in source) {
                        if(source.hasOwnProperty(nextKey)) {
                            output[nextKey] = source[nextKey];
                        }
                    }
                }
            }
            return output;
        };
    })();
}

六、与Jquery的$.extend()的比较

6.1 相同点

• 函数用于将一个或多个对象的内容合并到目标对象。
• 都可以用于浅拷贝

$.extend(target ,defaults, options) 与Object.assign(target ,defaults, options)

6.2 不同点

$.extend(true, target ,defaults, options) 可用于深拷贝。

$.extend(true,{},a,b)

• true：是否深度拷贝,不加为false，浅拷贝，加了深拷贝
• {}：将合并结果保存到新对象，这样原对象将不会发生改变
• a：第一个合并的对象
• b：第二个合并的对象

转载自：Object.assign用法