JavaScript对象的深拷贝和浅拷贝 - 2024最新版前端秋招面试短期突击面试题【100道】

JavaScript对象的深拷贝和浅拷贝 - 2024最新版前端秋招面试短期突击面试题【100道】 📋

在JavaScript中,对象的深拷贝和浅拷贝是处理对象复制时的重要概念。了解这两种拷贝方式的区别及实现方法,可以帮助你更好地管理和操作对象数据。

浅拷贝(Shallow Copy) 🌊

浅拷贝只会复制对象的第一层属性。如果属性值是基本类型,则拷贝的是基本类型的值;如果属性值是引用类型,则拷贝的是内存地址。这意味着原始对象和浅拷贝对象会共享引用类型的属性。

实现浅拷贝的几种方法

  1. 使用 Object.assign 方法

    javascript 复制代码
    const original = { a: 1, b: { c: 2 } };
    const shallowCopy = Object.assign({}, original);
  2. 使用扩展运算符(Spread Operator)

    javascript 复制代码
    const original = { a: 1, b: { c: 2 } };
    const shallowCopy = { ...original };

示例

javascript 复制代码
const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

shallowCopy.b.c = 3; // 修改浅拷贝对象的属性
console.log(original.b.c); // 输出 3,原始对象的属性也被改变

深拷贝(Deep Copy) 🕵️‍♂️

深拷贝会复制对象的所有层级属性。如果属性值是基本类型,则拷贝的是基本类型的值;如果属性值是引用类型,则会创建一个新的对象或数组,并递归复制其所有属性。

实现深拷贝的几种方法

  1. 使用 JSON.parseJSON.stringify

    javascript 复制代码
    const original = { a: 1, b: { c: 2 } };
    const deepCopy = JSON.parse(JSON.stringify(original));

    注意:这种方法不能复制函数、undefined、循环引用等。

  2. 手动实现递归深拷贝

    javascript 复制代码
    function deepClone(obj) {
        if (typeof obj !== 'object' || obj === null) {
            return obj; // 如果不是复杂数据类型,直接返回
        }
        let clone;
        if (Array.isArray(obj)) {
            clone = [];
            for (let i = 0; i < obj.length; i++) {
                clone[i] = deepClone(obj[i]);
            }
        } else {
            clone = {};
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    clone[key] = deepClone(obj[key]);
                }
            }
        }
        return clone;
    }
    
    const original = { a: 1, b: { c: 2 } };
    const deepCopy = deepClone(original);
  3. 使用第三方库,如 lodash 的 _.cloneDeep 方法

    javascript 复制代码
    const original = { a: 1, b: { c: 2 } };
    const deepCopy = _.cloneDeep(original);

示例

javascript 复制代码
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.b.c = 3; // 修改深拷贝对象的属性
console.log(original.b.c); // 输出 2,原始对象的属性没有被改变

选择深拷贝还是浅拷贝 🤔

选择使用深拷贝还是浅拷贝取决于你的具体需求:

  • 深拷贝:如果你需要完全独立的副本,避免原始数据被意外修改,应该使用深拷贝。
  • 浅拷贝:如果你知道不会修改原始对象中的引用类型属性,或者需要共享属性引用,那么浅拷贝可能就足够了。

通过掌握深拷贝和浅拷贝的实现方法及其适用场景,你将能够更灵活地处理JavaScript中的对象,提升你的开发效率和能力,祝你在面试中取得好成绩!

相关推荐
一个水瓶座程序猿.几秒前
Vue3 中使用 Vueuse
前端·javascript·vue.js
夏梦春蝉几秒前
ES6从入门到精通:Symbol与迭代器
前端·javascript·es6
今夜星辉灿烂3 分钟前
nestjs微服务-系列2
javascript·后端
一个水瓶座程序猿.4 分钟前
ES6数组的`flat()`和`flatMap()`函数用法
前端·ecmascript·es6
Baihai_IDP8 分钟前
vec2text 技术已开源!一定条件下,文本嵌入向量可“近乎完美地”还原
人工智能·面试·llm
袁煦丞20 分钟前
AI直接出答案!Perplexica开源搜索引擎:cpolar内网穿透实验室第534个成功挑战
前端·程序员·远程工作
Hilaku22 分钟前
用“人话”讲明白10个最常用的正则表达式
前端·javascript·正则表达式
木叶丸31 分钟前
跨平台方案该如何选择?
android·前端·ios
LL.。34 分钟前
同步回调和异步回调
开发语言·前端·javascript
网络点点滴38 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html