首页 > 编程语言 >JavaScript 浅拷贝和深拷贝

JavaScript 浅拷贝和深拷贝

时间：2023-01-16 12:33:27浏览次数：43  
标签：obj 对象 JavaScript copiedObjects key 拷贝 copy

JavaScript 中的拷贝分为两种：浅拷贝和深拷贝。

一、浅拷贝

浅拷贝是指在拷贝过程中，只拷贝一个对象中的指针，而不拷贝实际的数据。所以，浅拷贝中修改新对象中的数据时，原对象中的数据也会被改变。

JavaScript 中浅拷贝可以通过如下几种方式实现：

  • 使用结构赋值的方式，例如 let newObject = {...oldObject}
  • 使用 Object.assign() 方法，例如 let newObject = Object.assign({}, oldObject)

二、深拷贝

深拷贝是指在拷贝过程中，拷贝一个对象中的所有数据，并创建一个新对象，对新对象进行操作并不会影响到原对象。

1、常规场景

JavaScript 中深拷贝可以通过如下几种方式实现：

  • 使用 JSON.parse(JSON.stringify(object)) 方法

需要注意的是：该方法会忽略 undefined 以及正则表达式类型的属性。

const A = { a: 7788, b: undefined, c: new RegExp(/-/ig) },
    B = JSON.parse(JSON.stringify(A));

console.log('A', A);
console.log('B', B);

  • 使用递归的方式，手动拷贝对象的每一层
function deepCopy(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    let copy;
    if (Array.isArray(obj)) {
        copy = [];
        for (let i = 0; i < obj.length; i++) {
            copy[i] = deepCopy(obj[i]);
        }
    } else {
        copy = {};
        for (let key in obj) {
            copy[key] = deepCopy(obj[key]);
        }
    }
    return copy;
}

const objA = { a: 123 },
    objB = { b: 456 };

// 浅拷贝
const objC = objA;
console.log('objA.a', objA.a);  // objA.a 123
console.log('objC.a', objA.a);  // objC.a 123
objC.a = 788;
console.log('objA.a', objA.a);  // objA.a 788
console.log('objC.a', objC.a);  // objC.a 788

// 深拷贝
const objD = deepCopy(objB);
console.log('objB.b', objB.b);  // objB.b 456
console.log('objD.b', objD.b);  // objD.b 456
objD.b = 899;
console.log('objB.b', objB.b);  // objB.b 456
console.log('objD.b', objD.b);  // objD.b 899

这个函数接受一个参数 obj，如果它不是对象或者是 null，那么直接返回该参数。如果它是数组，则创建一个新数组并递归复制每一项。否则，创建一个新对象并递归复制每一个属性。

  • 使用 lodash 类库的_.cloneDeep函数、 underscore 中的 _.clone() 函数等第三方库

2、特定场景一：内置对象类型的深拷贝

JavaScript 中复制内置对象类型（例如 Date，RegExp 等）的深拷贝可以使用特定的构造函数来重新创建该对象。

例如，对于 Date 对象，可以使用 new Date(originalDate.getTime()) 来创建一个新的日期对象，其中 originalDate.getTime() 返回原始日期对象的时间戳。

对于 RegExp 对象，可以使用 new RegExp(originalRegExp) 或 new RegExp(originalRegExp.source, originalRegExp.flags) 来创建一个新的正则表达式对象。

下面是一个使用构造函数来复制内置对象类型的深拷贝示例：


function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (obj instanceof Date) {
        copy = new Date(obj.getTime());
    } else if (obj instanceof RegExp) {
        copy = new RegExp(obj);
    } else if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj, copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key], copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    return copy;
}

这个示例的深拷贝函数首先检查当前对象是否为内置对象类型，如果是，则使用相应的构造函数重新创建该对象，否则创建一个普通对象或数组。然后进行递归复制每一个属性。

需要注意的是，使用构造函数复制内置对象类型只适用于部分内置对象类型，对于其他的内置对象类型，可能需要使用其他的方法来进行复制，或者使用第三方库来进行复制。

总之，深拷贝复制内置对象类型需要考虑使用构造函数来重新创建对象，如果需要对这些对象进行深拷贝操作，可以使用上述方法或其他库来实现。

3、特定场景二：自定义对象类型的深拷贝

JavaScript 中自定义对象的深拷贝可以使用同样的递归方式实现，可以使用 WeakMap 方法。

function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (obj instanceof MyCustomObject) {
        copy = new MyCustomObject();
    } else if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj, copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key], copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    return copy;
}

这个函数首先检查当前对象是否为自定义对象，如果是，则创建一个新的自定义对象，否则创建一个普通对象或数组。然后进行递归复制每一个属性。

注意，如果自定义对象中包含循环引用，需要使用 WeakMap 来避免出现死循环。

4、特定场景三：对象中存在函数或循环引用

对于函数，通常会忽略它们，因为函数不能被复制，而是需要重新定义。

对于循环引用，可以使用 WeakMap 来存储已经复制过的对象。每次遇到循环引用时，可以检查 WeakMap 中是否已经有该对象的副本，如果有，则直接使用副本，而不是重新创建。

