ES6 中如何使用 Object.assign 合并对象属性

在开发 Web 前端应用时，我们经常面临需要合并两个或多个对象属性的情况。在 ES6 中，我们可以使用 Object.assign 方法来实现这个功能。

Object.assign 方法概述

Object.assign 方法是 ES6 中新增的一个静态方法，用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。其语法如下：

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

其中，target 表示目标对象，sources 表示源对象，可以有多个。

需要注意的是，Object.assign 方法只会复制源对象的可枚举属性，并且不会复制其原型链上的属性。

实例演示

假设我们有以下两个对象：

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

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

我们可以使用 Object.assign 方法将 obj2 的属性合并到 obj1 中：

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

上面的代码将 obj2 的属性合并到 obj1 中，并返回一个新的对象。同时，因为 obj1 是目标对象，所以 obj1 自身的属性也会被修改。如果我们不想修改原始对象，可以先将其复制一份再进行合并：

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

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

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

上面的代码没有修改原始的 obj1 和 obj2 对象。

不可枚举属性合并

默认情况下，Object.assign 方法只会复制源对象的可枚举属性。如果源对象中有不可枚举属性，不能使用 Object.assign 方法进行复制。

不过，我们可以使用 Object.getOwnPropertyNames 方法获取对象的所有属性名称，包括不可枚举属性，然后再使用 Object.defineProperties 方法将属性一个一个复制到目标对象中。

以下是一个示例代码：

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

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

总结

Object.assign 方法可以方便地将多个对象的属性进行合并，并返回一个新的对象。需要注意的是，Object.assign 只会复制可枚举的属性。如果需要复制不可枚举属性，需要使用 Object.getOwnPropertyNames 和 Object.defineProperties 方法。

在实际开发中，我们经常需要合并多个对象的属性，使用 Object.assign 方法可以提高代码的可读性和可维护性。如果你还没有尝试过 Object.assign，不妨在下一个项目中尝试一下。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65adc835add4f0e0ff7418e8

阅读全文

