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中深度克隆对象的最有效方法是什么？
asdfgh0077的博客
11-29 595
克隆JavaScript对象的最有效方法是什么？ 我见过obj = eval(uneval(o)); 正在使用，但这是非标准的，仅受Firefox支持 。 我已经完成了obj = JSON
JavaScript对象之深度克隆介绍
10-25
JavaScript对象的深度克隆是一种创建一个全新对象的过程，这个新对象与原始对象具有相同的数据结构，包括嵌套的对象和数组，但所有数据都是独立的副本，不会因为原对象的修改而受到影响。在JavaScript中，浅克隆只...
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中克隆对象
codemami的博客
05-25 682
注意：这种方法不能处理函数和循环引用，并且会丢失对象的undefined、Symbol、Function等类型的属性，因为JSON.stringify()在序列化这些值时会将它们忽略或转换为null。在JavaScript中，克隆对象并不是直接支持的操作，因为JavaScript中的对象是通过引用传递的，而不是通过值传递。但是，你可以使用几种不同的方法来"克隆"或"复制"一个对象。浅拷贝只复制对象的顶层属性，如果属性是引用类型（如数组或对象），则复制的是引用的地址，而不是真正的对象。3. 手动实现深拷贝。
JavaScript 中对象的多种克隆方式以及注意事项
不知名人士的博客
03-30 1445
JS 对象克隆
js对象深度克隆
前端码农
04-15 1433
js对象深度克隆 为什么要深度克隆对象？嗯，我不晓得我不知道，不要问我，你居然问这种问题 1. 上深度克隆之前先来研究研究其它的克隆方式，如果你急要直奔主题那就往下滑到最后去看深度克隆 ES6语法糖的方式 var obj={ uname:'小明', jub:{ age:123, obj:{ uname:12 } } } var obj1={...obj} obj1.
如何正确克隆 JavaScript 对象？
kalman2019的博客
12-19 640
我有一个对象 x。我想将它复制为对象 y，这样对 y 的更改就不会修改 x。我意识到复制从内置 JavaScript 对象派生的对象会导致额外的、不需要的属性。这不是问题，因为我正在复制我自己的文字构造对象之一。如何正确克隆 JavaScript 对象？
javascript中对象的深度克隆
小小陈旭元
11-05 423
一、js中的对象   谈到对象的克隆，必定要说一下对象的概念。   js中的数据类型分为两大类：原始类型和对象类型。（1）原始类型包括：数值、字符串、布尔值、null、undefined（后两个是特殊的原始值，这里不做详细的说明，我的上一篇博客有谈到过一些）（2）对象类型包括：对象即是属性的集合，当然这里又两个特殊的对象----函数（js中的一等对象）、数组（键值的有序集合
js对象的深度克隆
源辰_付鹏程
02-24 1120
在聊JavaScript（以下简称js）深度克隆之前，我们先来了解一下js中对象的组成。 在js中一切实例皆是对象，具体分为原始类型和合成类型：原始类型对象指的是Undefined、Null、Boolean、Number和String，按值传递。合成类型对象指的是array、object以及function，按址传递，传递的时候是内存中的地址。 克隆或...
javascript中的structuredClone()克隆方法
superherooooss的博客
03-06 491
是 JavaScript 的方法之一，用于深拷贝一个对象。它的语法是，其中obj是要拷贝的对象。方法将会创建一个与原始对象完全相同但是独立的副本。
JavaScript深度克隆的艺术：掌握对象复制的终极技巧
m0_61932070的博客
05-15 162
其中，lodash的_.cloneDeep方法是我们推荐的最有效的深度克隆方法，不仅能处理复杂的对象，还有良好的性能。浅克隆只复制对象的第一层属性，如果属性值是对象或数组，复制的是引用，而非内部的具体值。JSON对象的parse和stringify方法：这是一种非常简单的深度克隆方法，先将对象转为JSON字符串，再将JSON字符串解析为新的对象。假设我们有一个包含多个对象和数组的大型对象，我们需要创建这个对象的一个备份，用于后续操作，但又不希望修改备份时影响到原对象。
js克隆对象、数组的常用方法介绍
12-02
在JavaScript中，克隆对象和数组是常见的需求，特别是在处理数据的复制、备份或避免原始数据被意外修改时。以下是一些常用的克隆方法： 1. **Ext的克隆方法**： - `Ext.clone(json)`：这个方法是ExtJS框架提供的，...
一个用于对象深度克隆的同构和可配置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编程、游戏开发以及...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 465
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1294
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1083
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
"JavaScript对象克隆方法详解：JSON与自定义函数实现
通过自己动手编写克隆函数，不仅能更好地理解JavaScript中对象的克隆原理，还能提升自己的编程技能。在日常开发中，对象克隆是一个非常常见且实用的操作，因此掌握对象克隆的方法对于提高开发效率和减少不必要的错误...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值