返回顶部
首页 > 资讯 > 前端开发 > 其他 >object.assign()怎么用
  • 168
分享到

object.assign()怎么用

javascript 2023-05-14 21:05:37 168人浏览 独家记忆
摘要

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。Object.assign() 的用法该方法用于将所有可枚举属性的值从一个或多个源对象(sources)分配到目标对象(target),并返回目标对

object.assign()怎么用

教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

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'}

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

【推荐学习:javascript视频教程】

以上就是object.assign()怎么用的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: object.assign()怎么用

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

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

猜你喜欢
  • 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
  • object.assign()如何使用
    这篇“object.assign()如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“object.assign()如何...
    99+
    2023-07-04
  • JS中Object.assign方法的使用
    最在做项目过程中,大量的使用了Object.assign方法,发现这个还是挺好使用的,现在总结下Object.assign的基本使用。 一、基本语法 Object.assign(ta...
    99+
    2024-04-02
  • JavaScript如何使用Object.assign函数
    这篇文章主要介绍了JavaScript如何使用Object.assign函数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Object.assign:对象属性复制,浅拷贝Ob...
    99+
    2023-06-03
  • JS中Object.assign方法如何使用
    今天小编给大家分享一下JS中Object.assign方法如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、基本语法...
    99+
    2023-07-02
  • Vue中Object.assign清空数据报错怎么解决
    这篇文章主要介绍“Vue中Object.assign清空数据报错怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue中Object.assign清空数据报错怎么解决”文章能帮助大家解决问题。...
    99+
    2023-06-29
  • vue中对象的赋值Object.assign({}, row)方式是什么
    这篇文章主要介绍了vue中对象的赋值Object.assign({}, row)方式是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue中对象的赋值Object.assign({}, ...
    99+
    2023-06-29
  • 如何使用es6中的Object.assign()方法实现浅拷贝
    这篇文章主要为大家展示了“如何使用es6中的Object.assign()方法实现浅拷贝”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用es6中的Object.assign()方法实现浅拷...
    99+
    2023-06-17
  • 使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法
    目录Vue.$set()Vue.$set()源码Object.assign()首先建议先读读Vue官方文档深入响应式原理的介绍,对这一块你的理解会加深很多深入响应式原理 vue代码中...
    99+
    2022-12-09
    Vue.$set()响应式属性 Vue对象新增响应式属性
  • java怎么用
      本次来跟大家聊聊关于Java安装后如何使用的问题。我第一次接触Java时也是一头雾水,本以为安装了Java这款软件就能直接开始Java编程,其实不然,还要搭建小小的开发条件。推荐教程:Java入门视频教程1、首先安装jdk  这里先说明...
    99+
    2018-01-07
    java教程 java
  • 怎么用redis
    这篇文章运用简单易懂的例子给大家介绍怎么用redis,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。安装redis后,在命令行输入“redis-cli"回车输入”auth pa...
    99+
    2024-04-02
  • SqlClr怎么用?
    开启 clr 的 它不支持UI 这是 sql 语句,如下EXEC sp_configure "clr enabled" ,1goRECONFIGURE关闭就是 把值改为 0开始构建 cl...
    99+
    2024-04-02
  • redis怎么用
    这篇文章将为大家详细讲解有关redis怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。redis什么时候用● Redis使用最佳方式是全部数据in-memory。● ...
    99+
    2024-04-02
  • phpMyAdmin怎么用
    小编给大家分享一下phpMyAdmin怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!什么是phpMyAdmin ?phpM...
    99+
    2024-04-02
  • sqlldr怎么用
    小编给大家分享一下sqlldr怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!sqlldr userid=btup...
    99+
    2024-04-02
  • Hanlp怎么用
    这篇文章主要介绍了Hanlp怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Hanlp是由一系列模型与算法组成的工具包,目标是普及自然语...
    99+
    2024-04-02
  • oradebug怎么用
    小编给大家分享一下oradebug怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!oradebug是个sql*plus命令行...
    99+
    2024-04-02
  • Cassandra怎么用
    小编给大家分享一下Cassandra怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!    一...
    99+
    2024-04-02
  • mysql怎么用
    这篇文章将为大家详细讲解有关mysql怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。常用的命令:   1.登录  mysql &nbs...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作