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中的对象,提升你的开发效率和能力,祝你在面试中取得好成绩!

相关推荐
BillKu几秒前
Vue3父子组件数据同步方法
前端·javascript·vue.js
丶Darling.2 分钟前
26考研 | 王道 | 数据结构 | 第七章 查找
前端·数据结构·考研
七月丶23 分钟前
❌ 别再用接口文档开发了!我改用“Mock-First”后爽到飞起
前端·javascript·后端
egghead2631626 分钟前
Promise、Generator、async/await、axios、Ajax、Fetch 啥是啥?
面试
綦枫Maple28 分钟前
Vue实战(08)解决 Vue 项目中路径别名 `@` 在 IDE 中报错无法识别的问题
前端·ide·vue.js
患得患失94928 分钟前
【前端】【业务场景】【面试】在前端开发中,如何实现文件的上传与下载功能,并且处理可能出现的错误情况?
前端
315356691329 分钟前
Optional 全解析:Java 最被低估的空值处理利器
java·前端·后端
七月丶29 分钟前
🗑 写了 2000 行代码,结果自己全删了。
前端·javascript·后端
IT技术图谱30 分钟前
【绝非标题党】网络监听新姿势:APT编译时注解实现高扩展框架
android·面试·架构
云之兕31 分钟前
在面试中被问到spring是什么?
spring·面试·职场和发展