Object.assign详解

简介: Object.assign详解

一、Object.assign详解

object.assign()主要用于对象合并,将源对象中的属性复制到目标对象中,他将返回目标对象。

用法

Object.assign(target, ...sources)

参数:target--->目标对象

       source ---> 源对象

返回值:target,目标对象

三、详细讲解

1.目标对象和源对象没有同名属性

var target = {
   name:'带你飞'}
var source = {
   age:18}
var result = Object.assign(target,source)
console.log(result,target===result); // {name: '带你飞', age: 18} true

如果只是想将两个或多个对象的属性合并到一起,不改变原有对象的属性,可以用一个空的对象作为target对象。像下面这样:

var result = Object.assign({
   },target,source);

2.目标对象和源对象有同名属性

var target = {
   name:'带你飞',age:16}
var source = {
   age:18}
var result = Object.assign(target,source)
console.log(result,target===result); // {name: '带你飞', age: 18} true

可以看到如果有同名属性的话,后面的属性值会覆盖前面的属性值。

3.有多个源对象

var target = {
   name:'带你飞',age:16}
var source1 = {
   age:18}
var source2 = {
   age:20,hobby:'打游戏'}
var result = Object.assign(target,source1,source2)
console.log(result,target===result); // {name: '带你飞', age: 20, hobby: '打游戏'} true

如果有多个源对象,没有同名的属性会直接复制到目标对象上,如果有同名属性的话,后面的属性值会覆盖前面的属性值。

4、原始类型会被包装为对象

var source1 = "abc";
var source2 = true;
var source3 = 10;

var result = Object.assign({
   }, source1, null, source2, undefined, source3); 
console.log(result); // {0: 'a', 1: 'b', 2: 'c'}
  • 原始类型会被包装,null 和 undefined 会被忽略
  • 注意,只有字符串的包装对象才可能有自身可枚举属性。

5、对象的拷贝

var object1 = {
   
  a: 1,
  b: 2,
  c: 3
};

var object2 = Object.assign({
   c: 4, d: 5}, object1);

console.log(object2.c, object2.d); // 3 5
console.log(object1)  // { a: 1, b: 2, c: 3 }
console.log(object2)  // { c: 3, d: 5, a: 1, b: 2 }

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

6、对象的深拷贝

深拷贝:深拷贝不会拷贝引用类型的引用,而是将引用类型的值全部拷贝一份,形成一个新的引用类型,这样就不会发生引用错乱的问题,使得我们可以多次使用同样的数据,而不用担心数据之间会起冲突。

let object1 = {
   
        a: 1,
        b: 2
    };

    let object2 = Object.assign({
   }, obj1, {
   
        b: 20
    });

    console.log(object1); // { a: 1, b: 2 }
    console.log(object2); // { a: 1, b: 20 }

7、对象的浅拷贝

浅拷贝:浅拷贝只是复制了对象的引用地址,两个对象指向同一个内存地址,所以修改其中任意的值,另一个值都会随之变化,这就是浅拷贝

var object1 = {
   
        a: 1,
        b: {
   
            c: 2,
            d: 3
        }
    };
var object2 = Object.assign({
   }, object1);
    object2.a = 10;
    object2.b.c = 20;
    console.log(object1); // { a: 1, b: { c: 20, d: 3 } }
    console.log(object2) //{ a: 10, b: { c: 20, d: 3} }

总结

object.assign()主要用于对象合并,将源对象中的属性复制到目标对象中,他将返回目标对象。如果有同名属性的话,后面的属性值会覆盖前面的属性值,如果有多个源对象,没有同名的属性会直接复制到目标对象上,还可以进行对象的深浅拷贝,当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝

转自:https://blog.csdn.net/weixin_47619284/article/details/125900605

目录
相关文章
swiper 去掉轮播图上的小点点 小圆圈(完美解决方案)
swiper 去掉轮播图上的小点点 小圆圈(完美解决方案)
392 0
|
前端开发 JavaScript
Tailwind CSS:基础使用/vue3+ts+Tailwind
Tailwind CSS:基础使用/vue3+ts+Tailwind
791 0
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
1973 2
|
JSON 前端开发 安全
前端开发中的跨域问题及解决方案
在前端开发中,跨域是一个常见但又令人头疼的问题。本文将深入探讨跨域产生的原因以及一些常见的解决方案,帮助开发者更好地理解和处理跨域情况。
|
存储 缓存 前端开发
Web应用中的存储方式有哪些?
本文首发于微信公众号“前端徐徐”,介绍了几种常见的前端数据存储技术:Cookie、Web Storage(包括 localStorage 和 sessionStorage)、IndexedDB、Cache Storage 和 Memory Storage。每种技术的特点和使用场景不同,适用于不同的开发需求。文章详细解释了它们的使用方法、特点和应用场景,并提供了代码示例。
1625 2
Web应用中的存储方式有哪些?
|
JSON 前端开发 JavaScript
InputStream,String,File相互转化
InputStream,String,File相互转化
187 3
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
JavaScript API
【vue3】写hook这几天,治好了我不会组件封装的弱点。
【vue3】写hook这几天,治好了我不会组件封装的弱点。
|
前端开发
后端一次返回大量数据,前端做分页处理
后端一次返回大量数据,前端做分页处理
410 0