面试题：JS 中怎么实现深克隆和浅克隆

最新推荐文章于 2025-03-27 18:06:04 发布
最新推荐文章于 2025-03-27 18:06:04 发布
阅读量1k 收藏 19
点赞数 30
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_52401264/article/details/139485143
版权

面试题：JS 中怎么实现深克隆和浅克隆

一、深克隆和浅克隆

1. 克隆的研究对象

克隆（拷贝）就是创建一份数据的副本，其分为深克隆和浅克隆两种实现方式。对于原始类型的值而言，深克隆和浅克隆没有任何区别，因此我们关于克隆的研究对象是对象类型。

2. 两种克隆的区别

  • 深克隆：深克隆会对原始对象进行无限层级的复制，会递归地复制原始对象中的所有属性，从而创建一个独立于原始对象的全新副本。修改深克隆后的对象中的数据，不会影响到原始对象。
  • 浅克隆：浅克隆会对原始对象进行一层复制，会复制原始对象中的所有属性，但对于嵌套对象或数组，只会复制引用。修改浅克隆后的对象中的数据，会影响到原始对象。

注意：直接将对象赋值给一个变量不算浅拷贝。浅拷贝的结果和原数据至少在 === 的判断下是 false！

二、浅克隆的实现方式

1. Object.assign（对象）

  • 语法：Object.assign(target, source1, source2, ...)

    • 功能：将一个或多个源对象（source）的可枚举属性复制到目标对象（target）。
    • 参数
      • target 目标对象，用于接收源对象的属性。
      • source 源对象，其属性会被复制到目标对象。
    • 返回值：目标对象（target），其包含了源对象中的所有属性。
    • 注意事项
      • 对于目标对象中的嵌套对象或数组属性，Object.assign 方法只会复制它们的引用，而不会创建全新副本。因此如果修改嵌套对象或数组中的内容，目标对象和源对象都会受到影响。
      • 如果 target、source1、source2、... 中存在同名属性，则以后边对象的属性值为准，这称之为属性覆盖。

  • 浅克隆的实现：const target = Object.assign({}, source);

    const source = {
    name: "chuanyitu",
    gender: "male",
    info: {
        country: "China",
        position: "North"
    }
}

const target = Object.assign({}, source); // 实现了浅拷贝

console.log(source === target); // false
console.log(source.info === target.info); // true 说明只复制了引用

2. array.slice（数组）

  • 语法：array.slice([begin[, end]])

    • 功能：提取数组的一部分（[begin, end)），作为一个新数组返回。
    • 参数
      • begin：提取元素的开始索引（包括该索引对应元素）。如果省略该参数，则默认从索引 0 开始。如果该参数为负数，则表示从数组末尾相应位置开始。
      • end：提取元素的结束位置（不包括对应元素）。如果省略该参数，则默认一直提取到数组最后一个元素。如果该参数为负数，则表示从数组末尾相应位置结束。
    • 返回值：一个新的数组，包含 [begin, end) 的数组元素。
    • 注意事项：对于数组中的对象或数组类型的元素，.slice 方法只会复制它们的引用，而不会创建全新副本。

  • 浅克隆的实现：const target = source.slice();

    const source = ["chuanyitu", "male", { country: "China", position: "North" }];

const target = source.slice(); // 实现了浅拷贝

console.log(source ===  target); // false
console.log(source[2] === target[2]); // true 说明只复制了引用

3. array.concat（数组）

  • 语法：array.concat(source1[, source2[, source3[, ...]]])

    • 功能：将一个或多个数组或元素和当前数组合并，作为一个新数组返回。原数组不会受到影响。
    • 参数：source 如果该参数是一个元素，则将其添加到新数组中。如果该参数是一个数组，则将其中的元素提取出来，添加到新数组中。
    • 返回值：一个新的数组，包含 array 中的所有元素，以及 source 中的元素（作为元素添加其本身，作为数组添加其中的元素）。
    • 注意事项：对于数组中的对象或数组类型的元素，.concat 方法只会复制它们的引用，而不会创建全新副本。

  • 浅克隆的实现：const target = [].concat(source); 

    const source = ["chuanyitu", "male", { country: "China", position: "North" }];

const target = [].concat(source); // 实现了浅拷贝

console.log(source ===  target); // false
console.log(source[2] === target[2]); // true 说明只复制了引用

