返回顶部
首页 > 资讯 > 精选 >object.assign()如何使用
  • 506
分享到

object.assign()如何使用

2023-07-04 23:07:29 506人浏览 泡泡鱼
摘要

这篇“object.assign()如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“object.assign()如何

这篇“object.assign()如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“object.assign()如何使用”文章吧。

object.assign()方法用于将所有可枚举属性的值从一个或多个源对象(sources)分配到目标对象(target),并返回目标对象;语法“Object.assign(target, ...sources)”,参数“target”是指目标对象,即接收源对象属性的对象,也是修改后的返回值,参数“sources”是指源对象,包含将被合并的属性。

Object.assign() 的用法

该方法用于将所有可枚举属性的值从一个或多个源对象(sources)分配到目标对象(target),并返回目标对象。

Object.assign(target, ...sources)

target:目标对象,接收源对象属性的对象,也是修改后的返回值。

sources:源对象,包含将被合并的属性。

一、对象的拷贝

const target = { a: 1, b: 2 };const source1 = { b: 4, c: 5 };const source2 = { b: 6, c: 7 };const obj = Object.assign(target,source1,source2);console.log(obj); // (a: 1, b: 6, c: 7)

注意:
1、源对象属性与目标对象属性不同,则会被拷贝到目标对象中;
2、如果目标对象和源对象有相同的属性,目标对象的属性值会被源对象的属性值覆盖掉;
3、如果有多个源对象有相同的属性,那么目标对象的属性将会被最后一个源对象属性覆盖。

二、继承属性和不可枚举属性不能拷贝

