ES6 中对象的新增方法Object.assign()

用来合并对象

基本用法

const apple = {
	color: 'red',
	shape: 'circle',
	taste: 'sweet'
};
const pen = {
	color: 'black',
	shape: 'cylinder',
	use: 'write'
};
console.log(Object.assign(apple, pen)); // {color: "black", shape: "cylinder", taste: "sweet", use: "write"} 
// 相同属性后面的覆盖前面的，不同的可以共存

与对象扩展符的区别

console.log({...apple, ...pen}); // {color: "black", shape: "cylinder", taste: "sweet", use: "write"} 

看起来好像是一样的结果，实则还是有一定区别的，继续往下看：

console.log({...apple, ...pen} === apple); // false 实际上是得到了一个新的对象
console.log(Object.assign(apple, pen) === apple); // ture 实际上是把pen合并到apple中，apple对象发生改变
// 如果我也想像对象扩展一样操作完得到一个新的对象呢？
console.log(Object.assign({}, apple, pen) === apple); // false 输出结果一样，就是变成得到一个新的对象，此时apple与pen不会发生变化

注意事项

1.基本数据类型作为源对象

前置知识：什么是源对象？

Object.assign(target, source1, source2, ...);

target：目标对象，最终返回的对象
source：源对象，希望用来合并的对象，不一定只有一个

// 与对象的展开类似，即转换成对象，再合并
console.log(Object.assign({}, undefined)); // {}
console.log(Object.assign({}, null)); // {}
console.log(Object.assign({}, 1)); // {}
console.log(Object.assign({}, true)); // {}

// 比较不一样的是字符串
console.log(Object.assign({}, 'str')); // {0: "s", 1: "t", 2: "r"}

2.同名属性的替换

后面的直接覆盖前面的，上面的例子再看一遍：

const apple = {
	color: 'red',
	shape: 'circle',
	taste: 'sweet'
};
const pen = {
	color: 'black',
	shape: 'cylinder',
	use: 'write'
};
console.log(Object.assign({}, apple, pen)); // {color: "black", shape: "cylinder", taste: "sweet", use: "write"} 

我们把apple和pen对象稍微做一些改变：

const apple = {
	color: ['red', 'yellow'],
	shape: 'circle',
	taste: 'sweet'
};
const pen = {
	color: ['black','silver'],
	shape: 'cylinder',
	use: 'write'
};
console.log(Object.assign({}, apple, pen)); // {color: ["black","silver"], shape: "cylinder", taste: "sweet", use: "write"}
// 这里就看得出来，后面的覆盖前面的

应用

合并默认参数和用户参数

const logUser = userOptions => {
	// 默认参数
	const DEFAULTS = {
		user: 'Jae',
		age: 22,
		sex: 'male'
	};
	const options = Object.assign({}, DEFAULTS, userOptions);
	console.log(options);
};
logUser(); // {user: "Jae", age: 22, sex: "male"} 使用默认参数
logUser({user: 'Tom'}); // {user: "Tom", age: 22, sex: "male"} 用户参数覆盖默认参数