Object.assign()和展开运算符...的区别

最新推荐文章于 2023-12-28 14:46:43 发布
最新推荐文章于 2023-12-28 14:46:43 发布
阅读量1.4k 收藏 6
点赞数 3
分类专栏： ES6 js 文章标签： 前端 javascript
原文链接：https://juejin.cn/post/6971998812889940005
版权
js 同时被 2 个专栏收录
20 篇文章 1 订阅
订阅专栏
ES6
5 篇文章 0 订阅
订阅专栏

数组

使用object.assign

  1. Object.assign([], a, b)
let a = [1,2]
let b = [3,4]
let c = Object.assign([], a, b)
复制代码
值console.log()a[1] = 6b[1] = 6c[1] = 5
a[1, 2][1, 6][1, 2][1, 2]
b[3, 4][3, 4][3, 6][3, 4]
c[3, 4][3, 4][3, 4][3, 5]

a的值被覆盖，分别改变a, b, c的值不会对其他值产生影响

2.Object.assign(a, b)

let a = [1,2]
let b = [3,4]
let c = Object.assign(a, b)
复制代码
值console.log()a[1] = 6b[1] = 6c[1] = 5
a[3, 4][3, 6][3, 4][3, 5]
b[3, 4][3, 4][3, 6][3, 4]
c[3, 4][3, 6][3, 4][3, 5]

a的值被覆盖，改变a的值会同步影响c的值，改变b的值对a和c无影响，改变c的值会同步影响a的值

使用展开运算符...

  1. [...a, ...b]
let a = [1,2]
let b = [3,4]
let c = [...a, ...b]
复制代码
值console.log()a[1] = 6b[1] = 6c[1] = 5
a[1, 2][1, 6][1, 2][1, 2]
b[3, 4][3, 4][3, 6][3, 4]
c[1, 2, 3, 4][1, 2, 3, 4][1, 2, 3, 4][1, 5, 3, 4]

a的值不会被覆盖，分别改变a, b, c的值不会对其他值产生影响

  1. [...[],...a, ...b]
let a = [1,2]
let b = [3,4]
let c = [...[],...a, ...b]
复制代码
值console.log()a[1] = 6b[1] = 6c[1] = 5
a[1, 2][1, 6][1, 2][1, 2]
b[3, 4][3, 4][3, 6][3, 4]
c[1, 2, 3, 4][1, 2, 3, 4][1, 2, 3, 4][1, 5, 3, 4]

a的值不会被覆盖，分别改变a, b, c的值不会对其他值产生影响

对象

使用Object.assign

  1. Object.assign({}, a, b)
let a = { 1: 'aa', 2: 'bb' }
let b = { 1: 'cc', 4: 'dd' }
let c = Object.assign({}, a, b)
复制代码
值console.log()a[1] = 'aaa'b[1] = 'ccc'c[1] = 'ccc'
a{1: "aa", 2: "bb"}{1: "aaa", 2: "bb"}{1: "aa", 2: "bb"}{1: "aa", 2: "bb"}
b{1: "cc", 4: "dd"}{1: "cc", 4: "dd"}{1: "ccc", 4: "dd"}{1: "cc", 4: "dd"}
c{1: "cc", 2: "bb", 4: "dd"}{1: "cc", 2: "bb", 4: "dd"}{1: "cc", 2: "bb", 4: "dd"}{1: "ccc", 2: "bb", 4: "dd"}

1.合并a,b到c时，key相同的属性会合并，且后面元素覆盖前面元素
2.分别改变a,b,c的值不会影响其他元素的值

  1. Object.assign(a, b)
let a = { 1: 'aa', 2: 'bb' }
let b = { 1: 'cc', 4: 'dd' }
let c = Object.assign(a, b)
复制代码
值console.log()a[1] = 'aaa'b[1] = 'ccc'c[1] = 'ccc'
a{1: "cc", 2: "bb", 4: "dd"}{1: "aaa", 2: "bb", 4: "dd"}{1: "cc", 2: "bb", 4: "dd"}{1: "ccc", 2: "bb", 4: "dd"}
b{1: "cc", 4: "dd"}{1: "cc", 4: "dd"}{1: "ccc", 4: "dd"}{1: "cc", 4: "dd"}
c{1: "cc", 2: "bb", 4: "dd"}{1: "aaa", 2: "bb", 4: "dd"}{1: "cc", 2: "bb", 4: "dd"}{1: "ccc", 2: "bb", 4: "dd"}

