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

相关推荐
moz与京36 分钟前
【面试向】热门技术话题(上)
人工智能·物联网·机器学习·面试·web3·区块链·元宇宙
Pu_Nine_91 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
東雪蓮☆2 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵2 小时前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee
柯南二号2 小时前
【大前端】 断点续传 + 分片上传(大文件上传优化) 的前端示例
前端
前端小超超2 小时前
如何配置capacitor 打包的安卓app固定竖屏展示?
android·前端·gitee
野犬寒鸦2 小时前
力扣hot100:环形链表(快慢指针法)(141)
java·数据结构·算法·leetcode·面试·职场和发展
xiaopengbc2 小时前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君2 小时前
React中台系统如何嵌入到业务系统中
前端
Slice_cy2 小时前
不定高虚拟列表
前端