Object.assign详解-Toy模板网

这篇具有很好参考价值的文章主要介绍了Object.assign详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、Object.assign是什么？

二、用法：

三、详细讲解

1.目标对象和源对象没有同名属性

2.目标对象和源对象有同名属性

3.有多个源对象

4、原始类型会被包装为对象

5、对象的拷贝

6、对象的深拷贝

7、对象的深拷贝

总结

一、Object.assign是什么？

object.assign()主要用于对象合并，将源对象中的属性复制到目标对象中，他将返回目标对象。

二、用法：

Object.assign(target, ...sources)

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

source--->源对象

返回值：target，目标对象

三、详细讲解

1.目标对象和源对象没有同名属性

var target = {name:'带你飞'}
var source = {age:18}
var result = Object.assign(target,source)
console.log(result,target===result); // {name: '带你飞', age: 18} true

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

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

2.目标对象和源对象有同名属性

var target = {name:'带你飞',age:16}
var source = {age:18}
var result = Object.assign(target,source)
console.log(result,target===result); // {name: '带你飞', age: 18} true

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

3.有多个源对象

var target = {name:'带你飞',age:16}
var source1 = {age:18}
var source2 = {age:20,hobby:'打游戏'}
var result = Object.assign(target,source1,source2)
console.log(result,target===result); // {name: '带你飞', age: 20, hobby: '打游戏'} true

如果有多个源对象，没有同名的属性会直接复制到目标对象上，如果有同名属性的话，后面的属性值会覆盖前面的属性值。

4、原始类型会被包装为对象

var source1 = "abc";
var source2 = true;
var source3 = 10;

var result = Object.assign({}, source1, null, source2, undefined, source3); 
// 原始类型会被包装，null 和 undefined 会被忽略。
// 注意，只有字符串的包装对象才可能有自身可枚举属性。
console.log(result); // {0: 'a', 1: 'b', 2: 'c'}

5、对象的拷贝

var object1 = {
  a: 1,
  b: 2,
  c: 3
};

var object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2.c, object2.d); // 3 5
console.log(object1)  // { a: 1, b: 2, c: 3 }
console.log(object2)  // { c: 3, d: 5, a: 1, b: 2 }

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

6、对象的深拷贝

深拷贝：深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突。

let object1 = {
		a: 1,
		b: 2
	};

	let object2 = Object.assign({}, object1, {
		b: 20
	});

	console.log(object1); // { a: 1, b: 2 }
	console.log(object2); // { a: 1, b: 20 }

7、对象的浅拷贝

浅拷贝：浅拷贝只是复制了对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝

var object1 = {
		a: 1,
		b: {
			c: 2,
			d: 3
		}
	};
var object2 = Object.assign({}, object1);
	object2.a = 10;
	object2.b.c = 20;
	console.log(object1); // { a: 1, b: { c: 20, d: 3 } }
	console.log(object2) //{ a: 10, b: { c: 20, d: 3} }

总结：

object.assign()主要用于对象合并，将源对象中的属性复制到目标对象中，他将返回目标对象。如果有同名属性的话，后面的属性值会覆盖前面的属性值，如果有多个源对象，没有同名的属性会直接复制到目标对象上，还可以进行对象的深浅拷贝，当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。
。

以上内容纯属个人理解，如果有朋友发现不对的欢迎随时指正！文章来源地址https://www.toymoban.com/news/detail-413411.html

到了这里，关于Object.assign详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！