1.合并a,b到c时，a的值同步变成c的值
2.改变a的值会同步影响c的值，改变c的值也会同步影响a的值，改变b的值对a,c的值无影响

使用展开运算符...

1.{...a, ...b}

let a = { 1: 'aa', 2: 'bb' }
let b = { 1: 'cc', 4: 'dd' }
let c = {...a, ...b}
复制代码
值console.log()a[1] = 'aaa'b[1] = 'ccc'c[1] = 'ccc'
a{1: "aa", 2: "bb"}{1: "aaa", 2: "bb"}{1: "aa", 2: "bb"}{1: "aa", 2: "bb"}
b{1: "cc", 4: "dd"}{1: "cc", 4: "dd"}{1: "ccc", 4: "dd"}{1: "cc", 4: "dd"}
c{1: "cc", 2: "bb", 4: "dd"}1: "cc", 2: "bb", 4: "dd"}{1: "cc", 2: "bb", 4: "dd"}{1: "ccc", 2: "bb", 4: "dd"}

1.合并a,b到c时，key相同的属性会合并，且后面元素覆盖前面元素
2.分别改变a,b,c的值不会影响其他元素的值

  1. {...{}, ...a, ...b}
let a = { 1: 'aa', 2: 'bb' }
let b = { 1: 'cc', 4: 'dd' }
let c = {...{}, ...a, ...b}
复制代码
值console.log()a[1] = 'aaa'b[1] = 'ccc'c[1] = 'ccc'
a{1: "aa", 2: "bb"}{1: "aaa", 2: "bb"}{1: "aa", 2: "bb"}{1: "aa", 2: "bb"}
b{1: "cc", 4: "dd"}{1: "cc", 4: "dd"}{1: "ccc", 4: "dd"}{1: "cc", 4: "dd"}
c{1: "cc", 2: "bb", 4: "dd"}{1: "cc", 2: "bb", 4: "dd"}{1: "cc", 2: "bb", 4: "dd"}{1: "ccc", 2: "bb", 4: "dd"}

1.合并a,b到c时，key相同的属性会合并，且后面元素覆盖前面元素
2.分别改变a,b,c的值不会影响其他元素的值


作者：原始l
链接：https://juejin.cn/post/6971998812889940005
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