4. Array.from（数组）

  • 语法：Array.from(arrayLike/iterableObjects[, mapFn[, thisArg]])

    • 功能：基于类数组对象或可迭代对象创建一个数组。
      • 类数组对象：具有 length 属性和索引元素的对象，如 String、arguments 等。
      • 可迭代对象：如 Set、Map 等。
    • 参数
      • arrayLike/iterableObjects：类数组或可迭代对象。
      • mapFn：映射函数，用于对每个元素进行处理，生成新的数组元素。
      • thisArg：表示 mapFn 函数中 this 指向。
    • 返回值：由类数组对象或可迭代对象创建的新的数组对象。
    • 注意事项：对于对象中的嵌套对象或数组，Array.from 方法只会复制它们的引用，而不会创建全新副本。

  • 浅克隆的实现：const target = Array.from(source);

    const source = ["chuanyitu", "male", { country: "China", position: "North" }];

const target = Array.from(source); // 实现了浅拷贝

console.log(source ===  target); // false
console.log(source[2] === target[2]); // true 说明只复制了引用

5. 展开运算符（对象或数组）

  • 我们也可以使用展开运算符实现浅克隆，而且对数组和对象都生效！！！

    Object.assign 对象生效

    array.slice、array.concat、Array.from 数组生效

  • 浅克隆的实现（对象）：const target = {...source};

    const source = {
    name: "chuanyitu",
    gender: "male",
    info: {
        country: "China",
        position: "North"
    }
}

const target = {...source}; // 实现了浅拷贝

console.log(source === target); // false
console.log(source.info === target.info); // true 说明只复制了引用

  • 浅克隆的实现（数组）：const target = [...source];

    const source = ["chuanyitu", "male", { country: "China", position: "North" }];

const target = [...source]; // 实现了浅拷贝

console.log(source === target); // false
console.log(source[2] === target[2]); // true 说明只复制了引用

三、深克隆的实现方式

0. 深克隆要考虑的逻辑细节

  • 对于原始类型 => 直接返回

  • 对于循环引用 => 使用 Map 或 WeakMap 记录已经处理过的对象，避免无限递归（建议使用 WeakMap，建立弱引用关系）

  • 对于函数 => 直接返回

  • 对于 Date 对象 => 使用 Date 构造函数重新创建一个日期对象

  • 对于 RegExp 对象 => 使用 RegExp 构造函数重新创建一个正则对象

  • 对于 Array 对象 => 递归克隆

  • 对于 Map 对象 => 递归克隆

  • 对于 Set 对象 => 递归克隆

  • 对于一般对象 => 递归克隆

  • 对于对象或数组 => 递归克隆

    • Symbol 作为键名的处理方式 => 使用 Reflect.ownKeys()

      Reflect.ownKeys() 可以获取对象的所有属性（可枚举、不可枚举、符号属性）

      Object.keys() 只能获取对象的可枚举属性

  • 对于 DOM 元素 => 直接返回

1. JSON.stringify & JSON.parse

  • 深克隆的实现

    const source = {
    name: "chuanyitu",
    gender: "male",
    info: {
        country: "China",
        position: "North"
    }
}

const target = JSON.parse(JSON.stringify(source)); // 实现了深克隆

console.log(source === target); // false
console.log(source.info === target.info); // false 说明实现了深克隆

  • 存在的问题

    • 序列化会自动忽略 undefined、Symbol、函数

      const source = {
    a: undefined,
    b: Symbol(),
    c: () => { }
}

const target = JSON.parse(JSON.stringify(source));

console.log(source === target); // false
console.log(source); // { a: undefined, b: Symbol(), c: [Function: c] }
console.log(target); // {}

    • 序列化会将 NaN、Infinity、-Infinity 转换为 null

      const source = {
    a: NaN,
    b: Infinity,
    c: -Infinity
}

const target = JSON.parse(JSON.stringify(source));

console.log(source === target); // false
console.log(source); // { a: NaN, b: Infinity, c: -Infinity }
console.log(target); // { a: null, b: null, c: null }

    • 无法解决循环引用的问题

      const student = {
    name:"chuanyitu",
}

const school = {
    title:"XDU",
}

student.school = school;
school.student = student;

const studentCopy = JSON.parse(JSON.stringify(student));
/* TypeError: Converting circular structure to JSON */

2. 手写一个深克隆

