首先浅拷贝和深拷贝只针对引用类型。
1.浅拷贝
浅拷贝只适用于简单对象,只是一个单独的对象或一个数组,没有嵌套。
1.1.数组浅拷贝
1.1.1.数组的 slice() 方法
const newArr = oldArr.slice();
1.1.2.数组的扩展运算符
const newArr = [...oldArr];
1.2.对象浅拷贝
1.2.1.Object.assign() 方法
const newObj = Object.assign({}, oldObj);
1.2.2.展开运算符
const newObj = { ...oldObj };
2.深拷贝
适用于相对复杂的对象,可以有多层嵌套。
//定义一个对象
const obj = {
uname: '张三',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: { name: '小三', age: 5},
fathen: { name: '老张', age: 62}
},
sing: function() {
console.log('会唱歌')
},
reg: /^123456789$/,
time: new Date(),
}
2.1.JSON转换深拷贝
代码简单,通过将对象转换为JSON字符串,然后再将JSON字符串转换回对象来实现深拷贝。
缺点:不能复制函数、正则表达式、错误对象等特殊类型。
const newObj = JSON.parse(JSON.stringify(oldObj));
2.2.简单递归函数实现深拷贝
可以复制对象的函数,如果要复制特殊类型、正则表达式、错误对象等,需要在函数里面处理特殊类型等各种情况,代码复杂。
缺点:如果原始对象存在循环引用,递归函数没有自动处理循环引用关系的能力,可能会导致无限递归并抛出错误。
下面是一个简易版的递归函数,经测试,可以复制普通函数,不能复制正则表达式和new Date()。
//定义一个对象
const obj = {
uname: '张三',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: { name: '小三', age: 5},
fathen: { name: '老张', age: 62}
},
sing: function() {
console.log('会唱歌')
},
reg: /^123456789$/,
time: new Date(),
}
//递归函数
function deepCopy(obj) {
// 检查是否为基本类型
if (typeof obj !== 'object' || obj === null) {
return obj
}
// 创建一个新的对象或数组
const newObj = Array.isArray(obj) ? [] : {}
// 递归地进行深拷贝
for (let key in obj) {
newObj[key] = deepCopy(obj[key])
}
return newObj
}
//调用函数
const newObj = deepCopy(obj)
console.log(newObj)
2.3.使用第三方库Lodash(强烈推荐)
可以复制对象的函数和特殊类型,包括函数、正则表达式、错误对象等,能够处理大型复杂对象,提供了高效的性能。
浏览器环境:
//引入Lodash库包
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
const obj = {
uname: '张三',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: { name: '小三', age: 5},
fathen: { name: '老张', age: 62}
},
sing: function() {
console.log('会唱歌')
},
reg: /^123456789$/,
time: new Date(),
}
const newObj = _.cloneDeep(obj)
console.log(newObj)
</script>
通过npm安装:
$ npm i -g npm
$ npm i --save lodash