首页 > 其他分享 >Object.assign()详解,Object.assign()与$.extend()合并对象,浅拷贝,js给现有对象增加新属性

Object.assign()详解,Object.assign()与$.extend()合并对象,浅拷贝,js给现有对象增加新属性

时间:2024-01-22 09:46:54浏览次数:24  
标签:target extend 对象 age Object var assign 属性

一、简介:
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
简单来说,就是Object.assign()是对象的静态方法,可以用来复制对象的可枚举属性到目标对象,利用这个特性可以实现对象属性的合并。

二、用法:
Object.assign(target, ...sources)
参数:target--->目标对象
source--->源对象
返回值:target,即目标对象

三、使用示例:
1、目标对象和源对象无重名属性
var target={name:'guxin',age:18};
var source={state:'single'}
var result=Object.assign(target,source);
console.log(target,target==result);
结果:{name:'guxin',age:18,state:'single'} true
可以看到source上的state属性合并到了target对象上。如果只是想将两个或多个对象的属性合并到一起,不改变原有对象的属性,可以用一个空的对象作为target对象。像下面这样:
var result=Object.assign({},target,source);
2、目标对象和源对象有重名属性
上面的示例目标对象和源对象是没有重名属性的,那么如果他们有重名属性又会怎样呢?是后面的属性覆盖前面的还是前面的属性覆盖后面的呢?我们接下来看下一个例子:
var target={name:'guxin',age:18}
var source={state:'signle',age:22}
var result=Object.assign(target,source)
console.log(target)
我们来看下运行结果:{name:'guxin',age:22,state:'signle'}
可以看到如果有同名属性的话,后面的属性值会覆盖前面的属性值。
3、有多个源对象
前面的示例都是只有一个源对象,那么如果有多个源对象情况会不会不同呢?我们继续看下面的例子:
var target={name:'guxin',age:18};
var source1={state:'signle',age:22};
var source2={mood:'happy',age:25};
var result=Object.assign(target,source1,source2);
console.log(target);
运行结果:{name:'guxin',age:25,state:'signle',mood:'happy'}
可以看到有多个源对象情况也是和一个源对象一样的。没有同名的属性会直接复制到目标对象上,同名的属性后面的属性值会覆盖前面的同名属性值。

四、注意事项:
1、Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象,继承属性和不可枚举属性是不能拷贝的。
2、针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。
3、目标对象自身也会改变
4、异常会打断后续拷贝任务

五、兼容性
目前IE浏览器不兼容Object.assign(),如果需要兼容IE的话最好不要直接使用这个方法。

六、与$.extend()的比较
我们通过一个简单的示例来比较两者有什么不同,
var target={name:'guxin',age:18}
var source1={state:'signle',age:22}
var source2={mood:'happy',age:25}
var result=Object.assign(target,source1,source2)
console.log(target,'assign')
var targetObj={name:'guxin',age:18}
var sourceObj1={state:'signle',age:22}
var sourceObj2={mood:'happy',age:25}
var result=$.extend(targetObj,sourceObj1,sourceObj2)
console.log(targetObj,'extend')
最终运行结果如下:
{name:'guxin',age:25,state:'signle',mood:'happy'} "assign"
{name:'guxin',age:25,state:'signle',mood:'happy'} "extend"
可以看到两者得到的结果是一样的。所以,我认为这两个方法,除了兼容性应该是一样的。

标签:target,extend,对象,age,Object,var,assign,属性
From: https://www.cnblogs.com/xsj1989/p/17979308

相关文章

  • 无涯教程-Node.js - Request Object函数
    req对象代表HTTP请求,并具有请求查询字符串,参数,正文,HTTP标头等的属性。RequestObject属性以下是与请求对象关联的一些属性的列表。Sr.No.Properties&描述1req.app此属性保存对使用中间件的快速应用程序实例的引用。2req.baseUrl的安装路由器实例的URL路径。......
  • 无涯教程-Node.js - Response Object函数
    res对象表示Express应用程序在收到HTTP请求时发送的HTTP响应。响应对象属性以下是与响应对象关联的一些属性的列表。Sr.No.Properties&描述1res.app此属性保存对使用中间件的快速应用程序的引用。2res.headers已发送布尔值属性,指示应用程序是否为响应发送了H......
  • UObject
    UObject‍UHT空文件结果分析一个空文件#pragmaonce#include"CoreMinimal.h"#include"UObject/Object.h"#include"Hello.generated.h"UCLASS()classTPSPROJECT_APIUHello:publicUObject{GENERATED_BODY()};‍#defineGENERATED_......
  • pd.read_csv( parse_dates=True) AttributeError: 'DatetimeIndex' object has no a
    pandas读取文件的read_csv()方法的parse_dates,index_col参数介绍 pd.read_csv(parse_dates=True)    data=pd.read_csv(f'datasets/{name}.csv',index_col='date',parse_dates=True)dt.weekofyear.to_numpy(),df_asset[“week_of_year”]=df_asset.index.we......
  • 软件测试/测试开发/全日制|Page Object模式:为什么它是Web自动化测试的必备工具
    为UI页面写测试用例时(比如web页面,移动端页面),测试用例会存在大量元素和操作细节。当UI变化时,测试用例也要跟着变化,PageObject很好的解决了这个问题。使用UI自动化测试工具时(包括selenium,appium等),如果无统一模式进行规范,随着用例的增多会变得难以维护,而PageObject让自......
  • 详解Process object has no attribute '_popen'
    详解Processobjecthasnoattribute'_popen'最近在使用Python的multiprocessing模块进行多进程编程时,遇到了一个奇怪的错误:Processobjecthasnoattribute'_popen'。这个错误消息看起来很奇怪,让人摸不着头脑。错误背景在使用multiprocessing模块创建子进程时,通常会创建一个Pr......
  • BEVDet_ High-performance Multi-camera 3D Object Detection in Bird-Eye-View
    zotero-key:5HGRISJQzt-attachments:-"786"title:"BEVDet:High-performanceMulti-camera3DObjectDetectioninBird-Eye-View"citekey:huangBEVDetHighperformanceMulticamera2022bBEVDet:High-performanceMulti-camera3DObjectDet......
  • 记录--Object.assign 这算是深拷贝吗
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助在JavaScript中,Object.assign()是一个用于合并对象属性的常见方法。然而,对于许多开发者来说,关于它是否执行深拷贝的认识可能存在一些混淆。先说答案Object.assign()不属于深拷贝,我们接着往下看。Object.assign(......
  • ObjectMapper工具类 json字符串和 对象之间转换。和对于 ObjectMapper的一些可选设置
    ObjectMapper工具类json字符串和对象之间转换。和对于ObjectMapper的一些可选设置。添加maven依赖<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.13.3</version> </d......
  • ObjectMapper的用法 工具类
    ObjectMapper的用法工具类首先在pom.xml引入<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.8.3</version></depe......