JavaScript之深度克隆、多种实现方式、列举各种方式的优缺点、对象自有属性、拷贝、复制-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript之深度克隆、多种实现方式、列举各种方式的优缺点、对象自有属性、拷贝、复制。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

源数据

class Test {
    constructor() {
        this.a = 1;
        this.b = 2;
    }

    c() {
        console.log('c');
    }
};

Test.prototype.d = 1;
const obj = new Test();
obj.h = obj;

正统深克隆

// 循环引用的克隆
// 防止递归的无限执行
// 避免报错
// 避免内存泄漏
const cache = new WeakMap();

function orthDeepClone(value) {
    // 函数不需要克隆
    // 会进入此判断并直接返回
    if (typeof value !== 'object' || value === null) return value;
    // 判断缓存是否存在当前值
    // 有的话返回结果
    // 没有就继续往下执行
    if (cache.has(value)) return cache.get(value);

    // 创建数组或对象
    // 可以添加Map等其他对象
    const result = Array.isArray(value) ? [] : {};

    // 设置result的原型为value的原型
    // 如果不设置
    // 当克隆类的时候返回的是普通对象
    Object.setPrototypeOf(result, Object.getPrototypeOf(value));
    // 设置缓存
    cache.set(value, result);
    for (const key in obj) {
        // 不确定数据类型时使用
        // if (Object.hasOwnProperty.call(obj, key)) result[key] = orthDeepClone(obj[key]);

        // 确定数据类型时使用
        // 只克隆value的自有属性
        // 原型上的属性不参与克隆
        if (value.hasOwnProperty(key)) result[key] = orthDeepClone(obj[key]);
    }

    return result;
}

console.log(orthDeepClone(obj));
// Test {a: 1, b: 2, h: Test}

JSON深克隆

function JSONDeepClone(value) {
    return JSON.parse(JSON.stringify(value));
}

console.log(JSONDeepClone(obj));
// 报错
// Uncaught TypeError: Converting circular structure to JSON
在JavaScript中，对象和数组是引用类型，当将一个对象或数组赋值给另一个变量时，它们实际上是共享同一块内存空间。这意味着对一个对象或数组的修改会影响到所有引用它的变量。
为了创建一个独立的副本，可以使用深克隆。JSON.stringify()方法将JavaScript对象转换为一个JSON字符串，然后使用 JSON.parse()方法将该字符串解析为一个新的JavaScript对象。通过这种方式，创建了一个完全独立的副本，对其中一个对象的修改不会影响到另一个对象。
需要注意的是，这种方法仅适用于可以被JSON表示的数据类型，例如对象、数组、字符串、数字、布尔值和null。它不能复制函数、正则表达式、Date对象等特殊类型的值。文章来源地址https://www.toymoban.com/news/detail-783196.html