JavaScript中的Object.assign()方法

2023-11-04

目录

介绍

什么是Object.assign()?

JavaScript可枚举属性

语法和参数

您可以使用Object.assign()方法做什么?

合并对象

克隆对象

关于Object.assign()方法的注意事项

$.extend和Object.assign()之间的区别?

总结


介绍

第一次看到此方法时,我以为该方法可以帮助我复制对象或将对象合并为一个。当我习惯使用这种方法时,我变得越来越好奇,我想更多地了解它及其不同的行为。

这就是为什么本文将探讨此方法以及使用此方法时需要记住的事情。

好的,让我们开始吧。

什么是Object.assign()

调用后,此方法会将值从一个或多个不同的对象复制到目标对象。此外,复制的值是对象拥有的所有可枚举属性。那些不了解可枚举属性,无后顾之忧的人,我们将一起学习并展示一个简单的示例。

JavaScript可枚举属性

JavaScript中的可枚举属性是可以使用for-in loop 或类似的迭代方法(例如Object.keys())访问的属性。

让我们举个简单的例子,说明如何检查属性是否可枚举。

/*
 * Let's define an object with two properties
 */
const desktop = {
  CPU: "Intel",
  Memory: "16GB"
};

/*
 * Let's define a property at runtime. 
 * This property we'll set as non-enumerable.
 */
Object.defineProperty(desktop, 'Operating_System', {
  value: "Windows 10",
  enumerable: false
});

/* Let's try to iterate through the properties of the desktop object.
 * Expected: 
   "CPU" 
   "Memory"
   The property desktop won't appear as we iterate 
   because the enumerable property is set to false.
 */ 

for( let keys in desktop){
  console.log(keys);
}

//Same as using Object.keys() methods
console.log(Object.keys(desktop));

这是上面的示例代码的步骤。

  1. 我们声明了一个具有两个属性的对象。这些属性是可枚举的(设置为true),这是JavaScript在创建对象时的默认行为。
  2. 在第二步中,我们使用static方法Object.defineProperty()将属性添加到对象并将其可枚举的属性设置为false
  3. 然后,我们尝试了for-in循环和Object.keys() 方法。如预期的那样,这两个方法都可以获取CPU Memory 属性(除了属性OperatingSystem之外)。

语法和参数

回到该Object.assign()方法,我们将尝试探索其语法和参数。

对于语法,它看起来很简单。

Object.assign(target, ...sources)

一个参数是目标对象。简而言之,该target对象将是不同来源相结合的结果。

第二个参数sources,他们是要应用的对象。

最后,此方法返回目标对象。

您可以使用Object.assign()方法做什么?

合并对象

使用Object.assign(),我们可以合并对象。

请参阅以下示例:

/*
* In this example, let's declare two objects, in our example, food and clothes. 
* After that, let's try to merge the two objects into one.
 */

//declare two objects
const food = { color: 'blue'};
const clothes = { brand: 'Guess'};
//merge two objects
const result = Object.assign({ companyName: "XYZ" }, food, clothes);

//The output would be:{companyName: "XYZ", color: "blue", brand: "Guess"}
console.log(result); 

克隆对象

使用Object.assign(),我们可以克隆对象。

请参阅以下示例:

/*
 * In this example, let's declare one object and clone it into an empty object. 
 */

//declare an object
const customer = { fName: 'Jin', lName: 'Necesario', handsome: true };
//clone the customer object
const clonedCustomer = Object.assign({}, customer);

//The output would be: {fName: "Jin", lName: "Necesario", handsome: true}
console.log(clonedCustomer);

关于Object.assign()方法的注意事项

不会复制源的[[prototype]]属性。

让我们看下面的例子:

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}

const newPerson = new Person("jin", 'necesario', 100, 'brown');

Person.prototype.nationality = "English";

/*
* Person {firstName: "jin", lastName: "necesario", age: 100, eyeColor: "brown"}
* age: 100
* eyeColor: "brown"
* firstName: "jin"
* lastName: "necesario"
* __proto__:
* nationality: "English"
* constructor: ƒ Person(first, last, age, eyecolor)
* __proto__: Object
*/
console.log(newPerson);

/*output english*/
console.log(newPerson.nationality);
console.log(newPerson.__proto__.nationality);

let result = Object.assign({}, newPerson);

console.log(result);

/*undefined because no access to [[proto]]*/
console.log(result.nationality);
console.log(result.__proto__.nationality);

它不会复制gettersetter

让我们看下面的例子:

