无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

(js 深拷贝) JS深拷贝的4种实现方法 深拷贝:JavaScript 中四种实现方法 全网首发(图文详解1)

前沿技术 Micheal 1个月前 (06-08) 23次浏览 已收录 扫描二维码

(js 深拷贝) JS深拷贝的4种实现方法

JavaScript 中,深拷贝一个对象意味着创建对象的一个完全新的副本,即拷贝的对象和原始对象无任何引用关系,修改新对象不会影响原始对象。下面是四种实现 JS 深拷贝的方法:

  • JSON.parse 和 JSON.stringify
    这种方法最简单,能够快速实现对象的深拷贝,但是它不能复制函数、undefined、以及循环引用的对象。

    function deepClone(obj) {
       return JSON.parse(JSON.stringify(obj));
    }
    
    const original = { a: 1, b: { c: 2 } };
    const cloned = deepClone(original);
    console.log(cloned); // { a: 1, b: { c: 2 } }

    注意:使用这个方法,你会丢失任何非可序列化的值。

  • 递归拷贝
    这个方法通过递归来深度遍历对象,适合于复杂对象的深拷贝。

    function deepClone(obj) {
       if (typeof obj !== 'object' || obj === null) {
           return obj;
       }
    
       let copy = Array.isArray(obj) ? [] : {};
    
       for (let key in obj) {
           const value = obj[key];
           copy[key] = deepClone(value);
       }
    
       return copy;
    }
    
    const original = { a: 1, b: { c: 2 } };
    const cloned = deepClone(original);
    console.log(cloned); // { a: 1, b: { c: 2 } }

    注意:这个方法没有处理循环引用的问题。

  • 使用第三方库
    第三方库如 Lodash 的 _.cloneDeep 方法提供了一个完善的深复制解决方案。

    // 需要先安装 lodash
    // npm install lodash
    const _ = require('lodash');
    
    const original = { a: 1, b: { c: 2 } };
    const cloned = _.cloneDeep(original);
    console.log(cloned); // { a: 1, b: { c: 2 } }

    使用第三方库能够处理大多数深拷贝的复杂场景。

  • 结构化克隆算法
    使用 HTML5 的 structuredClone() 函数。这是一个浏览器 API,可以实现深拷贝。它能够拷贝大部分的 JavaScript 类型,包括 Map 和 Set。

    const original = { a: 1, b: { c: 2 } };
    // 注意:structuredClone 是浏览器环境下的函数
    const cloned = structuredClone(original);
    console.log(cloned); // { a: 1, b: { c: 2 } }

    注意:这个 API 目前可能不是所有浏览器都支持。

以上就是实现 JavaScript 深拷贝的四种方法。在选择使用时,你应该根据你的具体需求来选择最适合的方法,例如对象的复杂程度、是否包含特殊类型的数据、环境支持情况等。
(猫眼浏览器) Catsxp(猫眼浏览器) v4.5.2 官方安装版 64位 如何使用Catsxp猫眼浏览器 全网首发(图文详解1)
(string.valueof) JAVA String.valueOf()方法的用法说明 String.valueOf() 方法 全网首发(图文详解1)

喜欢 (0)
[]
分享 (0)
关于作者:
流水不争先,争的是滔滔不绝