猜你喜欢

  • Cypress 测试框架：如何进行代理设置

    Cypress 是一款现代化的前端端到端测试框架，它提供了易用的 API 和交互式的 GUI，而且速度快。Cypress 还支持强大的自动化功能，并且通过代理设置，可以轻松地测试本地或开发环境下的应用...

    9 个月前
  • 基于 Docker 容器的应用程序自动化测试实践

    前言 软件测试是软件开发流程中不可或缺的一环。传统的测试方法主要包括手动测试和自动化测试。手动测试效率低且存在漏测的风险，而自动化测试可以大幅提高测试效率和精度。 容器化技术在近年来越来越受到开发者们...

    9 个月前
  • 使用 Serverless 实现微信企业号应用

    前言 微信作为目前最热门的社交媒体之一，已经成为了企业展示、沟通的一种重要方式。而在企业内部沟通中，企业号则是微信的重要组成部分。利用企业号，企业可以通过微信平台来对内、对外进行沟通和管理。

    9 个月前
  • 使用 ES10 中新增的 flatMap() 方法组合多种数组操作

    ES10 中新增了 flatMap() 方法，它是数组操作中非常实用的方法之一。使用 flatMap() 方法可以同时进行多种数组操作，使代码更加简洁高效。在本文中，我们将介绍 flatMap() 的...

    9 个月前
  • 基于 Vue.js 的 SPA 应用前端自动化单元测试实战经验分享

    前言 单元测试是软件开发中重要的一环，它可以帮助开发者检测代码是否符合预期的行为，并及时发现潜在的问题。本文将分享如何在基于 Vue.js 的 SPA 应用中实现前端自动化单元测试，帮助开发者提高代码...

    9 个月前
  • TypeScript 中如何使用 in

    TypeScript 中如何使用 in TypeScript 是面向对象、类型化的 JavaScript 超集，它提供了静态类型检查、更好的代码提示和防止潜在错误发生的能力。

    9 个月前
  • ES6 中的函数参数默认值详解

    在 ES6 中，我们可以为函数参数设置默认值，这在很多情况下都很方便。在本文中，我们将深入探究函数参数默认值的细节，并为你提供一些实用的例子。 基本用法 在 ES6 之前，我们经常会使用类似以下的方法...

    9 个月前
  • 基于 Headless CMS 实现客户端缓存与更新

    随着前端技术的不断发展，越来越多的网站开始采用 Headless CMS。Headless CMS 是一种将内容管理和展示分离的架构，即将管理后台与网站展示的前端分开，从而实现数据和前端页面的解耦。

    9 个月前
  • 在 ES9 中使用字符串扩展操作符来拆分字符串

    JavaScript是前端开发中不可避免的语言，字符串是JS中经常使用的一种数据类型。在ES9中，我们可以使用字符串扩展操作符来拆分字符串，这一功能的实现为前端开发带来了很多便利。

    9 个月前
  • 利用 Jest 进行前端项目自动化测试的实践经验分享

    前端项目开发无法避免出现各种错误，为了保证项目的品质，我们需要进行自动化测试。Jest 是一个强大的 JavaScript 测试框架，可以用于测试 React、Vue、Angular 等前端项目。

    9 个月前
  • 比较 LESS 和 SASS 的三个方面及其使用技巧

    LESS 和 SASS 的比较 LESS 和 SASS 是两种非常流行的 CSS 预处理器，它们为前端开发者提供了更好的编写 CSS 样式的方式。但是，在选择使用 LESS 还是 SASS 时，我们可...

    9 个月前
  • Redux 中间件之 Redux-logger 详解

    前言 Redux 是一个非常流行的状态管理库，用于构建 Web 应用程序。它通过单一的 Store 来管理应用程序的数据，使得代码易于理解和维护。Redux 中间件可以被用于扩展 Redux 的功能，...

    9 个月前
  • PM2 与 MySQL 结合使用实现 Node.js 应用程序的数据访问

    在 Node.js 开发中，我们经常会用到 MySQL 数据库来存储数据。为了保证应用程序的高可用性，我们需要使用 PM2 进行进程管理，并结合 MySQL 数据库来实现数据访问。

    9 个月前
  • RESTful API 和 SOAP 之间的比较和对比

    什么是 RESTful API 和 SOAP？ RESTful API 和 SOAP 都是用于在不同系统和网络间进行数据传输的技术协议。RESTful API 是基于 HTTP 协议的，而 SOAP ...

    9 个月前
  • 解决 ES7 中的 Array.Prototype.includes() 方法在 Safari 浏览器下的兼容性问题

    在前端开发中，我们常常使用 Array.Prototype.includes() 方法用于判断数组中是否包含某个元素。该方法可以很好地提高代码的可读性和可维护性。然而在实际开发中，我们经常会遇到 Sa...

    9 个月前
  • 解决 Vue.js 中 v-bind 和 v-on 同时使用时的问题

    解决 Vue.js 中 v-bind 和 v-on 同时使用时的问题 在 Vue.js 中，v-bind 和 v-on 是两个常用的指令。v-bind 用于绑定属性值，而 v-on 用于绑定事件。

    9 个月前
  • SSE 实现浏览器端断线重连机制的实现

    SSE 实现浏览器端断线重连机制的实现 随着 Web 应用的发展，前端技术的要求越来越高，同时对于用户体验的要求也越来越高，断线重连的机制成为了一种常见的应对措施。

    9 个月前
  • 相关技术：使用 TailwindCSS 优化你的 BootStrap 网站

    在前端开发中，BootStrap 一直是一个相当受欢迎的框架。它可以使网站的开发变得更加快捷和简单。尽管如此，BootStrap 在样式上的定制性却很低，开发人员难以实现个性化设计。

    9 个月前
  • Next.js 中使用 Ant Design 的技巧

    作为一个流行的 React UI 库，Ant Design 在许多前端项目中都得到了广泛的应用。而对于使用 Next.js 框架的前端开发者来说，如何在项目中正确高效地使用 Ant Design，是一...

    9 个月前
  • Koa2+Vue.js+Mongoose+RESTful 接口开发一个小说网站（一）koa2+mongoose 配置

    前言 前端技术在不断的发展和壮大，其中前端框架和库也是层出不穷，如今，Vue.js 已经成为了前端开发中的主流之一，而koa2 和 mongoose 同样也成为了前端开发的重要工具之一。

    9 个月前

相关推荐

    暂无文章