const customer = {
    fName: 'Jin',
    lName: 'Necesario',
    get fullName() {
        return this.lName + " " +  this.fName;
    },
    set fullName(value){
        const parts = value.split(" ");
        this.fName = parts[0];
        this.lName = parts[1];
    }
};

let result = Object.assign({}, customer);

/*
* We are showing that this object has a getter and setter that will be 
* available in the target object
* {enumerable: true, configurable: true, get: ƒ, set: ƒ}
*   configurable: true
*   enumerable: true
*   get: ƒ fullName()
*   set: ƒ fullName(value)
*   __proto__: Object
*/

console.log(Object.getOwnPropertyDescriptor(customer,'fullName'));

/*
 * Output: 
 * { fName: "Jin", lName: "Necesario", fullName: "Necesario, Jin"}
 */
console.log(result);

/*
* Output: 
* {value: "Necesario, Jin", writable: true, enumerable: true, configurable: true}
*  configurable: true
*  enumerable: true
*  value: "Necesario, Jin"
*  writable: true
*  __proto__: Object
*/
console.log(Object.getOwnPropertyDescriptor(result,'fullName'));

$.extendObject.assign()之间的区别?

如果您一直在并行使用JQueryVanilla JS,则可能在JQuery中遇到过$.extend。您可能已经考虑或询问了两者之间的区别。

现在,在我看来,这些方法的目标是将对象克隆或合并为一个对象。

但是,主要区别在于Object.assign()进行浅层复制,而$.extend使用深层复制。

让我们在下面看一个例子。

let customer = {
    id: 1,
    details: {
        firstName: 'Jin',
        lastName: 'Necesario',
        tall: true
    }
};

let customer2 = {
    id: 2,
    details: {
        firstName: 'Vincent'
    }
};

let newCustomer = Object.assign({}, customer, customer2);
let newCustomer2 = $.extend(true, {}, customer, customer2);

/**
 * output:
 * {
     details: {firstName: "Vincent"}
     id: 2
    }
 */
console.log(newCustomer);

/**
 *  output:
 *  {
 *    details: {firstName: "Vincent", lastName: "Necesario", tall: true}
 *    id: 2
 *   }
 */
console.log(newCustomer2); 

总结

这篇文章展示了Object.assign()方法实际上对代码示例有什么作用,并且还展示了处理该方法时需要注意的一些事项。

