深拷贝和浅拷贝(js的问题)

  • 深拷贝:修改复制对象,原始对象不会变化
  • 浅拷贝:修改复制对象,原始对象也变化

方式:

  • 遍历赋值
  • Object.create()
  • JSON.parse()和JSON.stringify()

操作的对象

var obj = {
    a: "Hello",
    b: {
      a: "world",
      b: 111,
    },
    c: [11, "Jack", "Tom"],
};

1、浅拷贝

1-1、遍历赋值

// 浅拷贝
function simpleCopy(o) {
    var o_ = {};
    for (let i in o) {
      o_[i] = o[i];
    }
    return o_;
}

var newObj = simpleCopy(obj);
newObj.b.a = "WORLD";
console.log(obj);

console.log(newObj);

/**
obj 和 newObj都变了:
b: { "a": "WORLD", "b": 111}}
*/

1-2、Object.create()

var newObj = Object.create(obj);
newObj.b.a = "WORLD";

console.log(obj);
// b: {a: "WORLD", b: 111}
console.log(newObj);
// __proto__:
// b: {a: "WORLD", b: 111}

2、深拷贝

2-1、遍历赋值

function deepCopy(object, deepObject=null) {
    let deepObj = deepObject || {};

    for (let i in object) {
      if (typeof object[i] === "object") {
        // 引用类型 [] {} null
        if(object[i] === null){
          deepObj[i] = object[i];
        } else{
          deepObj[i] = object[i].constructor === Array ? []: {}
          // deepObj[i] = object[i].constructor === Array ? []: Object.create(null);
          deepCopy(object[i], deepObj[i])
        }
      } else{
        // 简单数据类型
        deepObj[i] = object[i];
      }
    }
    return deepObj;
}

var newObj = deepCopy(obj);
newObj.b.a = "WORLD";

console.log(obj);
// b: {a: "world", b: 111}
console.log(newObj);
// b: {a: "WORLD", b: 111}

2-2 JSON

function deepCopy(o) {
    return JSON.parse(JSON.stringify(o));
}

var newObj = deepCopy(obj);
newObj.b.a = "WORLD";

console.log(obj);
// b: {a: "world", b: 111}
console.log(newObj);
// b: {a: "WORLD", b: 111}

相关推荐

  1. 拷贝拷贝js问题

    2023-12-17 08:24:03       42 阅读
  2. js拷贝拷贝区别

    2023-12-17 08:24:03       37 阅读
  3. js拷贝拷贝区别

    2023-12-17 08:24:03       35 阅读
  4. js拷贝拷贝

    2023-12-17 08:24:03       25 阅读
  5. 拷贝拷贝

    2023-12-17 08:24:03       9 阅读
  6. 拷贝拷贝

    2023-12-17 08:24:03       6 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-17 08:24:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-17 08:24:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-17 08:24:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-17 08:24:03       18 阅读

热门阅读

  1. 复盘理解/实验报告梳理 数据结构PTA实验二

    2023-12-17 08:24:03       43 阅读
  2. [Django-05 ]自定义sql查询

    2023-12-17 08:24:03       36 阅读
  3. 微信小程序怎样给事件传值的

    2023-12-17 08:24:03       37 阅读
  4. huggingface使用与环境移植

    2023-12-17 08:24:03       39 阅读
  5. ubuntu22.04 怎么查看系统日志

    2023-12-17 08:24:03       35 阅读
  6. 敏捷开发-任务拆解、工作量评估和任务指派

    2023-12-17 08:24:03       35 阅读
  7. 什么是CI/CD?如何在PHP项目中实施CI/CD?

    2023-12-17 08:24:03       39 阅读
  8. GC root 有哪些

    2023-12-17 08:24:03       29 阅读
  9. Git批量删除本地分支

    2023-12-17 08:24:03       36 阅读