javascript 浅拷贝与深拷贝

最新推荐文章于 2025-04-11 00:03:45 发布

yangdongnan

最新推荐文章于 2025-04-11 00:03:45 发布

阅读量193

点赞数

分类专栏： javascript 文章标签： js 拷贝

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文详细解释了浅拷贝与深拷贝的概念及其区别，并提供了几种实现这两种拷贝的具体方法，包括Object.assign(), Array.prototype.concat(), Array.prototype.slice()等用于浅拷贝，以及lodash的_.cloneDeep, jQuery的$.extend, JSON.parse(JSON.stringify()), 和递归函数等用于深拷贝。

浅拷贝与深拷贝

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。

浅拷贝的实现方式（详见浅拷贝与深拷贝）：

Object.assign()：需注意的是目标对象只有一层的时候，是深拷贝；
Array.prototype.concat()；
Array.prototype.slice()。

深拷贝就是在拷贝数据的时候，将数据的所有引用结构都拷贝一份。简单的说就是，在内存中存在两个数据结构完全相同又相互独立的数据，将引用型类型进行复制，而不是只复制其引用关系。

深拷贝的实现方式：

热门的函数库lodash，也有提供_.cloneDeep用来做深拷贝；
jquery 提供一个$.extend可以用来做深拷贝；
JSON.parse(JSON.stringify())；

手写递归方法。

递归实现深拷贝的原理：要拷贝一个数据，我们肯定要去遍历它的属性，如果这个对象的属性仍是对象，继续使用这个方法，如此往复。

//定义检测数据类型的功能函数
function checkedType(target) {
  return Object.prototype.toString.call(target).slice(8, -1)
}
//实现深度克隆---对象/数组
function clone(target) {
  //判断拷贝的数据类型
  //初始化变量result 成为最终克隆的数据
  let result,
    targetType = checkedType(target)
  if (targetType === 'Object') {
    result = {}
  } else if (targetType === 'Array') {
    result = []
  } else {
    return target
  }
  //遍历目标数据
  for (let i in target) {
    //获取遍历数据结构的每一项值。
    let value = target[i]
    //判断目标结构里的每一值是否存在对象/数组
    if (checkedType(value) === 'Object' || checkedType(value) === 'Array') {
      //对象/数组里嵌套了对象/数组
      //继续遍历获取到value值
      result[i] = clone(value)
    } else {
      //获取到value值是基本的数据类型或者是函数。
      result[i] = value
    }
  }
  return result
}