Vue项目中return { ...A, ...B }对象展开语法的含义是什么？

你代码里的return { ...A, ...B }使用的是ES6+标准的对象展开运算符，作用是将两个对象的属性合并为一个新对象返回，具体规则如下：

• ...作为对象展开运算符使用时，会将源对象自身的所有可枚举属性浅拷贝到新创建的对象中
• 合并存在同名属性时，排在后面的对象属性会覆盖前面的对象属性：如果A和B存在相同的key，最终返回的对象中该key的值取B中的值
• 该操作不会修改原来的A、B两个源对象，返回的是全新的对象
• 该写法等价于ES5的Object.assign({}, A, B)，二者实现效果完全一致

举个实际运行示例：

// 模拟从Vuex getters获取的两个对象
const A = { id: 1, type: 'baseMap', zoom: 12 }
const B = { id: 2, type: 'overlayMap', center: [116.4, 39.9] }

// 合并后的结果
const mergedMap = { ...A, ...B }
// 最终mergedMap的值为：{ id: 2, type: 'overlayMap', zoom: 12, center: [116.4, 39.9] }

补充注意点：

• 该语法属于ES2018(ES9)正式标准，所有现代浏览器均原生支持，兼容低版本环境需要通过Babel转译
• 该合并为浅拷贝操作：如果A或B内部存在嵌套对象、数组等引用类型值，新对象对应属性只会拷贝引用地址，修改新对象的嵌套属性会同步影响源对象

内容的提问来源于stack exchange，提问作者Nipun Tharuksha