JS中的对象克隆(完整版看这里)

已于 2023-10-03 20:45:54 修改
阅读量1.1k 收藏
点赞数 1
文章标签： javascript 前端
于 2023-09-25 23:59:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyi5000/article/details/133284669
版权

更多点击这里：

浅拷贝

浅拷贝只新建拷贝对象的第一层，剩下的不变。

const obj = {
  a: 1
  b: {
    c: 2
  }
}

const clonedObj = shallowClone(obj);

console.log(obj === clonedObj) // false
console.log(obj['b'] === clonedObj['b']) // true

Lodash的clone方法

比较灵活，支持多种类型的拷贝

const _ = require('lodash');

const obj = {
  a: 1,
  b: {
    c: 0
  },
  set: new Set('e')
}

const clonedObj = _.clone(obj);
console.log(clonedObj);
console.log(obj.set === clonedObj.set); // true

const _ = require('lodash');

const clonedObj = _.clone({'a': 1});
console.log(clonedObj)

Object.assign

Object.assign() 将一个或者多个源对象中所有可枚举的自有属性复制到目标对象，并返回修改后的目标对象。

const shallowClone = (obj) => {
  return Object.assign({}, obj);
}

const clonedObj = shallowClone({'a': 1});
console.log(clonedObj);

使用起来便捷但是要注意使用方式：

  1. 原型链上的属性和不可枚举的属性不能被复制
  2. 参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

ES6的展开运算符

const shallowClone = (obj) => {
  return { ...obj };
}

const clonedObj = shallowClone({'a': 1});
console.log(clonedObj)

Array.prototype.xxx(适用于数组)

  1. Array.prototype.slice
const arr = [1, 2, 3];
const clonedObj = arr.slice(0, arr.length);

console.log(clonedObj);
  1. Array.prototype.concat
const arr = [1, 2, 3];
const clonedObj = [].concat(arr);

console.log(clonedObj);

深拷贝

深拷贝新建拷贝对象的每一层。

const obj = {
  a: 1
  b: {
    c: 2
  }
}

const clonedObj = deepClone(obj);

console.log(obj === clonedObj) // false
console.log(obj['b'] === clonedObj['b']) // false

Lodash库的cloneDeep方法

比较灵活，支持多种类型的拷贝

const _ = require('lodash');

const obj = {
  a: 1,
  b: {
    c: 0
  },
  set: new Set('e')
}

const clonedObj = _.cloneDeep(obj);
console.log(clonedObj);
console.log(obj.set === clonedObj.set); // false

更多点击这里：

使用递归手动实现

实现起来和lodash的cloneDeep方法类似，不过是简单的阉割版

 const isShallowClone = (obj) => {
    if (typeof obj === "function") {
      // function type
      return true;
    } else if (typeof obj !== "object" || obj === undefined) {
      // basic type
      return true;
    } else if (obj === null) {
      // special object type
      return true;
    }
    return false;
  };
  
  const deepClone = (obj) => {
    if (isShallowClone(obj)) {
      return obj;
    }
    let clonedObj = undefined;
    if (obj instanceof Date) {
      return new Date(obj.getTime());
    } else if (obj instanceof RegExp) {
      return new RegExp(obj.source, obj.flags);
    } else if (obj instanceof Map) {
      clonedObj = new Map();
      for (const [k, v] of obj) {
        clonedObj.set(k, deepClone(v));
      }
      return clonedObj;
    } else if (obj instanceof Set) {
      const clonedObj = new Set();
      for (const v of obj) {
        clonedObj.add(deepClone(v));
      }
      return clonedObj;
    } else if (Array.isArray(obj)) {
      clonedObj = [];
    } else {
      clonedObj = {};
    }
    // iterate own properties
    for (const k of Reflect.ownKeys(obj)) {
      clonedObj[k] = deepClone(obj[k]);
    }
    return clonedObj;
  };

用例：

