浅拷轻描生新贝,深复细琢铸宝胚

在JavaScript学习中,拷贝是很重要的一个知识点。拷贝主要分为浅拷贝(Shallow Copy)和深拷贝(Deep Copy)。本文将阐述两者的概念,还将通过手写示例深入探讨如何实现这两种拷贝方式,以及它们在实际应用中的考量。

浅拷贝:表面级复制

浅拷贝只复制对象的第一层属性,对于嵌套对象或数组,仅复制它们的引用,导致原对象和拷贝对象在这些部分仍然共享数据。

实现方法:

js 复制代码
let obj = {
    a: 1, 
    b: [1,2,3]
}
  • Object.create(obj)

    • let obj2 = Object.create(obj);
  • Object.assign({}, obj)

    • let obj2 = Object.assign({}, obj);
  • Array.concat()

    js 复制代码
    const arr = [1, 2, 3];
    const newArr = [].concat(arr);
    console.log(newArry); // 输出 [1, 2, 3]
  • Array.slice(0)

js 复制代码
    const arr = [1, 2, 3];
    const newArr = original.slice(0);
    console.log(newArr); // 输出 [1, 2, 3]
  • Array.toReverse().reverse()
js 复制代码
    const arr = [1, 2, 3];
    const newArr = arr.toReversed().reverse();
    console.log(newArr); // 输出 [1, 2, 3]
  • 扩展运算符 ...args
js 复制代码
    const arr = [1, 2];
    const newArr = [...arr];
    console.log(newArr); 

手写浅拷贝示例

  • 实现原理:
    1. forin循环遍历对象中的所有属性
    2. 借助hasOwnProperty()方法,判断属性是否为对象显式属性
  • 实现代码:
javascript 复制代码
function shallowCopy(obj) {
    let newObj = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

特点

  • 执行速度快,占用资源少。
  • 适用于简单对象或不需要完全独立拷贝的场景。
  • 不适用于包含嵌套对象或数组的复杂结构,因为更改嵌套数据会影响原对象。

深拷贝:彻底复制

深拷贝会递归地复制对象的所有层次,包括嵌套的数组和对象,从而确保原对象和拷贝对象完全独立,互不影响。

实现方法:

  • JSON.parse(JSON.stringify(obj))(有局限性)
js 复制代码
     const original = { a: 1, b: { c: 2 } };
     const copy = JSON.parse(JSON.stringify(original));
     console.log(copy); // 输出 { a: 1, b: { c: 2 } }
  • structuredClone(obj)(较新,但仍有限制)
js 复制代码
    const original = { a: 1, b: { c: 2 } };
    const copy = structuredClone(original);
    console.log(copy); // 输出 { a: 1, b: { c: 2 } }
  • 自定义递归函数实现

手写深拷贝示例

  • 实现原理:
  1. forin循环遍历对象中的所有属性
  2. 借助hasOwnProperty()方法,判断属性是否为对象显式属性
  3. 判断属性值类型,递归调用深拷贝函数
  • 实现代码:
javascript 复制代码
function deepCopy(obj) {
    if (!obj || typeof obj !== 'object') {
        return obj;
    }
    let newObj = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = deepCopy(obj[key]);
        }
    }
    return newObj;
}

特点

  • 创建完全独立的副本,适用于复杂数据结构。
  • 相对耗时和占用更多资源,尤其是面对深度嵌套对象。

实践比较与选择

  • 性能与资源:浅拷贝因为操作简单,执行效率高,适合快速复制;深拷贝则因递归复制所有层级,成本较高,但在需要完全独立数据副本时不可或缺。
  • 应用场景:对于简单的对象复制或状态克隆,浅拷贝足矣;而在需要确保数据完全隔离,避免外部修改影响内部状态时,深拷贝是更好的选择。
  • 注意事项 :使用JSON.stringify()JSON.parse()进行深拷贝虽简便,但存在局限性(如不支持函数、Symbol、循环引用等)。自定义深拷贝时,循环引用的处理是一个常见的挑战。

结论

浅拷贝和深拷贝各有千秋,关键在于根据具体需求选择合适的拷贝策略。了解它们的实现机制,不仅能提升代码的健壮性,还能有效避免潜在的数据篡改问题。通过手写实现深浅拷贝,不仅可以加深对JavaScript对象的理解,也能在特定场景下提供灵活的解决方案。

相关推荐
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā7 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder8 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript