Object.assign 合并多个对象的属性,如果是对象有同名属性,则后面对象的属性值覆盖前面的。

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


<script>
	const target = { a: 1, b: 2 };
	const source = { b: 4, c: 5 };

	const returnedTarget = Object.assign(target, source);

	console.log(target);
	// expected output: Object { a: 1, b: 4, c: 5 }

	console.log(returnedTarget);
	// expected output: Object { a: 1, b: 4, c: 5 }
</script>




语法
Object.assign(target, ...sources)

参数

target   目标对象。

sources    源对象。

返回值     目标对象。

描述
如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

String类型和 Symbol 类型的属性都会被拷贝。

在出现错误的情况下,例如,如果属性不可写,会引发TypeError,如果在引发错误之前添加了任何属性,则可以更改target对象。

注意,Object.assign 不会在那些source对象值为 null 或 undefined 的时候抛出错误。


引用:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

  

这里必须引用jQuery.js库才可以

$.extend()合并多个对象,后面对象属性覆盖前面对象属性
/*$.extend( target [, object1 ] [, objectN ] )
$.extend( [deep ], target, object1 [, objectN ] )

deep	可选。 Boolean类型 指示是否深度合并对象,默认为false。如果该值为true,且多个对象的某个同名属性也都是对象,则该"属性对象"的属性也将进行合并。
target	Object类型 目标对象,其他对象的成员属性将被附加到该对象上。
object1	可选。 Object类型 第一个被合并的对象。
objectN	可选。 Object类型 第N个被合并的对象。*/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
 
<div id="log"></div>
<script>
$(function () { 
	var object1 = {
		apple: 0,
		banana: {weight: 52, price: 100},
		cherry: 97
	};
	var object2 = {
		banana: {price: 200},
		durian: 100
	};
	/* object2 合并到 object1 中 */
	$.extend(object1, object2);
	var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
		var arr = [];
		$.each(obj, function(key, val) {
			var next = key + ": ";
			next += $.isPlainObject(val) ? printObj(val) : val;
			arr.push( next );
		});
		return "{ " +  arr.join(", ") + " }";
	};
	$("#log").append( printObj(object1) );
})
</script>
 
</body>
</html>

  

原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/12093212.html