const obj1 = {
  // =========== 1.基础数据类型 ===========
  num: 0, // number
  str: "", // string
  bool: true, // boolean
  unf: undefined, // undefined
  nul: null, // null
  sym: Symbol("sym"), // symbol
  bign: BigInt(1n), // bigint

  // =========== 2.Object类型 ===========
  // 普通对象
  obj: {
    name: "我是一个对象",
    id: 1,
  },
  // 数组
  arr: [0, 1, { arr2: [-1] }],
  // 函数
  func: function () {
    console.log("我是一个函数");
  },
  // // 日期
  date: new Date(0),
  // // 正则
  reg: new RegExp("/我是一个正则/ig"),
  // // Map
  map: new Map().set("mapKey", 1),
  map2: new Map().set(
  "k1",
  new Map().set("k2", [
    1,
    2,
    [3, 4],
    () => {
      console.log("good");
    },
  ]),
  // // Set
  set: new Set().add("set"),
  // // =========== 3.其他 =====x======
  [Symbol("1")]: { [Symbol("ok")]: "nice" }, // Symbol作为key
};

const res = deepClone(obj1);
console.log(res);

上面的代码不能解决循环引用问题(会导致栈溢出)

const a = {name: "a"};
const b = {name: "b"};
a.b = b;
b.a = a; // 相互引用,代码会不断从a -> b, b-> a，导致不断消耗栈空间最终栈溢出
const res = deepClone(a);
console.log(res);

RangeError: Maximum call stack size exceeded
    at deepClone
    at deepClone
    at deepClone
    at deepClone
    .....

使用标记法解决循环依赖：

const deepClone = (obj) => {
  const isShallowClone = (obj) => {
    if (typeof obj === "function") {
      // function type
      return true;
    } else if (typeof obj !== "object" || obj === undefined) {
      // basic type(number, string, boolean...)
      return true;
    } else if (obj === null) {
      // special object type
      return true;
    }
    return false;
  };

  // 1. 使用(新-旧)键值来判断发生并解决循环引用导致的stackoverflow问题
  // 2. 使用WeakMap避免闭包导致的内存泄漏
  const cache = new WeakMap();

  const _deepClone = (obj) => {
    if (isShallowClone(obj)) {
      return obj;
    }
    if (cache.get(obj)) {
      return cache.get(obj);
    }
    let clonedObj = undefined;
    if (obj instanceof Date) {
      return new Date(obj.getTime());
    } else if (obj instanceof RegExp) {
      return new RegExp(obj.source, obj.flags);
    } else if (obj instanceof Map) {
      clonedObj = new Map();
      for (const [k, v] of obj) {
        cache.set(obj, clonedObj);
        clonedObj.set(k, _deepClone(v));
      }
      return clonedObj;
    } else if (obj instanceof Set) {
      const clonedObj = new Set();
      for (const v of obj) {
        cache.set(obj, clonedObj);
        clonedObj.add(_deepClone(v));
      }
      return clonedObj;
    } else if (Array.isArray(obj)) {
      clonedObj = [];
    } else {
      clonedObj = {};
    }
    // iterate own properties
    for (const k of Reflect.ownKeys(obj)) {
      cache.set(obj, clonedObj);
      clonedObj[k] = _deepClone(obj[k]);
    }
    return clonedObj;
  };

  return _deepClone(obj);
};

用例:

const obj = {
  // =========== 1.基础数据类型 ===========
  num: 0, // number
  str: "", // string
  bool: true, // boolean
  unf: undefined, // undefined
  nul: null, // null
  sym: Symbol("sym"), // symbol
  bign: BigInt(1n), // bigint

  // =========== 2.Object类型 ===========
  // 普通对象
  obj: {
    name: "我是一个对象",
    id: 1,
  },
  // 数组
  arr: [0, 1, 2],
  // 函数
  func: function () {
    console.log("我是一个函数");
  },
  // 日期
  date: new Date(0),
  // 正则
  reg: new RegExp("/我是一个正则/ig"),
  // Map
  map: new Map().set("mapKey", 1),
  // Set
  set: new Set().add("set"),
  // =========== 3.其他 ===========
  [Symbol("1")]: 1, // Symbol作为key
};

obj["loop"] = obj;

const res = deepClone(obj);
console.log(res);

这种递归代码扩展性比较好

  1. 像Promise这类的类型就可以自定义拷贝方式
  2. 对于是否拷贝原型链上的属性以及是否继承原型链都可以定制

更多点击这里：

message channel

message channel一般用于ifram窗口的通信。

这种方法遇到function没法拷贝，会报错

const obj = {
    a: 1,
    b: 2,
    f: () => {}
}

const deepClone_messagechannel = (obj) => {
    return new Promise(( resolve ) => {
        const { port1, port2 } = new MessageChannel();
        port2.onmessage = (obj) => {
            resolve(obj.data);
        };
        port1.postMessage(obj);
    });
}

const res = await deepClone_messagechannel(obj);

console.log(res)

Uncaught DOMException: Failed to execute 'postMessage' on 'MessagePort': () => {} could not be cloned.

序列化

function类型以及其他某些类型也不能拷贝

deepClone_stringfy = (obj) => {
  const str = JSON.stringify(obj);
  return JSON.parse(str);
};

structuredClone方法

结构化克隆算法用于复制复杂 JavaScript 对象的算法。通过来自 Worker 的 postMessage() 或使用 IndexedDB 存储对象时在内部使用。它通过递归输入对象来构建克隆，同时保持先前访问过的引用的映射，以避免无限遍历循环

  1. Function 对象是不能被结构化克隆算法复制的；如果你尝试这样子去做，这会导致抛出 DATA_CLONE_ERR 的异常。
    企图去克隆 DOM 节点同样会抛出 DATA_CLONE_ERR 异常。
  2. 对象的某些特定参数也不会被保留
  3. RegExp 对象的 lastIndex 字段不会被保留
  4. 属性描述符，setters 以及 getters（以及其他类似元数据的功能）同样不会被复制。例如，如果一个对象用属性描述符标记为 read-only，它将会被复制为 read-write，因为这是默认的情况下。
  5. 原形链上的属性也不会被追踪以及复制。

refer: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

用例：

const obj = { a: 1 };
const res = structuredClone(a);
console.log(res);

可以看出这种方式还是有很多限制的, 内部也是使用了递归的方式实现的

对比这几种

用例：

const deepNestedObject = {
  level1: {
    level2: {
      level3: {
        level4: {
          level5: {
            level6: {
              level7: {
                level8: {
                  level9: {
                    level10: {
                      arrayOfNumbers: [1, 2, 3, 4],
                      anotherObject: {
                        key1: "value1",
                        key2: "value2",
                      },
                    },
                  },
                },
              },
            },
          },
        },
      },
      deep: [
        {
          key1: "value1",
          key2: "value2",
          key3: [
            {
              nestedKey1: "nestedValue1",
              nestedKey2: "nestedValue2",
            },
            {
              nestedKey1: "nestedValue3",
              nestedKey2: "nestedValue4",
            },
          ],
        },
        {
          key1: "value3",
          key2: "value4",
          key3: [
            {
              nestedKey1: "nestedValue5",
              nestedKey2: "nestedValue6",
            },
            {
              nestedKey1: "nestedValue7",
              nestedKey2: "nestedValue8",
            },
          ],
        },
      ],
    },
  },
};

const _ = require("lodash");

const tikTok = (func) => {
  const s = new Date().getTime();
  for (let i = 0; i < 1000000; i++) {
    func();
  }
  console.log(new Date().getTime() - s);
};

const tikTok2 = async () => {
    const s = new Date().getTime();
    for (let i = 0; i < 1000000; i++) {
      await deepClone_messagechannel(deepNestedObject);
    }
    console.log(new Date().getTime() - s);
};


tikTok(() => deepClone(deepNestedObject)); // 自定义deepClone
tikTok(() => _.cloneDeep(deepNestedObject)); // lodash的cloneDeep
tikTok(() => deepClone_stringfy(deepNestedObject)); // JSON.stringfy那种序列化形式的
tikTok(() => structuredClone(deepNestedObject)); // structuredClone方法
await tikTok2(); // message channel

在浏览器统一运行输出结果：

6216
8603
5145
11929
50126

速度上：序列化 > 自定义deepClone > lodash > structuredClone > message channel

使用便利性上：lodash、自定义deepClone > structuredClone、序列化 > message channel

更多点击这里：

ahowl_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
JavaScript对象之深度克隆介绍
10-25
JavaScript对象的深度克隆是一种创建一个全新对象的过程，这个新对象与原始对象具有相同的数据结构，包括嵌套的对象和数组，但所有数据都是独立的副本，不会因为原对象的修改而受到影响。在JavaScript中，浅克隆只...
js克隆对象、数组的常用方法介绍
12-02
在JavaScript中，克隆对象和数组是常见的需求，特别是在处理数据的复制、备份或避免原始数据被意外修改时。以下是一些常用的克隆方法： 1. **Ext的克隆方法**： - `Ext.clone(json)`：这个方法是ExtJS框架提供的，...
js clone对象的三个方法
Donnie的专栏
03-06 2万+
方法一：JavaScript代码 function clone(obj){      var o;      if(typeof obj == "object"){          if(obj === null){              o = null;          }else{              if(obj instanceof Array){
js 对象的clone(）函数
热门推荐
datouniao1的博客
06-25 2万+
function clone(Obj){ var buf; if(Obj instanceof Array){ buf=[]; var i=Obj.length; while(i--){ buf[i]=clone(Obj[i]); } return buf; } else if(Obj instanceof Object){ buf={}; for(va...
如何在JS中克隆对象
最新发布
codemami的博客
05-25 682
注意：这种方法不能处理函数和循环引用，并且会丢失对象的undefined、Symbol、Function等类型的属性，因为JSON.stringify()在序列化这些值时会将它们忽略或转换为null。在JavaScript中，克隆对象并不是直接支持的操作，因为JavaScript中的对象是通过引用传递的，而不是通过值传递。但是，你可以使用几种不同的方法来"克隆"或"复制"一个对象。浅拷贝只复制对象的顶层属性，如果属性是引用类型（如数组或对象），则复制的是引用的地址，而不是真正的对象。3. 手动实现深拷贝。
js对象克隆的几种方法
weixin_45517927的博客
06-26 4329
在js中对象克隆就是把对象值重新赋给一个新对象。克隆也存在深克隆于浅克隆的区别。引用类型的值都会被保存在堆内存中，在栈内存中会存在一个指针指向堆内存中的值。这时，如果只复制了指针，则可以说这个克隆为浅克隆，如果时根据指针找到具体的值，复制值，就可以称之为深克隆。 1、JSON (深克隆) JSON多用于前后台的数据交互，后台传递字符串类型的JSON数据，前端通过JSON.parse() ,可以转化为一个json对象。 现有一个对象，可以通过JSON.stringify() 转为json字符串。字符串类型的值
js对象clone方法
一撇一画的博客
12-03 1393
const tabelTitleArr = ['name'，'age'，'sex'] ; this.data.forEach((item,i) =>{ // 报错 const params = { title[0]: item.name, } ; // 正确 // key 值是其他引用对象也是如此 { [obj[key]] : xxxx} const params = {
js克隆clone()方法的理解
wyq188945的博客
11-23 4218
抛出问题 对一个p标签进行克隆，第一次克隆1个结果，第二次克隆出来2个结果，第三次克隆出来的4个结果，怎每次得到自己想要的结果？？？？？？？？？ 待解决问题代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </h...
一个用于对象深度克隆的同构和可配置javascript函数
08-08
在JavaScript开发中，深度克隆是一个常见的需求，它主要用于创建对象的一个完全独立的副本，不会因为对原对象的修改而影响到副本。标题提到的"一个用于对象深度克隆的同构和可配置javascript函数"是指一个能够在...
the-city:JavaScript 中的 Simcity 克隆
07-08
而"the-city"项目，正是一个利用JavaScript实现的Simcity游戏克隆版，旨在帮助开发者和游戏爱好者深入理解JavaScript编程以及游戏开发的基本原理。 首先，我们要了解Simcity是一款经典的模拟城市建设游戏，玩家在...
threes-js-clone:Threes 的 Javascript 克隆
06-05
在这个项目中，我们将探讨一个名为"threes-js-clone"的JavaScript实现，它是一个对原版Threes游戏的精确克隆。这个克隆版本旨在帮助开发者了解游戏背后的逻辑，并提供了一个学习JavaScript编程、游戏开发以及...
js克隆一个对象
weixin_34336526的博客
03-14 326
我们知道，对象类型在赋值的过程中其实是复制了地址，所以如果改变了一方，其他都会被改变。我们应该如何克隆一个对象，并且避免这种现象的发生呢？ 方法一：Object.assign function copy(obj){ return Object.assign({}, obj); } 方法二：…展开运算符 function copy(obj){ return { …obj }; } 方...
JS 深度克隆的实现方法
UserGuan的博客
05-28 3259
如果这个对象里面含有 Map 之类的这些玩意，克隆之后这个 mapList 就不再是一个 Map 结构了。console.log("克隆后的对象", deepClone(obj));console.log("克隆后的对象", deepClone(obj));// 环形引用 obj.c 等于 obj 本身。或者是这个对象里面有一些函数之类的，克隆之后这个函数后都没有了。console.log("原对象", obj);console.log("原对象", obj);
如何正确克隆 JavaScript 对象？
kalman2019的博客
12-19 640
我有一个对象 x。我想将它复制为对象 y，这样对 y 的更改就不会修改 x。我意识到复制从内置 JavaScript 对象派生的对象会导致额外的、不需要的属性。这不是问题，因为我正在复制我自己的文字构造对象之一。如何正确克隆 JavaScript 对象？
js进阶：对象的克隆
m0_52242001的博客
06-17 1860
js对象克隆，是js进阶必要的过程，需要每个程序员都懂
js浅拷贝以及实现深度克隆对象几种优雅的方法，BAT面试&高级进阶
m0_60607562的博客
03-29 1014
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript详解克隆
m0_67937429的博客
10-08 423
克隆
js中，深克隆、浅克隆的概念，以及手写一个深克隆函数
qq_68155756的博客
05-10 338
在 JavaScript 中，浅克隆可以使用 Object.assign() 或展开符（…）来实现。深克隆通常使用递归函数 或 第三方库（如 Lodash 或 jQuery）来实现，某些情况下使用JSON.parse(JSON.stringify(obj))也能实现，之所以说某些情况下是因为使用此方式的时候，如果对象包含函数、日期、正则表达式等属性 会将这些属性转换为 null。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值