Object.assign()

目录

1、Object.assign()是什么?

2、Object.assign()用法:

3、Object.assign()用法示例:

       3.1  目标对象和源对象无重名属性 : 直接合并

        3.2  目标对象和源对象有重名属性 : 后面的覆盖前面的

                3.3 有多个源对象: 源对象往target上合并,同时遇到属性相同,后者覆盖前者

        3.4  Object.assign() 只会拷贝对象自身并且可枚举的属性到目标对象上,继承属性和不可枚举属性是不能拷贝的:布尔值和数值属性都是不可枚举的

        3.5  碰到...拓展运算符

4、注意事项:


1、Object.assign()是什么?

        ES6文档:Object.assign() 用于将所有可枚举属性的值从一个或多个源对象(sources)分配到目标对象(target),并返回目标对象(target)。

       Object.assign()是对象的静态方法,主要用于对象合并。Object.assign()拷贝是浅拷贝,它拷贝的是属性值

2、Object.assign()用法:

Object.assign(target, ...sources)// 参数:target--->目标对象// source--->源对象// 返回值:target,目标对象

3、Object.assign()用法示例:

       3.1  目标对象和源对象无重名属性 : 直接合并
var target = {name:'xx', age:20}
var source = {class: '3班'}
var result = Object.assign(target,source)
console.log(result); // {name: 'xx', age: 20, class: '3班'}
console.log(target); // {name: 'xx', age: 20, class: '3班'}
console.log(source); // {name: 'xx', age: 20, class: '3班'}
console.log(target===result); // true// 如果只想把多个属性合并一起,不想改变原来对象属性,用一个空对象作为target对象
var target = {name:'xx', age:20}
var source = {class: '3班'}
var result = Object.assign({}, target,source)
console.log(result); // {name: 'xx', age: 20, class: '3班'}
console.log(target); // {name:'xx', age:20}
console.log(source); // {class: '3班'}
console.log(target===result); // false
        3.2  目标对象和源对象有重名属性 : 后面的覆盖前面的
var target = {name:'xx', age:20}
var source = {class: '3班', age:23}
var result = Object.assign(target,source)
console.log(result); // {name: 'xx', age: 23, class: '3班'}
console.log(target); // {name: 'xx', age: 23, class: '3班'}
console.log(source); // {name: 'xx', age: 23, class: '3班'}
console.log(target===result); // true// 如果只想把多个属性合并一起,不想改变原来对象属性,用一个空对象作为target对象
var target = {name:'xx', age:20}
var source = {class: '3班', age:23}
var result = Object.assign({}, target,source)
console.log(result); // {name: 'xx', age: 23, class: '3班'}
console.log(target); // {name:'xx', age:20}
console.log(source); // {class: '3班', age:23}
console.log(target===result); // false

        3.3 有多个源对象: 源对象往target上合并,同时遇到属性相同,后者覆盖前者

var target = {name:'xx', age:20}
var source = {class: '3班', age:23}
var sou = {friend: 'yy', sport: 'running'}
var result = Object.assign(target, source, sou)
console.log(result); // {name: 'xx', age: 23, class: '3班', friend: 'yy', sport: 'running'}
console.log(target); // {name: 'xx', age: 23, class: '3班', friend: 'yy', sport: 'running'}
console.log(source); // {name: 'xx', age: 23, class: '3班', friend: 'yy', sport: 'running'}
console.log(target===result); // truevar target = {name:'xx', age:20}
var source = {class: '3班', age:23}
var sou = {friend: 'yy', class: '4班'}
var result = Object.assign(target, source, sou)
console.log(result); // {name: 'xx', age: 23, class: '4班', friend: 'yy'}
console.log(target); // {name: 'xx', age: 23, class: '4班', friend: 'yy'}
console.log(source); // {name: 'xx', age: 23, class: '4班', friend: 'yy'}
console.log(target===result); // true
        3.4  Object.assign() 只会拷贝对象自身并且可枚举的属性到目标对象上,继承属性和不可枚举属性是不能拷贝的:布尔值和数值属性都是不可枚举的

var s = "abc";
var so = true;
var sou = 10;
var result = Object.assign({}, s, so, sou)
console.log(result); // {0: 'a', 1: 'b', 2: 'c'}
console.log(s); // 'abc'
console.log(so); // true
console.log(so); // 10var s = "abc";
var so = true;
var sou = 10;
var result = Object.assign(s, so, sou)
console.log(result); // {'abc'}
console.log(s); // 'abc'
console.log(so); // true
console.log(so); // 10
        3.5  碰到...拓展运算符
