JavaScript 深/浅拷贝

Jackson Mseven

已于 2023-03-30 10:21:01 修改

阅读量92

点赞数 1

文章标签： javascript 前端开发语言 ecmascript

于 2023-03-29 18:33:37 首次发布

本文链接：https://blog.csdn.net/Jackson_Mseven/article/details/129842530

版权

文章介绍了JavaScript中处理复杂数据类型复制的两种方法：浅拷贝，通过赋值实现，但只复制引用；深拷贝，通过JSON.parse(JSON.stringify())和递归函数实现，确保创建独立的副本。文中还展示了相关代码示例。

摘要由CSDN通过智能技术生成

浅拷贝

定义：复杂数据类型传址。

实现原理

// 浅拷贝
let obj1 = {
  a: 1,
  b: 2
}
let obj2 = obj1
obj2.a = 2
console.log(obj1)
/*
{
  a: 2,
  b: 2
}
*/
console.log(obj2)
/*
{
  a: 2,
  b: 2
}
*/

深拷贝

定义：复杂数据类型赋值一份 地址不同、内容一样 的数据。

实现原理

JSON

// 深拷贝
// JSON.parse(JSON.stringify(obj))：把对象转化成字符串，再转化为对象（拷贝不了 undefined 和 空function）
let obj1 = {
  a: 1,
  b: undefined,
  c: () => {}
}
let obj2 = JSON.parse(JSON.stringify(obj1))
obj1.a = 2
console.log(obj1)
/*
{
  a: 2,
  b: undefined,
  c: () => {}
}
*/
console.log(obj2)
/*
{
  a: 1
}
*/

递归（推荐）

// 深拷贝
// 递归
function deepCopy(obj) {
  // 判断 obj 是否是对象/数组
  if (!(obj instanceof Object) && !(obj instanceof Array)) {
    return obj
  }
  // 判断 obj 是否是数组/对象  进行新数据声明
  let targetObj = obj instanceof Array ? [] : {}
  // 循环 obj
  for (const key in obj) {
    // 判断 key 为 obj 自有属性
    if (obj.hasOwnProperty(key)) {
      const value = obj[key] // key 对应的 value
      // 判断 value 是否是数组/对象
      if (value instanceof Array || value instanceof Object) {
        // 递归 value，直到 value 为基本数据类型
        targetObj[key] = deepCopy(value)
      } else {
        targetObj[key] = value
      }
    }
  }
  return targetObj
}

let obj1 = {
  a: 1,
  b: undefined,
  c: () => { }
}
let obj2 = deepCopy(obj1)
obj1.a = 2
console.log(obj1)
/*
{
  a: 2,
  b: undefined,
  c: () => { }
}
*/
console.log(obj4)
/*
{
  a: 1,
  b: undefined,
  c: () => { },
}
*/