JavaScript深浅拷贝

首先浅拷贝和深拷贝只针对引用类型。

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