ES6中Object.assign() 方法

1. 对象合并
Object.assign 方法用于对象的合并，将源对象(source)的所有可枚举属性，复制到目标对象上。
如下代码演示：

var target = {a: 0};
var source1 = {b: 1};
var source2 = {c: 2};

Object.assign(target, source1, source2);
console.log(target);  // 输出 {a: 0, b: 1, c: 2}

1-1 如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
如下代码：

var target = {a: 0, b: 1};
var source1 = {a:1, b: 2, c:3};
var source2 = {c:5};

Object.assign(target, source1, source2);

console.log(target); // 输出 {a: 1, b: 2, c: 5}

1-2 如果只有一个target(目标对象)，Object.assign会直接返回该对象，如下代码：

var o = {a: 0};
Object.assign(o);
console.log(o);  // {a: 0}

1-3 如果该参数不是对象，则会先转成对象，然后返回。
先是这样的，正常的返回是number类型。

var a = 1;
Object.assign(a);
console.log(a); // 1
console.log(typeof a); // number

然后直接判断类型，返回的是object类型

console.log(typeof Object.assign(2)) // object

1-4 对于null, undefined 来说 无法转换成Object，就会在控制台下报错，如下代码：

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

1-5 对象合并，如果源对象是null的话或者是undefined的话，那么对象合并的时候不会报错，直接会跳过该对象的合并，直接返回目标对象。
如下代码：

var obj = {a: 1};
console.log(Object.assign(obj, null) === obj); // true
console.log(obj); // {a: 1}

var obj = {a: 1};
console.log(Object.assign(obj, undefined) === obj); // true
console.log(obj); // {a: 1}

1-6 如果是数值，布尔型，和字符串合并对象的话，都不会报错，但是字符串会以数组的形式表现。
先看数值合并对象如下代码：

var obj = {a: 1};
console.log(Object.assign(obj, 12) === obj); // true
console.log(obj); // {a: 1}

布尔型合并对象如下代码：

var obj = {a: 1};
console.log(Object.assign(obj, true) === obj); // true
console.log(obj); // {a: 1}

字符串合并对象如下代码：

var obj = {a: 1};
console.log(Object.assign(obj, "bcd") === obj); // true
console.log(obj); // {0: ‘b‘, 1: ‘c‘, 2: ‘d‘, a: 1}

如上代码，只有字符串和对象合并，这是因为只有字符串有包装对象，会产生可枚举类型属性。比如如下代码：

console.log(Object(‘bcd‘)); // {0: "b", 1: "c", 2: "d", length: 3, [[PrimitiveValue]]: "bcd"}
console.log(Object(1111)); // {[[PrimitiveValue]]: 1111}
console.log(Object(true)); // {[[PrimitiveValue]]: true}

上面代码可以看到原始值都在包装对象的内部属性[[PrimitiveValue]]上，这个属性没有被Object.assign合并，只有字符串的包装对象会产生可枚举的属性，属性则会被合并。
但是Object.assign合并的属性是有限的，只合并对象的自身的属性(不合并继承属性)，也不合并不可枚举的属性。

2. Object.assign方法是浅拷贝

因此Object.assign方法是浅复制，不是深复制，也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝的是这个对象的引用。
比如如下代码：

var o1 = {a: {b: 1} };
var o2 = Object.assign({}, o1);
o1.a.b = 2;
console.log(o2.a.b); // 2

如上代码，o1是一个对象，该对象的属性也是一个对象，使用Object.assign拷贝o1对象到o2上来，然后手动改变o1对象的属性值，那么o2对象的属性值也会被改变。

但是如果对象的属性值不是一个对象的话，那么就不会影响该值，如下代码：

var o1 = {a: 1};
var o2 = Object.assign({}, o1);
o1.a = 2;
console.log(o1); // {a: 2}
console.log(o2.a); // 1

但是如果源对象和目标对象有同名属性的话，那么Object.assign会直接替换该属性。比如如下代码：

var target = {a: {b: 1}};
var source1 = {a: {b: ‘hello‘}};
Object.assign(target, source1);
console.log(target); // {a: {b: ‘hello‘}}

注意：Object.assign可以用来处理数组，但是会把数组视为对象。
也就是说对象里面有键值对索引，如果把两个数组合并的话，那么得到不是合并后新增的数组，而是会把对应相同的键替换掉，如下使用数组的demo代码如下：

var targetArrs = [1, 2, 3];
var sourceArrs = [4, 5];
Object.assign(targetArrs, sourceArrs);
console.log(targetArrs);  // [4, 5, 3]

如上代码，目标对象有1，2，3属性，源对象有4，5值，如果使用Object.assign的话，那么源对象的键4，5 和目标对象的1，2键是相同的，因此值直接替换掉。

3. Object.assign 常见使用在哪些地方？
    3-1 为对象添加属性。比如如下代码：

class A {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}

如上方法通过Object.assign方法，将x属性和y属性添加到A类的对象实列中。

3-2 为对象添加方法

Object.assign(A.prototype, {
     xMethod(x, y) {
       ...
     },
     yMethod() {

     }
   });
 // 相当于如下代码：
 A.prototype.xMethod = function(x, y) {};
 A.prototype.yMethod = function() {}