https://www.codeproject.com/Tips/5293257/The-Object-assign-Method-In-JavaScript

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript中的Object.assign()方法 的相关文章

  • 在 javascript 原型事件处理程序中保留“this”引用[重复]

    这个问题在这里已经有答案了 正确的保存方法是什么this存储在对象原型内的事件处理程序中的 javascript 引用 我不想创建像 this 或 that 这样的临时变量 而且我不能使用像 jQuery 这样的框架 我看到很多人谈论使用
  • JavaScript 支持逐字字符串吗?

    在 C 中 您可以像这样使用逐字字符串 server share file txt JavaScript中有类似的东西吗 模板字符串支持换行 so you can do this if you want https developer mo
  • JavaScript 画布内存问题

    我在用着getImageData putImageData在 HTML5 画布上能够操作图片 我的问题是浏览器似乎从来没有释放任何内存 http jonelf posterous com lite gc men for sent 直到我关闭
  • 解释一下这个令人困惑的 dojo 教程声明语法

    我正在阅读使用的语法道场的声明 http dojotoolkit org documentation tutorials 1 8 declare 用于班级创建 描述很混乱 The declare function is defined in
  • 如何在 Windows 网络中的 Intranet Web 应用程序中获取用户的用户名

    我内部有一个简单的 HTML 页面 它只显示一个表单并要求用户填写 我想自动捕获Windows域用户名和机器名 并将其与表单中收集的数据一起提交 我可以在客户端这样做吗 HTML JavaScript 或者我被迫在服务器端执行此操作 我还不
  • 在动态创建的元素的onclick函数的属性中传递一个字符串

    我试图在动态创建的锚元素的 onClick 事件处理函数的参数中传递一个字符串 请参阅小提琴http jsfiddle net shmdhussain bXYe4 http jsfiddle net shmdhussain bXYe4 我无
  • 无需重定向的 HTML 页面提交

    有没有什么方法可以在不使用ajax的情况下提交html表单而无需从当前页面重定向 你可以设置一个target 为您form 这样您就可以将表单提交到新选项卡 target blank 或一个小的 隐藏的iframe target nameo
  • 公开闭包内的方法

    当我们在闭包内创建一个方法时 该方法将成为该闭包的私有方法 并且在我们以某种方式公开它之前无法访问它 怎么可能暴露呢 您可以返回对它的引用 var a function var b function I m private alert go
  • 如何将焦点设置在 BootStrap 中的第一个输入字段上? [复制]

    这个问题在这里已经有答案了 可能的重复 如何将焦点设置到独立于 id 的 HTML 表单中的第一个输入元素 https stackoverflow com questions 277544 how to set the focus to t
  • 在给定索引上将字符串分成两部分并返回两部分

    我有一个字符串 需要在给定索引上拆分 然后返回两个部分 并用逗号分隔 例如 string 8211 8 211 98700 98 700 因此 我需要能够在任何给定索引上拆分字符串 然后返回字符串的两半 内置方法似乎执行分割 但只返回分割的
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • 将默认搜索文本添加到搜索框 html

    我正在努力将 搜索 文本添加到搜索框 我正在努力实现 onfocus 消失文本 And onblur 重新出现文本 到目前为止 我已经实现了这一点 但我必须将其硬编码为 html eg
  • 为什么 console.log() polyfill 不使用 Function.apply()?

    我一直在看一些流行的console log 包装 填充 保罗 爱尔兰的 http paulirish com 2009 log a lightweight wrapper for consolelog 本阿尔曼的 http benalman
  • 如何禁用网页中的萤火虫?

    如何使用 Javascript 禁用 firebug 我想这样做是为了向访问者隐藏我的网页的运作方式 有什么选择可以做到这一点吗 你不能 你能做的最好的事情就是混淆你的 JavaScript 实际上刮掉了 您能做的最好的事情就是将所有安全关
  • D3 强制布局,较大的节点聚集在中心

    我一直在修改将用于标签云的强制布局 每个标签都由一个
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • eventSources 到事件 Json,完整日历

    我正在尝试从 eventSources 获取 json 调用到我的事件 我在 eventSources 中返回的 json 是 title Title Test start 1305841052 当我将此字符串传递到事件中时 它会正确显示日
  • 从json中获取所有子节点

    我有以下 json var source k 01 k 02 children k 05 k 06 children k ABC k PQR k 07 k 03 我希望能够指定 k 的值并取回所有孩子 以及孙
  • 如何强制下载图片?

    我的页面上有一个动态生成的图像 如下所示 img src 我不想告诉我的用户右键单击图像并点击保存 而是想公开一个下载链接 单击该链接将提示下载图像 如何实现这一目标 最初我在 js 中尝试这样做 var path my image att
  • 突出显示单词并提取其附近文本的函数

    我有一个文本例如 Etiam porta semmalesuada magna mollis euismod 整数取数 ante venenatis dapibus posuere velit aliquet 埃蒂亚姆 门塔 塞姆 male

