ECMAScript 2017 中的对象深浅拷贝

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在前端开发中,我们通常需要将一个对象复制到另一个变量或对象中。ECMAScript 2017 为我们提供了两种对象拷贝方式:深拷贝和浅拷贝。本文将详细介绍这两种拷贝方式,并讨论它们的区别以及在什么情况下应该使用它们。

浅拷贝

浅拷贝是指将对象的第一层属性复制到新对象中,但不会复制嵌套的对象引用。这意味着,新对象和原对象共享同一嵌套对象,而对于嵌套对象的更改将影响所有引用它的对象。

以下是一个简单的例子来说明浅拷贝的概念:

----- -------------- - - -- -- -- - -- - - --

----- ------------ - ----------------- ----------------

-- ----------
---------------- - --

-------------------------- -- - -- -- -- - -- - - -

---------------------------- -- - -- -- -- - -- - - -

在上面的例子中,通过 Object.assign() 方法对 originalObject 进行浅拷贝,生成了一个拥有相同属性的新对象 copiedObject。接着,我们更改了copiedObject 的嵌套对象 b 中的 c 属性值为 3 ,然后输出了两个变量的值。由于浅拷贝只是对第一层属性进行了复制,所以两个对象共享同一个嵌套对象,导致原对象中的属性也被更改。

因此,浅拷贝适用于对象比较简单时使用,例如基本数据类型属性或无需更改嵌套对象的情况下。注意当处理类似数组、Date 对象等引用类型时,浅拷贝可能会出现问题。

深拷贝

深拷贝不仅复制了对象的第一层属性,还复制了嵌套的对象引用,从而产生一个完全独立的对象。这意味着,对新对象或原始对象中的嵌套对象进行更改不会影响另一个对象。

以下是一个使用 JSON.parse()JSON.stringify() 进行深拷贝的示例:

----- -------------- - - -- -- -- - -- - - --

----- ------------ - -------------------------------------------

-- ----------
---------------- - --

-------------------------- -- - -- -- -- - -- - - -

---------------------------- -- - -- -- -- - -- - - -

在上面的例子中,我们首先将原始对象 originalObject 转换为一个字符串,再通过 JSON.parse() 将其解析为新对象 copiedObject。由于使用了深拷贝,因此更改 copiedObject 中嵌套对象 bc 属性值不会影响原始对象中的属性。

需要注意的是,使用 JSON.parse()JSON.stringify() 进行深拷贝时,会忽略非法格式的值,例如 undefined、function 等,在拷贝后对象中将不存在这些属性。同时也无法处理循环嵌套对象的情况,因为 JSON 不支持序列化循环引用的对象。

结论

综上所述,浅拷贝和深拷贝都有自己适用的场景

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/67241dd82e7021665e12609a