let obj ={a:1,b:2,
}
let obj2={c:3,a:4,b:5,
}
let obj3={...obj,  // 后面的合并前面的c:3,a:4,b:5
}
console.log(obj3);//{ a: 4, b: 5, c: 3 }let obj4={c:3,a:4,b:5,...obj // 后面的合并前面的
}
console.log(obj4);//{ c: 3, a: 1, b: 2 }
console.log(obj2 === obj)//false

4、注意事项:

        4.1  目前IE浏览器不兼容Object.assign()

        4.2  异常会终止拷贝

        4.3  Object.assign()拷贝是浅拷贝,它拷贝的是属性值,假如源对象的属性值是一个对象 obj,那么拷贝的则是这个对象值的指针(也就是地址);这个时候修改obj 的值,则目标对象会受到影响。

var tar = {a:1, b: {c:2}}
var sou = {d:3}
var result = Object.assign(sou, tar)
console.log(result); // {d:3,a:1, b: {c:2}}
tar.b.c = 4
console.log(result); // {d:3,a:1, b: {c:4}}var tar = {a:1, b: {c:2}}
var sou = {d:3}
var result = Object.assign(sou, JSON.parse(JSON.stringify(tar)))
console.log(result); // {d:3,a:1, b: {c:2}}
tar.b.c = 4
console.log(result); // {d:3,a:1, b: {c:2}}
// JSON.parse(JSON.stringify())深拷贝方法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/610498.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MyBatis:自定义 typeHandler 处理枚举类型

MyBatis 枚举类型typeHandler 枚举类型 枚举类型,在 Java 中属于基本数据类型,而不是构造数据类型,用于声明一组命名的常数。枚举可以根据 Integer 、Long 、Short 或 Byte 中的任意一种数据类型来创建一种新型变量。这种变量可以设置为已经…

npm安装vue,添加淘宝镜像

如果是第一次使用命令栏可能会遇到权限问题。 解决vscode无法运行npm和node.js命令的问题-CSDN博客 安装 在vscode上面的导航栏选择terminal打开新的命令栏 另外可能会遇到网络或者其他的问题,可以添加淘宝镜像 npm install -g cnpm --registryhttps://registry.…

Appium,多应用程序平台的 UI 自动化

Appium是一个开源的移动应用程序自动化测试工具,可以用于跨平台的UI自动化,包括iOS、Android、Web和Windows应用程序。它基于WebDriver协议,支持多种编程语言,如Java、Python、Ruby,Javascript、C#等。 Appium的设计理念是“一次…

Android studio GridView应用设计

一、xml布局文件设计: <GridViewandroid:id="@+id/gridView"android:layout_width="match_parent"android:layout_height="match_parent"tools:layout_editor_absoluteX="1dp"tools:layout_editor_absoluteY="1dp"andr…

websocket: 了解并利用nodejs实现webSocket前后端通信

目录 第一章 前言 1.1 起源 1.2 短轮询与长轮询 1.2.1 短轮询 1.2.2 长轮询 1.2.3 长连接&#xff08;SSE&#xff09; 1.2.4 websocket 第二章 利用Node以及ws创建webSocket服务器 2.1 创建ws服务器&#xff08;后端部分&#xff09; 2.1.1 了解一下 2.1.2 代创建W…

从研发转销售,90后联合创始人分享从 0 到 1 开拓市场的秘诀

小 T 导读&#xff1a;在去年涛思数据举办的 TDengine 开发者大会上&#xff0c;侯江燚以联合创始人的身份登台演讲&#xff0c;将自己对于开源商业化的独特观点娓娓道来&#xff0c;赢得阵阵掌声。今年是他加入涛思数据的第五年&#xff0c;从放弃读博选择成为一名研发&#x…

“To-Do Master“ GPTs:重塑任务管理的趣味与效率

有 GPTs 访问权限的可以点击链接进行体验&#xff1a;https://chat.openai.com/g/g-IhGsoyIkP-to-do-master 部署私人的 To-Do Master 教程&#xff1a;https://github.com/Reborn14/To-Do-Master/tree/main 引言 在忙碌的日常生活中&#xff0c;有效地管理日常任务对于提高生…

K2P路由器刷OpenWrt官方最新版本固件OpenWrt 23.05.2方法 其他型号的智能路由器OpenWrt固件刷入方法也基本上适用