2.1 原始类型逻辑
if (source === null || typeof source !== 'object') {
    return source;
}
2.2 DOM 元素逻辑
if (source instanceof Node) {
    return source;
}
2.3 循环引用逻辑
if (hash.get(source)) {
    return hash.get(source);
}
2.4 Date 对象逻辑
if (source instanceof Date) {
    return new Date(source);
}
2.5 RegExp 对象逻辑
if (source instanceof RegExp) {
    return new RegExp(source);
}
2.6 Function 对象逻辑
if (source instanceof Function) {
    return source;
}
2.7 Map 对象逻辑
if (source instanceof Map) {
    const clonedMap = new Map();
    source.forEach((value, key) => {
        clonedMap.set(deepClone(key, hash), deepClone(value, hash));
    });
    hash.set(source, clonedMap);
    return clonedMap;
}
2.8 Set 对象逻辑
if (source instanceof Set) {
    const clonedSet = new Set();
    source.forEach(value => {
        clonedSet.add(deepClone(value, hash));
    });
    hash.set(source, clonedSet);
    return clonedSet;
}
2.9 一般对象逻辑
/* source 是一般对象或数组 */
const clonedSource = new source.constructor(); // 创建一个新的对象或数组
// Reflect.ownKeys(obj) 相当于 Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(target))
Reflect.ownKeys(source).forEach(key => {
    clonedSource[key] = deepClone(source[key], hash);
})
hash.set(source, clonedSource);
return clonedSource;
2.10 简单实现
function deepClone(source, hash = new WeakMap()) {
    /* hash 是额外开辟的一个存储空间，用来存储 “当前对象-拷贝对象” 的映射关系，用于解决循环引用问题。
    如果 hash.get(source) 查找到内容，说明当前对象已经被拷贝过了，直接返回拷贝结果即可，从而避免循环调用；
    如果 hash.get(source) 未查找到内容，说明当前对象没有被拷贝过，此时可以将拷贝结果添加到内存空间中去 */
    /* 这里使用 WeakMap 开辟内存空间，可以配合垃圾回收机制，防止内存泄漏。因为其键名所指向的对象，不计入
    一次引用，从而不影响垃圾回收机制 */

    /* source 是原始类型 */
    if (source === null || typeof source !== 'object') {
        return source;
    }

    /* source 时 DOM 元素 */
    if (source instanceof Node) {
        return source;
    }

    /* 处理循环引用情形 */
    if (hash.get(source)) {
        return hash.get(source);
    }

    /* source 是 Date 对象 */
    if (source instanceof Date) {
        return new Date(source);
    }

    /* source 是 RegExp 对象 */
    if (source instanceof RegExp) {
        return new RegExp(source);
    }

    /* source 是 Function 对象 */
    if (source instanceof Function) {
        return source;
    }

    /* source 是 Map 对象 */
    if (source instanceof Map) {
        const clonedMap = new Map();
        source.forEach((value, key) => {
            clonedMap.set(deepClone(key, hash), deepClone(value, hash));
        });
        hash.set(source, clonedMap);
        return clonedMap;
    }

    /* source 是 Set 对象 */
    if (source instanceof Set) {
        const clonedSet = new Set();
        source.forEach(value => {
            clonedSet.add(deepClone(value, hash));
        });
        hash.set(source, clonedSet);
        return clonedSet;
    }

    /* source 是一般对象或数组 */
    const clonedSource = new source.constructor(); // 创建一个新的对象或数组
    // Reflect.ownKeys(obj) 相当于 Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(target))
    Reflect.ownKeys(source).forEach(key => {
        clonedSource[key] = deepClone(source[key], hash);
    })
    hash.set(source, clonedSource);
    return clonedSource;
}

3. structuredClone

  • 介绍：structuredClone 是一个用于实现深度克隆对象的 JS 内置 API，其可以克隆绝大多数 JS 对象。此外，该 API 还能处理循环引用问题。

    不足之处：structuredClone 不能克隆函数、DOM 节点、Error 对象等；同时，浏览器支持有限，并不是所有浏览器环境都支持该 API。

  • 深克隆的实现

    const source = {
    name: "chuanyitu",
    age: 23,
    details: {
        hobbies: ["reading", "gaming"],
        address: { country: "China" }
    },
    date: new Date(),
    regex: /test/i,
    map: new Map([["key1", "value1"]]),
    set: new Set([1, 2, 3])
};

// 使用 structuredClone 进行深拷贝
const target = structuredClone(source);

// 验证深拷贝效果
console.log(target.details === source.details); // false
console.log(target.date === source.date); // false
console.log(target.regex === source.regex); // false
console.log(target.map === source.map); target // false
console.log(target.set === source.set); // false

REFERENCES