猜你喜欢

  • 在使用 ESLint 时忽略某些文件或目录:如何配置?

    简介 ESLint 是一个用于在 JavaScript 代码中发现问题的静态检查工具。它可以通过与预设或自定义规则进行匹配,检测代码中的问题,如语法错误、未定义变量、重复代码等。

    9 天前
  • PM2 如何进行应用程序的运行环境管理

    随着互联网技术的不断发展,前端技术越来越受到重视。当我们讨论前端技术时,常常会提到服务器,因为服务器是前端应用程序运行的平台。在服务器中,我们需要管理应用程序的运行环境,而 PM2 是一款非常好用的工...

    9 天前
  • Serverless 中如何防范异常流量攻击

    随着 Serverless 技术的普及和应用,越来越多的企业和开发者选择将自己的应用部署到 Serverless 平台上,以此获得更高的可扩展性、更低的成本以及更好的安全性等优势。

    9 天前
  • 解决 Headless CMS 中枚举类型操作不当的问题及修复方法

    Headless CMS 是一个流行的内容管理系统,它允许开发者使用 API 提供前端内容管理。这种方法带来了很多优点,但也带来了一些挑战,例如处理枚举类型的操作。

    9 天前
  • 使用 Sequelize 进行事务操作注意事项

    在并发环境下,事务操作是非常重要的,可以保证数据的一致性和完整性。Sequelize 是 Node.js 中广为使用的 ORM(Object-Relational Mapping)框架,它支持事务操作...

    9 天前
  • 如何使用 Enzyme 测试 React Native 应用中的视频组件?

    简介 React Native 是一种流行的移动端开发框架,它使用 JavaScript 和 React 来构建移动应用。在 React Native 应用中,常常有播放视频的需求。

    9 天前
  • Node.js 下的应用程序安全

    随着 Node.js 在 Web 开发领域的普及,越来越多的应用程序在 Node.js 上运行。然而,这也带来了安全风险。本文将介绍 Node.js 下的应用程序安全问题,并提供一些深入学习和指导意义...

    9 天前
  • 如何使用 Cypress 进行移动端 Web 自动化测试

    随着移动设备的普及和快速发展,移动端 Web 应用也越来越多。在进行开发和维护时,自动化测试已经成为不可或缺的一部分,可以提高测试效率和准确性。Cypress 是一个被广泛使用的自动化测试工具,支持移...

    9 天前
  • 如何在 Fastify 中做好身份验证

    如何在 Fastify 中做好身份验证 Fastify 是一个快速且低开销的 Node.js web 应用框架,它允许您快速构建高效和可扩展的 API 和微服务。作为一种精益而快速的工具,Fastif...

    9 天前
  • ES12中的String.prototype.replaceAll()方法和其他替换方法的性能对比

    在前端开发中,字符串的处理一直是一个比较常见的操作。在字符串替换方面,ES6中新增了String.prototype.replace()方法,然而它仅仅只能替换第一个匹配到的字符串,如果需要替换所有匹...

    9 天前
  • CSS Grid 布局和 CSS Flexbox 布局之间的区别

    前言 在前端开发中,我们通常会用到 CSS 来控制页面的布局。在 CSS 中,有两种比较流行的布局方法,分别是 CSS Grid 布局和 CSS Flexbox 布局。

    9 天前
  • Web Components 实战

    在前端开发中,Web Components 是一种很重要的技术。它可以让我们更好地组件化页面,提高代码复用性和可维护性。在这篇文章中,我们将深入探讨 Web Components 的实战使用,包括定义...

    9 天前
  • 响应式设计中使用媒体查询的技巧

    在今天的互联网时代,响应式设计已经成为了开发一个网站的标准之一。响应式设计是指针对不同设备,采用不同的设计布局和样式,以实现在不同分辨率和屏幕的设备上呈现最佳的网站效果。

    9 天前
  • Webpack 优化实践:CSS 压缩篇

    前言 Webpack 是一个很强大的模块打包工具,能够帮助前端工程师进行模块化开发、代码跨浏览器的兼容性、文件打包、压缩等。然而,Webpack 作为一个高度可配置的工具,当我们没有进行配置时,我们得...

    9 天前
  • PM2如何进行应用程序的自动缩放

    什么是PM2 PM2是一个先进的Node.js进程管理器,可以保证Node.js应用程序运行的高可用性和稳定性。PM2具有自动化管理应用程序、负载平衡、0秒停机重载、进程监控、日志管理等功能。

    9 天前
  • Redux 中如何优化接口请求速度

    在前端开发中,接口请求是必不可少的一环。在 Redux 中,我们如何优化接口请求的速度呢?本文将详细介绍 Redux 中如何优化接口请求速度,并提供示例代码供读者参考。

    9 天前
  • Docker 容器化部署 Oracle 数据库及环境配置

    前言 在现代化的云时代,容器化技术成为了大型企业应用程序的主流部署方式。Docker 作为一种流行的容器化技术,有着很多优点,其中之一就是可以帮助我们轻松地部署 Oracle 数据库和环境。

    9 天前
  • 和 BS-cssreset 握手言和,不再为样式困扰

    对于前端开发人员来说,样式是一个非常重要的方面。网站的外观和用户体验直接受到样式的影响。然而,Css 样式表是一个非常庞大和复杂的领域,特别是当你使用各种浏览器和操作系统时。

    9 天前
  • 细谈 Enzyme 在 React 组件测试中对虚拟 DOM 的支持

    React 是一种流行的前端框架,它的组件式开发模型和虚拟 DOM 功能为开发者提供了更方便的组件测试方式。而 Enzyme,作为 React 生态中一种常用的测试工具,也提供了丰富的方法和 API,...

    9 天前
  • SSE 中的重复消息问题及解决方法

    背景 SSE(Server-Sent Events)是 HTML5 标准中新增的一种服务器推送技术,可以让服务器端向客户端推送实时事件。 SSE 协议规定每个事件都有一个唯一标识符 eventId,用...

    9 天前

相关推荐

    暂无文章