深入了解JavaScript对象拷贝

深入了解JavaScript对象拷贝

引言

JavaScript中的对象拷贝是开发中经常遇到的问题之一。在处理引用类型时,我们需要谨慎选择拷贝的方式,以确保不影响原始数据。本文将深入讨论拷贝的两种主要类型:浅拷贝和深拷贝。我们将介绍常见的浅拷贝方法以及深拷贝的一种常见方式,并讨论深拷贝方法的一些局限性。

拷贝概述

拷贝通常用于创建原始对象的副本,以便在修改副本时不影响原始对象。这对于处理复杂的数据结构和对象引用非常重要。

1. 浅拷贝

浅拷贝是对原始对象的一种表面层次的复制,只复制对象的第一层属性。这意味着如果原始对象包含引用类型的属性,浅拷贝将复制引用,而不是引用指向的对象。

常见浅拷贝方法:

  1. Object.create(obj): 使用 Object.create 方法可以创建一个新对象,该对象的 [[Prototype]](原型)是传入的对象 obj。这是一种浅拷贝方式,只复制了原型链上的属性。

2. Object.assign({}, obj): Object.assign 方法将源对象的属性复制到目标对象中。它是一种浅拷贝方法,只复制了对象的第一层属性。

3. \[\].concat(arr): 通过数组的 concat 方法可以将数组的元素复制到一个新数组中。这同样是一种浅拷贝,只适用于数组。

4. 数组解构 [...arr]: 使用数组解构可以创建一个数组的浅拷贝。同样,这只是复制了数组的第一层元素。

5. arr.slice(): 使用数组的 slice 方法也可以进行浅拷贝,返回一个新数组。

注意事项:

浅拷贝的关键特点是,如果原始对象的属性值是引用类型,那么拷贝后的对象将共享这些引用类型的引用。这意味着修改原始对象的引用类型属性会影响拷贝后的对象。

2. 深拷贝

深拷贝是对原始对象以及其嵌套对象的递归复制。这意味着无论对象有多深层次的嵌套,都会被完整复制,而不是共享引用。

常见深拷贝方法:

使用JSON方法是一种简单而常见的深拷贝方式:

ini 复制代码
let obj2 = JSON.parse(JSON.stringify(obj));

注意事项:

尽管JSON方法简单,但有一些限制:

  1. 不能处理 undefinedfunctionSymbol 这些数据类型。这是因为JSON规范中,这些数据类型是无法被序列化的。
  2. 无法处理循环引用,即对象属性之间形成闭环的情况。
yaml 复制代码
let obj = {
    name: 'li',
    age: 18,
    a: {
        n : 1
    },
    b: undefined,
    c: null,
    d: function() {},
    e: Symbol('hello'),
    f: {
        n: 100
    }
}
obj.e = obj.f
obj.f.n = obj.e      // 循环引用

不过一般情况下你是不会把代码写成这样的。

结论

在选择对象拷贝方法时,需要根据具体需求谨慎选择。浅拷贝适用于大多数情况,但如果涉及到嵌套深层次的对象或需要处理特殊数据类型,深拷贝可能是更可靠的选择。理解每种方法的优势和限制有助于更好地应对实际开发中的需求。

相关推荐
子兮曰1 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰1 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万1 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝1 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋1 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁1 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄1 天前
JavaScript 隐式全局变量解析
javascript
汉堡大王95271 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大1 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师1 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端