ES6 对象展开运算符

基本用法

展开对象

const apple = {
	color: 'red',
	shape: 'circle',
	taste: 'sweet'
};
// 对象展开是不是跟数组一样在前面加上“...”呢？来试试看
console.log(...apple); // Uncaught TypeError: Found non-callable @@iterator

对象不能直接展开！必须在 {} 中展开

console.log({...apple}); // {color: "red", shape: "circle", taste: "sweet"}

// 这个新对象和之前的对象不是同一个，我们检测一下：
console.log({...apple} === apple); // false

总结：对象的展开就是把属性罗列出来，用逗号分隔，放到一个 {} 中，构成新对象

合并对象

const apple = {
	color: 'red',
	shape: 'circle',
	taste: 'sweet'
};
const pen = {
	color: 'balck',
	shape: 'cylinder',
	used: 'write'
};
console.log({...apple, ...pen}); // color: "balck", shape: "cylinder", taste: "sweet", used: "write"}
// 可以看到相同属性取后面对象中的，不同属性合并

注意事项

空对象的展开

console.log({...{}}); // {} 返回一个空对象

非对象的展开

如果展开的不是对象，则会自动将其转为对象，再将其属性罗列出来

console.log({...1}); // {}
console.log({...undefined}); // {}
console.log({...null}); // {}
console.log({...true}); // {}
// 以上都是自动通过new Object的方式转化为对象了，但是因为对象中没有属性值，所以展开后都是空对象

// 字符串例外，会自动转成一个类似数组的对象
console.log({...'String'}); // {0: "S", 1: "t", 2: "r", 3: "i", 4: "n", 5: "g"}

对象中对象属性的展开

直接说结论：不会展开对象中的对象属性

const apple = {
	feature: {
		taste: 'sweet'
	}
};
const pen = {
	feature: {
		color: 'black',
		shape: 'cylinder'
	},
	used: 'write'
};
console.log({...apple}); // {feature: {…}}
console.log({...pen}); // {feature: {…}, used: "write"}

应用

复制对象

const a = {x: 1, y: 2};
// const b = a 这种方法是错误的，引用类型不能用这种方法来复制
// 正确方法：
const b = {...a};
console.log(b); // {x: 1, y: 2}
console.log(b === a); // false

注意： 使用展开运算符来复制对象并不是深拷贝，如果对象中还有嵌套对象的话改变 a 对象某个属性，b 对象相应那个属性值也会发生变化。可以自己动手试一试

用户参数和默认参数

const logUser = userParam => {
	const defaultParam = {
		username: 'Jae',
		age: 22,
		sex: 'male'
	}
};
const param = {...defaultParam, ...userParam}
// userParam放在后面，这样用户没有传参的时候就是用defaultParam，有传的时候使用userParam

最后

以上就是精明黄豆为你收集整理的ES6 对象展开运算符的全部内容，希望文章能够帮你解决ES6 对象展开运算符所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。