随机推荐

  • HttpRunner使用中的一些问题记录

    背景 在了解接口自动化框架的过程中 看到有介绍说HttpRunner是一款不错的开源框架 所以 简单试用了一下 虽然有中文使用手册的帮助 但在结合自己项目接口的使用中还是遇到一些问题 在解决这些问题之后 也对这一框架的使用有了更深的了解 环
  • 如何创建对电脑屏幕的自动点击的脚本

    要创建对电脑屏幕的自动点击脚本 你可以使用操作系统自带的脚本语言 或者使用第三方自动化工具 使用操作系统自带的脚本语言 Windows 你可以使用 Windows 自带的 Visual Basic 脚本语言来创建自动点击脚本 使用 Visu
  • 进程-进程之进程状态(R、S、D、T、Z、X)

    进程概念 1 正在执行的程序 2 正在计算机上执行的程序实例 3 能分配处理器并由处理器执行的实体 进程的两个基本元素是程序代码和代码相关联的数据集 进程是一种动态描述 但并不代表所有的进程都在运行 这就可以引入 进程状态 进程在内存中因策
  • 小程序发布流程

    前言 小程序开发完成 并且经过了本地的测试后 提交审核 1 服务器域名配置一个月内可申请5次修改 服务器域名需经过ICP备案 新备案域名需24小时后才可配置 域名格式只支持英文大小写字母 数字及 不支持IP地址及端口号 服务器配置完成后 在
  • JavaScript基础知识全总结

    JavaScript基础 浏览器说明 浏览器是指可以显示网页服务器或者文件系统的HTML文件内容 并让用户与这些文件交互的一种软件 通俗的讲 可以显示页面的一个软件 国内网民计算机上常见的网页浏览器有 QQ浏览器 Internet Expl
  • 串口助手调试Lora模组

    硬件 两个usb装TTL 两个lora
  • DB实验(1)数据库和表的创建与管理

    一 实验内容 步骤以及结果 1 利用图形用户界面连接数据库 例如 MySQL Workbench或者 HeidiSQL 2 利用命令行连接数据库 3 利用图形用户界面创建 备份 删除和还原数据库和数据表 创建SPJ MNG数据库 在SPJ
  • 探析ElasticSearch Kibana在测试工作中的实践应用

    一 为什么使用ES Kibana 离线数据测试中最重要的就是数据验证 一部分需要测试es存储数据的正确性 另一部分就需要验证接口从es取值逻辑的正确性 而为了验证es取值逻辑的正确性 就需要用到Kibana 它能帮助测试同学更加快速高效的执
  • 【utools】vue2开发utools插件项目相关经验(保姆式详细介绍)

    目录 前言 初始化utools项目配置 vue2与utools配合 开发注意事项 utools提供的API使用 数据持久化 utools的部署和发布 结语 前言 utools是一个非常好用的软件 简易的各种工具对于我的生产力有很大提升 特别
  • 【QT+OpenCV】人脸识别简易版

    通过OpenCV自带的特征分类器和函数 实现一个简易版的人脸识别 在程序执行前 先了解一下OpenCV相关知识 haar特征分类器的使用 1 图像识别理论 知识 经验 2 haar特征分类器 正样本 负样本进行训练 haar特征 卷积算法
  • C++输入 / 输出运算符的重载-详细解释

    为什么需要重载输入输出运算符 有人会问 我直接用 iostream 里面的标准输入输出不好吗 搞这么麻烦 事实上 你会发现C 里面很多的 尤其是运算符 重载都是 面向对象惹的祸 而用户自定义数据类型的输入输出 就是通过重载运算符 lt lt
  • $.extend(true,{},a,b),深入理解,小心陷阱

    extend一般情景下 使用深度拓展两个对象时 我们想要的效果是 b对象覆盖掉a对象中存在的所有属性 没有则新增到a对象中 下面我们看一下我所遇到的问题 我希望通过深度拓展将tmp中的editoption覆盖掉ret中的editoption
  • Java开发区块链的三大sdk开发库

    如果你想将区块链合并到一个Java项目中 现在我们来看看就是这个细分领域中三个最大的OSS玩家 好的伙计们 我们都听说过比特币 以太坊或其他加密货币 其中有一些时髦的名字围绕着我们常见的新闻 但我们作为Java开发人员知道如何轻松地与这些区
  • 关于c语言循环,我想说的是:

    大一萌新写的c语言都能看懂版 一 Why does it work的博客 CSDN博客 大一萌新写的c语言都能看懂版 二 Why does it work的博客 CSDN博客 编了这么久的代码 对于运行你了解多少 Why does it w
  • Python安装第三方库,出现‘PyThreadState’ has no member named ‘exc_type’解决方法

    最近由于工作需要 要从hbase中读取数据 然后处理过后 展示给用户 在网上搜通过Python的happybase模块可以进行简单快捷的读取 但是在安装happybase 让我非常不开心 具体错误如下 Collecting happybas
  • 【Java校招面试】实战算法(五)——分数相加(虎牙)

    目录 前言 一 题目描述 二 解题思路 三 代码实现 后记 前言 实战算法 是本专栏的第三个部分 本篇博文是第五篇博文 主要讲解虎牙笔试题 分数相加 的解法 如有需要 可 点击这里 返回本专栏的索引文章 点击这里 返回上一篇 Java校招面
  • git add , git commit 添加错文件 撤销

    1 git add 添加 多余文件 这样的错误是由于 有的时候 可能 git add 空格 点 表示当前目录所有文件 不小心就会提交其他文件 git add 如果添加了错误的文件的话 撤销操作 git status 先看一下add 中的文件
  • js判断移动端还是pc端

    js判断移动端还是pc端 function isMobile let userAgentInfo navigator userAgent let Agents Android iPhone SymbianOS Windows Phone i
  • cat /proc/iomem

    在proc目录下有iomem和ioports文件 其主要描述了系统的io内存和io端口资源分布 对于外设的访问 最终都是通过读写设备上的寄存器实现的 寄存器不外乎 控制寄存器 状态寄存器和数据寄存器 这些外设寄存器也称为 IO端口 并且一个
  • JavaScript中的Object.assign()方法

    目录 介绍 什么是Object assign JavaScript可枚举属性 语法和参数 您可以使用Object assign 方法做什么 合并对象 克隆对象 关于Object assign 方法的注意事项 extend和Object as