vue3对象复制(使用es6对象扩展运算符,深拷贝)

vue3+es6语法
直接上代码

   const objA = { name: '小飞', age: 18 };
	const objACopy = { ...objA };
	console.log('对比objA与objACopy的引用地址是否相同');
	console.log(objA == objACopy); //false
	console.log(objA);
	console.log(objACopy);
	//对象包含对象,浅拷贝
	const objB = { name: '小飞', age: 18, hobbies: ['football', 'badminton'] };
	const objBCopy = { ...objB };
	console.log('对比objB与objBCopy的引用地址是否相同');
	console.log(objB.hobbies == objBCopy.hobbies); //true
	console.log(objB);
	console.log(objBCopy);
	//对象包含对象  改造一下,深拷贝
	const objBCopyDeep = { ...objB, hobbies: { ...objB.hobbies } };
	console.log(objB.hobbies == objBCopyDeep.hobbies); //false

在这里插入图片描述

### Vue 中合并两个对象的方法 在 Vue 开发过程中,有时需要将两个对象合并为一个新的对象。以下是几种常见的方法: #### 方法一:使用 `Object.assign()` `Object.assign()` 是 JavaScript 提供的一个内置方法,用于将所有可枚举属性的值从一个或多个源对象复制到目标对象中。如果存在同名属性,则后面的值会覆盖前面的值。 ```javascript const obj1 = { a: 1, b: 2 }; const obj2 = { b: 3, c: 4 }; const mergedObj = Object.assign({}, obj1, obj2); console.log(mergedObj); // 输出: { a: 1, b: 3, c: 4 } ``` 这种方法适用于浅层合并[^3]。 --- #### 方法二:使用扩展运算符(Spread Operator) ES6 引入了扩展运算符(`...`),它也可以用来合并对象。语法简洁直观,功能类似于 `Object.assign()`。 ```javascript const obj1 = { a: 1, b: 2 }; const obj2 = { b: 3, c: 4 }; const mergedObj = { ...obj1, ...obj2 }; console.log(mergedObj); // 输出: { a: 1, b: 3, c: 4 } ``` 同样,这种方式也仅支持浅层合并。 --- #### 方法三:自定义深拷贝函数 当遇到嵌套对象时,上述两种方式无法完成深层合并。此时可以通过编写递归函数来实现深度合并逻辑。 ```javascript function deepMerge(target, source) { const isObject = (obj) => typeof obj === 'object' && obj !== null; if (!isObject(target) || !isObject(source)) { return source; } for (const key in source) { if (source.hasOwnProperty(key)) { if (isObject(source[key]) && target[key] && isObject(target[key])) { target[key] = deepMerge(Object.assign({}, target[key]), source[key]); } else { target[key] = source[key]; } } } return target; } const obj1 = { a: 1, b: { x: 10 } }; const obj2 = { b: { y: 20 }, c: 3 }; const result = deepMerge(obj1, obj2); console.log(result); // 输出: { a: 1, b: { x: 10, y: 20 }, c: 3 } ``` 此方法能够处理复杂的嵌套结构[^5]。 --- #### 方法四:利用第三方库(如 Lodash 的 merge) Lodash 是一个强大的工具库,其中的 `_.merge()` 函数专门用于深层次的对象合并操作。 ```javascript import _ from 'lodash'; const obj1 = { a: 1, b: { x: 10 } }; const obj2 = { b: { y: 20 }, c: 3 }; const mergedObj = _.merge(obj1, obj2); console.log(mergedObj); // 输出: { a: 1, b: { x: 10, y: 20 }, c: 3 } ``` 通过引入此类库,开发者可以减少重复造轮子的工作量。 --- ### 总结 对于简单的对象合并需求,推荐优先考虑原生解决方案——即 `Object.assign()` 或者扩展运算符;而对于复杂场景下的深度合并,则需借助手写的递归算法或者成熟的第三方类库辅助完成任务。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值