function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj, copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key], copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    return copy;
}

这是使用 WeakMap 的一种示例，这个示例的深拷贝函数递归地复制对象，但检查 WeakMap 中是否已经存在该对象的副本，如果存在则直接使用副本，而不是重新创建。

此外，使用 JSON.parse(JSON.stringify(obj)) 方法会自动忽略函数和循环引用，但是会忽略 undefined 以及正则表达式类型的属性。

还有，还可以使用第三方库，如 lodash 中的 _.cloneDeep() 函数、 underscore 中的 _.clone() 函数等来实现对象中存在函数或循环引用的深拷贝。

5、特定场景四：对象中有对其他对象的引用或者包含 Symbol 属性的对象

对于对象中有对其他对象的引用，可以使用 WeakMap 来存储已经复制过的对象。每次遇到对其他对象的引用时，可以检查 WeakMap 中是否已经有该对象的副本，如果有，则直接使用副本，而不是重新创建。

对于对象中包含 Symbol 属性的对象，可以使用 Object.getOwnPropertySymbols() 方法来获取该对象所有的 Symbol 属性，然后使用 Object.getOwnPropertyDescriptor() 方法来获取这些 Symbol 属性的值，最后将这些值赋给新对象。


function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj, copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key], copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    let symbols = Object.getOwnPropertySymbols(obj);
    symbols.forEach(symbol => {
        let descriptor = Object.getOwnPropertyDescriptor(obj, symbol);
        Object.defineProperty(copy, symbol, descriptor);
    });
    return copy;
}

这是使用 WeakMap 和 Symbol 属性的一种示例，这个示例的深拷贝函数首先检查 WeakMap 中是否已经存在该对象的副本，如果存在则直接使用副本，而不是重新创建。然后使用 Object.getOwnPropertySymbols() 方法获取该对象所有的 Symbol 属性，最后使用 Object.getOwnPropertyDescriptor() 方法获取这些 Symbol 属性的值，并将这些值赋给新对象。

这种方法可以保证深拷贝对象中包含的所有属性，包括对其他对象的引用和 Symbol 属性，但还是不能复制内置对象类型，这些对象类型是不可枚举的。

在深拷贝的实现中，需要特别注意循环引用和特殊属性问题

总的来说，在使用浅拷贝和深拷贝时，需要根据需求和对象的结构来进行选择。通常来说，如果需要对对象进行修改并且不希望对原对象造成影响，那么应该使用深拷贝。如果只是需要读取对象中的数据而不需要修改，那么可以使用浅拷贝。

标签：obj,对象,JavaScript,copiedObjects,key,拷贝,copy
From： https://www.cnblogs.com/yuzhihui/p/17055138.html

相关文章

  • 如何从Docker中拷贝文件到宿主机
    第1步：在宿主机查询正在运行的docker镜像rainbow@dream:/testing/temp_out$sudodockerpsCONTAINERIDIMAGECOMMANDCREATEDSTATUSPORTSNAMES24e483a40174test-......
  • 【译】15 个有用的 JavaScript 技巧
    原文地址：https://javascript.plainenglish.io/15-useful-javascript-tips-814eeba1f4fd1）数字分隔符为了提高数字的可读性，可以使用下划线作为分隔符。constlargeNumber......
  • JavaScript是怎样实现继承的？
    一、是什么继承（inheritance）是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超......
  • JavaScript学习笔记—window对象
    window对象浏览器为我们提供了一个window对象，可以直接访问window对象代表的是浏览器窗口，通过该对象可以对浏览器窗口进行各种操作，除此之外window对象还负责存储JS中的内......
  • JavaScript学习笔记
     JavaScript学习笔记概念脚本语言：一行一行的翻译成机器语言，并一行一行的执行；而不是全部编译执行； 作用表单动态校验、网页特效、服务端开发Node.js、桌......
  • JavaScript学习笔记—全局和局部作用域
    作用域（scope）指的是一个变量的可见区域全局作用域在网页运行时创建，在网页关闭时消耗所有直接编写到script标签中的代码都位于全局作用域中变量是全局变量，可以在任意......
  • JavaScript学习笔记—函数
    1.语法function函数名(){语句......}2.定义和调用函数-语法：函数名()使用typeof检查函数对象时返回function定义方式（1）函数声明（2）函数表达式（3）箭头函数//......
  • JavaScript原型和原型链？有什么特点？
    一、原型JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的......
  • JavaScript – Temporal API & Date
    前言TemporalAPI是JS的新东西,用来取代Date.虽然现在(15-01-2023)没有任何游览器支持.但它已经是stage3了.而且有完整的polyfill,所以还是非常推荐大家积......
  • Javascript脚本运算符执行顺序对照表
    Javascript脚本运算符执行顺序对照表：在线查看Javascript脚本运算符执行优先级别 ​​窍门：Ctrl+F快速查找​​Javascript脚本运算符优先级，是描述在计算机计算表达式时执行......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99