最近路由器在开机时总出问题,于是就那他来开刀,直接刷一个OpenWrt官方最新版本的固件, 刷其他第三方的固件总是觉得不安全, 而且很多第三方固件都带了些小工具,始终会有安全隐患, 而且占用内存空间太多,本来这个东西就没有多少内存,于是就干脆刷一个官方的原始固件(才6.3M, 相…

HarmonyOS应用开发学习笔记 UI布局学习 相对布局 (RelativeContainer)

UI布局学习 之 相对布局 &#xff08;RelativeContainer&#xff09; 官方文档 一、关键字 RelativeContainer&#xff0c; alignRules&#xff08;适配规则&#xff09; Text(Text02).alignRules({left: { anchor: text01, align: HorizontalAlign.Start },top: { anchor: t…

[足式机器人]Part3 机构运动学与动力学分析与建模 Ch00-2(3) 质量刚体的在坐标系下运动

本文仅供学习使用&#xff0c;总结很多本现有讲述运动学或动力学书籍后的总结&#xff0c;从矢量的角度进行分析&#xff0c;方法比较传统&#xff0c;但更易理解&#xff0c;并且现有的看似抽象方法&#xff0c;两者本质上并无不同。 2024年底本人学位论文发表后方可摘抄 若有…

WAF(Web应用防火墙)全面解析

Web应用防火墙&#xff08;WAF&#xff09;是确保网络安全的重要工具&#xff0c;尤其在保护Web应用免受各种网络攻击方面发挥着至关重要的作用。以下是关于WAF的各方面详细介绍&#xff1a; 定义和目的 WAF是一种特殊类型的防火墙&#xff0c;专门设计用于监视、过滤和阻挡进…

增广路算法 DFS求解 最大网络流问题

最大网络流问题 最大网络流问题是这样的&#xff0c;有一个有向图&#xff0c;假定有一个源点&#xff0c;有一个汇点&#xff0c;源点有流量出来&#xff0c;汇点有流量进入&#xff0c;有向图上的边的权重为该条边可通过的最大流量(方向为边的方向)&#xff0c;问从源点到汇…

的修平台——院校智能报修的强大助手,轻松解决报修难题!

在当今信息化时代&#xff0c;智能化的后勤管理成为了提升院校服务水平的关键。其中&#xff0c;报修流程的智能化改革更是重中之重。面对传统报修方式存在的种种问题&#xff0c;如报修流程冗长、信息沟通不畅、进度难以跟踪等&#xff0c;的修平台应运而生&#xff0c;为院校…

自动化测试框架pytest系列之基础概念介绍(一)

如果你要打算学习自动化测试 &#xff0c;无论是web自动化、app自动化还是接口自动化 &#xff0c;在学习的道路上&#xff0c;你几乎会遇到pytest这个测试框架&#xff0c;因为自动化编写没有测试框架&#xff0c;根本玩不了 。 如果你已经是一位自动化测试人员 &#xff0c;…

HarmonyOS鸿蒙应用开发——原生与H5通信框架DSBrigde-HarmonyOS

文章目录 介绍安装使用原生JavaScript进度回调 参考 介绍 HarmonyOS版的DSBridge&#xff0c;通过本库可以在鸿蒙原生与JavaScript完成交互&#xff0c;相互调用彼此的功能。 目前兼容Android、iOS第三方DSBridge库的核心功能&#xff0c;基本保持原来的使用方式&#xff0c;…

c++|关键字extern

一个C语言项目往往由多个文件组合而成。而对于多个文件来说&#xff0c;它们可能会共用到一些相同的变量。而有些情况下&#xff0c;这些相同的变量并没有出现在本文件内&#xff0c;有可能在其他文件内。而一个文件可能只会搜寻该文件内部是否有该变量。 所以&#xff0c;需要…

c++的构造函数

目录 构造函数 1.构造函数&#xff1a; 2.构造函数的特点&#xff1a; 默认构造函数 -- 没有参数的构造函数 1. 合成(自动)的默认构造函数(一般不常用) 1&#xff09; 介绍&#xff0c;以及为什么不使用 2&#xff09;可以使用合成默认构造函数的情况 2. 自定义的默认…

xss-labs(6-9)

level6:欢迎来到level6 老规矩还是先看看输入框的闭合情况 尝试事件函数绕过 test" onclick="alert(欢迎来钓鱼) 既然事件函数被转义了,那就使用我们第二关用过的绕过方法插入标签看看 test"><script>alert(欢迎来钓鱼)</script>// <

新书速览|循序渐进Vue.js 3.x前端开发实战

Vue.js初学者和前端开发人员使用&#xff0c;网课、培训机构与大中专院校的教学用书 作者简介 张益珲 美国亚利桑那州立大学计算机工程技术硕士&#xff0c;架构师&#xff0c;从业近10年&#xff0c;多年大前端开发经验&#xff0c;曾就职于知名上市公司&#xff0c;主导开发…

go 语言常见问题(2)

11. recover的执行时机 无&#xff0c;recover 必须在 defer 函数中运行。recover 捕获的是祖父级调用时的异常&#xff0c;直接调用时无效。 func main() {recover()panic(1) }直接 defer 调用也是无效。 func main() {defer recover()panic(1) }defer 调用时多层嵌套依然无…