MR·Feng
关注
专栏目录
Object.assign() 函数与...state函数
CSYfairy的博客
07-14 476
1、Object.assign()函数 Object.assign(target, source) target为目标对象 source为源对象 该函数的作用是以目标对象为基础，将源对象中的内容更新到目标对象中，有则替换，无则新增 var result01 = {type: '01', name: 'ming', age: 23}; let result02 = {type: '02', marry: false}; let result03 = {type: '03', age: 55}
对象合并的方法【三点运算符、Object.assign()】
L_jin_c的博客
08-31 961
一、使用三点运算符… 特点：如果对象有相同的属性，后面的覆盖前面的 let obj1 = { name: "nodejs", age: 111, email: "123@qq.com" } let obj2 = { name: "js", age: 222, email: "node@qq.com" } let new_obj = { ...obj1, ...obj2 }; console.log(new_obj); //{
...和Object.assign的区别
最新发布
weixin_43502666的博客
12-28 728
在这里插入图片描述。
object.assign（）以及...的区分
Webgiser_yy的博客
10-18 306
如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。
ES6 的Object.assign(target, source_1, ···)方法与对象的扩展运算符
dengling4813的博客
03-25 335
一、基本概念 Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。 Object.assign(target, source_1, ..., source_n) 二、基本用法 let target = {a: 1}; let obje...
Object.assign和扩展运算符的区别
07-22
`Object.assign()`方法和扩展运算符都用于合并对象或复制对象的属性，但它们有一些区别。 1. 语法：`Object.assign()`是一个函数调用，使用对象作为第一个参数，后面跟上要合并的对象。扩展运算符使用三个点（...）...
Object.assign和扩展运算符
07-27
Object.assign和扩展运算符都是用于对象的合并操作。\[1\]扩展运算符能够将一个对象的属性和方法展开到另一个对象中，实现对象的浅拷贝。例如，使用扩展运算符可以将一个对象的属性和方法复制到另一个对象中，形成一...
clean-set:对象扩展运算符和Object.assign的替代方案
05-02
包括针对commonjs，umd和esm的构建，并且少于200b 182b gzip（感谢 ） 用法 let current = { a : { b : [ ] , c : true } , d : [ ] , e : { f : { g : 'hello' } , h : { i : 0 } , } , } ; let next = clean...
ES6语法：对象的新增方法——Object（Object.is() Object.assign()）
XSL_HR的博客
09-28 1874
本文是一篇关于ES6中对象的新增方法——Object的知识文章。在文章中会从理论和实践两个角度入手，代码片段可能比较多，需要耐心阅读。本文紧接ES6专栏ECMAScript(ES6)第三幕之解构赋值篇【字符串&数值布尔值&函数参数的解构赋值&圆括号问题】内容，进一步学习对象的新增方法。创作不易！多多关照！！
对展开运算符和object.assign()的理解
weixin_43990297的博客
07-09 1725
Object.assign Object.assign是用来合并对象是浅拷贝，实现原理主要是将所有可枚举属性的值从一个或多个源对象复制到目标对象，同时返回目标对象。主要是用使用 for…in 循环遍历出所有可枚举的自有属性。并复制给新的目标对象（使用 hasOwnProperty 获取自有属性，即非原型链上的属性） 扩展运算符 扩展运算符可以用来合并数组，拆分字符串，合并对象（浅拷贝）等作用，扩展运算符在调用时，它会调用该数据结构的 Interator接口，也就是遍历器，然后将该数据转为用逗号分隔的参
展开运算符和object.assign()的区别
weixin_39647035的博客
11-25 5285
Object Spread 和 Object.assign 在功能上很相似。你应该使用哪一个？ 事实证明，答案比你想象的要微妙许多。 Object Spread 概论 object Spread 运算符的基本思想是使用现有对象自身属性来创建普通对象。所以{…obj}创建一个和obj具有相同属性的对象。对于一个普通的旧对象，你实际上在创建一个obj的副本。 const obj = { foo: '...
Object.assign与展开运算符
weixin_45585996的博客
08-13 397
const target = { a: 1, b: 2 } const source = { b: 4, c: 5 } console.log(...target, ...source) console.log(Object.assign(target, source))
Obejct.assign的使用以及和rest扩展运算符的区别
junjiahuang的博客
10-11 408
Object.assign() copy第一层，引用对象copy地址 浅克隆（不克隆原型链 function clone(origin) { return Object.assign({}, origin); } 保持原型链 function clone(origin) { let originProto = Object.getPrototypeOf(origin); return Object.assign(Object.create(originProto), orig
Object.assign 与... 对象展开语法 区别
etemal_bright的博客
08-03 2425
项目中 使用Object.assign 导致页面报错 ...mapMutations('heavy', ['setAddServiceFeeInfo']), preFeeParamsChange = Object.assig(AddServiceFeeInfo.preFeeParams,preFeeParamsChange） 原因： Object.assign 会触发的setter方法 这使得mutation的值发生改变 对象展开语法 不会触发setter ...mapMutations('heavy
扩展运算符... object.assign()
weixin_42213796的博客
11-04 1919
目前根据理解划分为：对象扩展与数组扩展 1.对象扩展：对象中的扩展运算符(...)用于取出源对象中的所有可遍历属性，拷贝到目标对象之中 此种使用方法，与object.assign()相似。Object.assign也是ES6新添加的接口，主要的用途是用来合并多个JavaScript的对象 番外：对比扩展运算符在对象中的使用，与object.assign() 相同点：1.均可以对对象的合并 2.将源对象的所有可枚举属性，复制到目标对象 3...
object.assign和扩展运算符创建对象是深拷贝还是浅拷贝，二者有什么区别
weixin_40305713的博客
03-04 1297
扩展运算符： let outobj = { inobj:{a: 1, b: 2} } let newobj = {...outobj} newobj.inobj.a = 2 consolo.log(outobj.inobj) // {a: 2,b: 2} object.assign() let oldobj = { inobj: {a: 1, b: 2} } let newobj = Object.assign({},old
8种ES6中扩展运算符（三点运算符）的用法及与Object.assign()性能对比
沈行的博客
08-17 1307
引自：https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/118447064 扩展操作符…是ES6中引入的，将可迭代对象展开到其单独的元素中，所谓的可迭代对象就是任何能用for of循环进行遍历的对象，例如：数组、字符串、Map、Set、DOM节点等。 1、拷贝数组对象 使用扩展符拷贝数组是ES6中常用的操作： const years = [2018, 2019, 2020, 2021];const copyYears = [...
Object.assign 与 展开运算符的区别
liao15079497375的博客
04-19 941
看上图，只有一层的情况下，object.assign()是浅拷贝、展开运算符是深拷贝。多层情况下，两中没有区别，都是浅拷贝。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值