https://juejin.cn/post/7072528644739956773#heading-10

【JavaScript】手撕前端面试题：对象参数浅拷贝 简易深拷贝 完整深拷贝_深拷贝,函数、正则
2401_84182020的博客
05-14 872
通过对象上的能够获取该对象的构造函数名，能够以此来判断该对象具体是什么。for in。
2024高频前端面试题 JavaScript 和 ES6 篇
FitnessSnail的博客
03-03 2654
2024高频前端面试题 JavaScript 和 ES6 篇
JavaScript深度复制（deep clone）的实现方法
10-22
本文给大家介绍JavaScript深度复制（deep clone）的实现方法，涉及到js深度复制相关知识，本文介绍的非常详细，特此分享脚本之家平台供大家参考
js实现深度克隆
qq_53489791的博客
10-16 1802
深度克隆 克隆或者拷贝分为2种： 浅度克隆 、 深度克隆 。 浅度克隆 ：基本类型为值传递，对象仍为引用传递。 深度克隆 ：所有元素或属性均完全克隆，并于原引用类型完全独立，即，在后面修改对象的属性的时候，原对象不会被修改。 实现深度克隆： 代码及注释： // 参数deep: true 表示深度克隆 否则 浅克隆 Object.prototype.clone = function(deep){ // 获取到调用函数的对象 // this
js 对象深拷贝的五种方法
最新发布
weixin_43506403的博客
03-27 823
简单对象：可以使用。复杂对象：推荐使用或。自定义实现：可以使用递归函数处理特殊需求。
JS实现深度克隆
weixin_46094474的博客
09-25 2399
我们在对数据进行克隆时会遇到两种数据类型,即基本数据类型和引用数据类型. 对于基本数据类型,不需要讨论深度克隆和浅度克隆的问题;而对于引用数据类型,我们需要根据需要对其进行浅克隆(简单的地址引用操作)或深克隆(不只是引用地址的赋值,而是将原本的数据克隆一份,让其不再对原本的数据产生影响). ...
js深度克隆
FeatureVey的博客
12-26 164
// 1. 遍历, 判断每一个值是原始值还是引用值 // 2. 如果是原始值, 直接复制 // 3. 如果是引用值, 创建数组或者对象, 递归 // 在递归的过程中,如果源的属性 // 是原始值, 同上第二步 // 是引用值, 同上第三步 function deepClone(target, origin){ var target = target || {}, t...
js的浅克隆和深度克隆
hexon804的专栏
05-05 1627
转载：http://www.jianshu.com/sign_in 听到这个名字的时候都被吓尿了。克隆听起来就很屌的样子。不过其实琢磨了一下根本没有什么好尿的——我特别讨厌一些人故作高深的摆出一副科学家的鸟样。 知乎上有一句话是这样的： 什么叫做理解了某一个概念？就是你可以用简单的语言把这个概念对你六岁的小侄女讲明白。 深度克隆就是：把一个对象里面的东西一模一样
【web前端面试必问7】浅拷贝和深拷贝
m0_56349322的博客
04-09 2242
一、先上面试的答案： 浅拷贝：只拷贝源数据的第一层，修改拷贝的数据第一层，源数据也不会发生改变。修改拷贝的数据第二层源数据会发生改变。源数据的修改，拷贝的数据就会 深拷贝： 二、浅拷贝 浅拷贝的实现方式1 直接上案例分析 function simpleClone(initalObj) { var obj = {}; //定义对象 obj 为空对象 for ( var i in initalObj) { //循环initalObj 里的每个键值对 赋值 给对象的obj对
2023前端面试题汇总（最新）-持续更新中
热门推荐
Mr_LiuP的博客
07-17 3万+
Vue 中的 data 必须是个函数，因为当 data 是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。简单来说，就是为了保证组件的独立性和可复用性，如果 data 是个函数的话，每复用一次组件就会返回新的 data，类似于给每个组件实例创 建一个私有的数据空间，保护各自的数据互不影响。
2024年前端面试中JavaScript的30个高频面试题之基础知识
weixin_42429220的博客
01-12 4209
Async/await是现代方法来处理JavaScript中的异步代码,它提供了更简洁和易读的方式来使用Promise和异步操作,有效避免“回调地狱”,并改善异步代码的整体结构。在JavaScript中,使用async关键字来定义一个异步函数,它返回一个Promise。在async函数内部,使用await关键字可以暂停函数的执行,直到Promise被解析,从而实现同步代码的效果,同时处理异步操作。try {// 使用异步函数// 处理检索到的数据})// 处理错误});
JS 深度克隆的实现方法
UserGuan的博客
05-28 3610
如果这个对象里面含有 Map 之类的这些玩意，克隆之后这个 mapList 就不再是一个 Map 结构了。console.log("克隆后的对象", deepClone(obj));console.log("克隆后的对象", deepClone(obj));// 环形引用 obj.c 等于 obj 本身。或者是这个对象里面有一些函数之类的，克隆之后这个函数后都没有了。console.log("原对象", obj);console.log("原对象", obj);
JS浅克隆和深克隆
goodcaoyu的博客
10-08 191
为什么会有克隆这么个玩意呢？ 上代码： var a = [1,2,3]; var b = a; a[1] = 4; console.log(b[1]); // 4 这就是我们为什么提到克隆的原因。我只不过改了a数组的内容，怎么b数组的内容也跟着一起变了嘞？这里需要知道a和b在栈和堆中的存储情况 大概说下，数组的内容是存储在堆中的，而a和b不过是作为一个引用（也可以参考C语言的指针）指向了数组内容的存储地址，上面var b = a;只不过是将a引用赋值给了b，并不是将数组内容拷贝一份出来，然后让b指向新
js 深度克隆
print_2022的博客
12-23 601
深度克隆（Deep Clone）是指复制一个对象或数组及其所有嵌套结构的副本，使得克隆后的对象与原对象完全独立。JavaScript 提供了一些方法实现深度克隆，但每种方法有其优缺点。是一种内置的深拷贝方法，支持复杂数据结构。通过递归遍历对象和数组，手动实现深拷贝。对于有循环引用的对象，需要使用。这种方法最简单，但有局限性。来避免递归陷入死循环。
js-深克隆的实现方法
weixin_34326558的博客
06-15 1905
基于该大神的博客，自己做了一些总结 请你实现一个深克隆 利用JSON.parse、JSON.stringify() const oldObj = { a: 1, b: [ 'e', 'f', 'g' ], c: { h: { i: 2 } } }; const newObj = JSON.parse(JSON.stringify(oldObj)); console.log(new...
JS：对象的浅克隆、深克隆
liuxudanhahaha的博客
12-30 1325
JS中对象的深浅克隆 一、对象的浅克隆 1.浅克隆：只克隆对象的“表层”，如果对象的某些属性值又是引用类型值，则不进一步克隆它们，只是传递它们的引用 2.使用for…in…循环即可实现对象的浅克隆 var obj1 = { a: 1, b: 2, c: [44, 55, 66] }; // 实现浅克隆 var obj2 = {}; for(var k in obj1){ // 每遍历一个k属性，就给obj2也添加一个同名的k属性 // 值和obj1的k属性值相同
JS 深克隆的实现
qq_45067591的博客
07-01 128
js 克隆 对象通过引用被赋值和拷贝。换句话说，一个变量存储的不是“对象的值”，而是一个对值的“引用”（内存地址）。因此，拷贝此类变量或将其作为函数参数传递时，所拷贝的是引用，而不是对象本身。 所有通过被拷贝的引用的操作（如添加、删除属性）都作用在同一个对象上。 为了创建“真正的拷贝”（一个克隆），我们可以使用 Object.assign 来做所谓的“浅拷贝”（嵌套对象被通过引用进行拷贝）或者使用“深拷贝”函数，例如 _.cloneDeep(obj)。 更多描述见对象的引用和复制 手写深克隆 functio
关于JavaScript的浅拷贝和深拷贝
weixin_30387663的博客
12-24 153
在JS中有一些基本类型像是Number、String、Boolean，而对象就是像这样的东西{name:'Larry',skill:'Node.js'}，对象跟基本类型最大的不同就在于他们的传值方式。 基本类型是按值传递，像是这样：在修改a时并不会改到b var a = 25; var b = a; b = 18; console.log(a);//25 consol...
js之深浅克隆
qq_44193048的博客
07-18 740
浅度克隆：原始类型为值传递，对象类型仍为引用传递。 深度克隆：所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中。 为什么分深浅克隆： JavaScript里面的数据存储分为两种： 简单数据类型：存储在栈里面 复杂数据类型：地址存在栈里面，数据存储在堆里面 而复杂粘贴是在操作栈里面的数据 下面是一些克隆 //数值克隆的表现 var a = "1"; var b = a; b = "2"; console.log(a); // "1" console.log(b)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值