3-3 克隆对象

function clone(obj) {
   return Object.assign({}, obj);
}

3-4 合并多个对象
如下一开始的代码：

var target = {a: 0};
var source1 = {b: 1};
var source2 = {c: 2};
Object.assign(target, source1, source2);
console.log(target);  // 输出 {a: 0, b: 1, c: 2}

4. 对象深度克隆
浅度克隆和深度克隆的含义如下：
浅度克隆： 原始类型为值传递，对象类型为引用传递。
深度克隆： 所有元素或属性都是完全复制的，与原对象完全脱离，也就是说所有对于源对象的修改都不会反映到新对象中。反之，所有对于新对象的修改也不会反映到源对象中。
注意：Object.assign 是浅度克隆的。

4-1 ES5中我们可以通过递归的方式去调用函数来实现深度克隆。
代码如下：

function deepClone(obj) {
  var newObj = obj instanceof Array ? [] : {};
  for (var i in obj) {
    newObj[i] = Object.prototype.toString.call(obj[i]) === "[object Object]" ? deepClone(obj[i]) : obj[i];
  }
  return newObj;
}
var obj = {a: {b: 1} };
var newObj = deepClone(obj);
console.log(newObj);  // 打印输出 {a: {b: 1}}

// 修改对象 obj
obj.a.b = 2;
console.log(obj);   // 打印输出 {a: {b: 2}}
console.log(newObj);  // 打印输出 {a: {b: 1}} 原对象的修改不会影响到新对象中

如上面的代码，在JS中，我们使用递归的方式，循环遍历对象的所有属性和方法，实现深度克隆，因此当我们深度克隆到新对象中的时候，再去更改源对象的属性值的时候，不会影响到新对象。

时间： 2024-10-12 23:04:33

ES6中Object.assign() 方法的相关文章

ES6中Object.assign()和Object.create()

Object.assign() 语法:Object.assing(target,…sources) 一.合并对象 const first = { name: "Bob" }; const last = { lastName: "Smith" }; let person = Object.assign(first, last); console.log(person);/*{ name: 'Bob', lastName: 'Smith' }*/ 二.克隆对象 cons

Object.assign()方法

转载:http://www.cnblogs.com/zhaowenxin/p/6160676.html 对象的扩展 1.ES6中,对象的属性和方法可简写:对象的属性值可不写,前提是属性名已经声明: 1 var name = "zhangsan"; 2 var password = "1111111"; 3 var obj = { 4 name, 5 password, 6 arr:[1,2,3,4], 7 sayName(){ 8 console.log(this.

ES6之Object.assign()详解

译者按: 这篇博客将介绍ES6新增的Object.assign()方法. 原文: ECMAScript 6: merging objects via Object.assign() 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 将A对象的属性复制给B对象,这是JavaScript编程中很常见的操作.这篇博客将介绍ES6的Object.assign()属性,可以用于对象复制. 在JavaScript生态系统中,对象复制有另外一个术语:

javascript学习总结之Object.assign()方法详解

最近再写ES6的文章时候发现自己对Object.assign()方法不太了解,之前也没有接触过所以就就查阅了相关的资料,为了自己以后肯能会用到以及对知识进行巩固,所以在这里记录下自己学习的点点滴滴,毕竟好记性不如然笔筒,废话不多说,直接上干货. 官方解释:Object.assign方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 语法:Object.assign(target,...sources) 参数: target:目标对象 sources:源对象 返回值:

ES6的Object.assign()基本用法

Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). 例如: const target = {a:1}, const source1 = {b:2} const source2 = {c:3}; Object.assign(target, source1,source2); target   // {a:1,b:2,c:3} Object.assign  方法的第一个参数是目标对象,后面的参数都是源对象. 注意:如果目标对象与源

浅谈ES6的Object.assign()浅拷贝

注意: 1.Object.assign() 只是一级属性复制,比浅拷贝多深拷贝了一层而已.用的时候,还是要注意这个问题的. 2.简单实现深拷贝的方法,当然,有一定限制,如下:JSON.parse(JSON.stringify());思路就是将一个对象转成json字符串,然后又将字符串转回对象. Object.assign()方法 特点:浅拷贝.对象属性的合并 代码如下: var nObj = Object.assign({},obj,obj1); 解析:花括号叫目标对象,后面的obj.obj1是

Object.assign方法的使用

一.基本语法 Object.assign(target, ...sources)  二.基本概念 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象.只要有一个参数不是对象,就会抛出TypeError错 三.基本用途          1.合并多个对象 var target = { a: 1, b: 1 }; var source1 = { b: 2, c: 2 };

纯原生仿ES6的Object.assign，实现深度合并对象

源码: function isObj(x){ var type = typeof x; return x !== null && (type === 'object' || type === 'function'); } var hasOwnProperty = Object.prototype.hasOwnProperty; var propIsEnumerable = Object.prototype.propertyIsEnumerable; function toObject(va

ES6中字符串新增方法

1.重复输出字符串 string.repeat() <script type="text/javascript"> var str = "by"; console.log(str.repeat(3));//bybyby console.log(str.repeat(2.7));//byby console.log(str.repeat(0));//空串 console.log(str.repeat(-3));//error </script>