const obj1 = Object.create({foo: 1}, { // foo 是个继承属性。    bar: {        value: 2  // bar 是个不可枚举属性。    },    baz: {        value: 3,        enumerable: true  // baz 是个自身可枚举属性。    }});const obj= Object.assign({}, obj1);console.log(obj); // { baz: 3 }//创建对象时,如果没有设置enumerable的值,默认为false(不可枚举属性),设置为true,则为可枚举属性

注意:Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象,继承的和不可枚举的属性不会拷贝。

三、对象的深拷贝

Object.assign()拷贝是浅拷贝,它拷贝的是属性值,假如源对象的属性值是一个对象 obj,那么拷贝的则是这个对象值的指针(也就是地址);这个时候修改obj 的值,则目标对象会受到影响。
想要避免这种影响我们需要对对象进行深拷贝:

let obj1 = { a: 1, b: {c: 2 }};let obj2 = { d: 2 };let obj = Object.assign(obj2,JSON.parse(jsON.stringify(obj1)));console.log(obj); // { d: 2, a:1, b:{ c:2 }}obj1.b.c = 4;console.log(obj); // { d: 2, a:1, b:{ c:2 }}// 对象obj1.b.c 值的变化则不会再影响到目标对象 obj 的值。

注意:深拷贝只能解决引用类型的值拷贝,对于继承和不可枚举属性依然不可以拷贝。

四、异常会终止拷贝

const target = Object.defineProperty({}, "foo", {    value: 1,    writable: false}); // target 的 foo 属性是个只读属性。Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});// TypeError: "foo" is read-only// 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。console.log(target.bar);  // 2,说明第一个源对象拷贝成功了。console.log(target.foo2); // 3,说明第二个源对象的第一个属性也拷贝成功了。console.log(target.foo);  // 1,只读属性不能被覆盖,所以第二个源对象的第二个属性拷贝失败了。console.log(target.foo3); // undefined,异常之后 assign 方法就退出了,第三个属性是不会被拷贝到的。console.log(target.baz);  // undefined,第三个源对象更是不会被拷贝到的。

五、原始类型将会被包装成对象

原始类型会被包装,null 和 undefined 会被忽略。

const obj1 = 'aaa';const obj2 = false;const obj3 = true;const obj4 = 10;const obj= Object.assign(obj1,obj2,obj3,obj4);console.log(obj); // { 0:'a', 1:'a', 2:'a'}

注意:只有字符串的包装对象才可能有自身可枚举属性。

以上就是关于“object.assign()如何使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网精选频道。

--结束END--

本文标题: object.assign()如何使用

本文链接: https://lsjlt.com/news/348086.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • object.assign()如何使用
    这篇“object.assign()如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“object.assign()如何...
    99+
    2023-07-04
  • JavaScript如何使用Object.assign函数
    这篇文章主要介绍了JavaScript如何使用Object.assign函数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Object.assign:对象属性复制,浅拷贝Ob...
    99+
    2023-06-03
  • JS中Object.assign方法如何使用
    今天小编给大家分享一下JS中Object.assign方法如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、基本语法...
    99+
    2023-07-02
  • JavaScript如何实现Object.assign
    这篇文章主要为大家展示了“JavaScript如何实现Object.assign”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何实现Object.assign”这篇文章吧。...
    99+
    2023-06-27
  • JS中Object.assign方法的使用
    最在做项目过程中,大量的使用了Object.assign方法,发现这个还是挺好使用的,现在总结下Object.assign的基本使用。 一、基本语法 Object.assign(ta...
    99+
    2024-04-02
  • 如何使用es6中的Object.assign()方法实现浅拷贝
    这篇文章主要为大家展示了“如何使用es6中的Object.assign()方法实现浅拷贝”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用es6中的Object.assign()方法实现浅拷...
    99+
    2023-06-17
  • object.assign()怎么用
    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。Object.assign() 的用法该方法用于将所有可枚举属性的值从一个或多个源对象(sources)分配到目标对象(target),并返回目标对...
    99+
    2023-05-14
    javascript
  • javascript的Object.assign()怎么用
    这篇“javascript的Object.assign()怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“javascr...
    99+
    2023-06-29
  • 使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法
    目录Vue.$set()Vue.$set()源码Object.assign()首先建议先读读Vue官方文档深入响应式原理的介绍,对这一块你的理解会加深很多深入响应式原理 vue代码中...
    99+
    2022-12-09
    Vue.$set()响应式属性 Vue对象新增响应式属性
  • 如何使用redis
    这期内容当中小编将会给大家带来有关如何使用redis ,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。安装redis后,在命令行输入“redis-cli"会车输入...
    99+
    2024-04-02
  • patchnavicat如何使用
    小编给大家分享一下patchnavicat如何使用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1、把patchNavicat....
    99+
    2024-04-02
  • phpmyadmin如何使用
    这篇文章给大家分享的是有关phpmyadmin如何使用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。创建数据库在 phpMyAdmin 的主界面中,可以看见有 “语言-langu...
    99+
    2024-04-02
  • 如何使用navicat
    小编给大家分享一下如何使用navicat,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!Navicat注册和激活的过程就是Navicat安装的过程,激活过程也比较简便,只要输入Navicat...
    99+
    2024-04-02
  • 如何使用ORM
    本篇内容介绍了“如何使用ORM”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!ObjectvieSQL简介O...
    99+
    2024-04-02
  • autotrace如何使用
    这篇文章给大家分享的是有关autotrace如何使用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。autotrace定义:autotrace是一个可以自动获取SQL执行计划和相关...
    99+
    2024-04-02
  • SqlLoader如何使用
    这篇文章将为大家详细讲解有关SqlLoader如何使用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。SQL*Loader(SQLLDR)是Oracle的高速批量数据加载工...
    99+
    2024-04-02
  • navicat如何使用
    这篇文章将为大家详细讲解有关navicat如何使用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Navicat可以支持连接多种数据库,使用上的功能也比较强大。如果使用了I...
    99+
    2024-04-02
  • 如何使用DataGrip
    小编给大家分享一下如何使用DataGrip,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!DataGrip是什么DataGrip是...
    99+
    2024-04-02
  • navicat12如何使用
    这篇文章主要介绍navicat12如何使用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Navicat 12 具备多项改进和新功能,能满足你对数据库开发的需求。过百种增强的功能和耳目...
    99+
    2024-04-02
  • 如何使用CassandraUnit
    这篇文章主要为大家展示了“如何使用CassandraUnit”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用CassandraUnit”这篇文章吧。  C...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作