js object.assign浅拷贝对象

原创 已于 2022-08-05 10:27:57 修改 · 置顶 · 3.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js对象赋值 #Object.assign #js Object

于 2019-06-10 16:45:39 首次发布
探讨了在JavaScript中使用普通赋值与Object.assign方法的区别，指出其仅实现浅拷贝，对于多层级对象如数组和对象内部的属性无法完全复制。推荐使用JSON.parse(JSON.stringify(obj))进行深拷贝，确保数据独立。

在这里插入图片描述

普通 “=” 赋值， 发现a的name也变了

在这里插入图片描述

通过Object.assign方法，a和b的name互不影响

在这里插入图片描述

再试试对象里放数组，发现a的arr又变了，assign都不管用了

在这里插入图片描述

对象内为数组或对象时，要单独赋值

在这里插入图片描述

总结：object.assign只能浅拷贝对象，如果是多层级对象json等，建议使用JSON.parse(JSON.stringify(obj))深拷贝

JS `Object.assign()`：对象浅拷贝与合并
weixin_41455464的博客
07-21 1015
这个递归拷贝的函数，可以处理函数，但是仍然不能处理循环引用的情况，为了处理循环引用，需要使用WeakMap来记录已经拷贝过的对象。如果源对象和目标对象有同名属性，那么源对象的属性值会覆盖目标对象的属性值。后面的源对象的属性会覆盖前面源对象的同名属性。递归遍历对象的每一个属性，如果属性值是对象或数组，那么递归调用拷贝函数。它只会复制源对象的第一层属性，如果属性值是对象或者数组，那么复制的仍然是引用。赋值的时候，赋的不是对象本身，而是指向这个对象在内存里的地址的“指针”。是浅拷贝，但它仍然非常有用。
javascript之Object.assign实现浅拷贝的原理以及实现
saucxs
04-19 1529
一、前言 之前在前面一篇学习了赋值，浅拷贝和深拷贝。介绍了这三者的相关知识和区别。 传送门：https://www.mwcxs.top/page/592.html 本文会介绍浅拷贝Object.assign()的实现原理，然后咱们试着实现一个浅拷贝。 二、浅拷贝Object.assign() 什么是浅拷贝？浅拷贝就是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。 浅拷...
Object.assign() 对象赋值
qq_35840912的博客
12-06 576
vue对象赋值操作,只取目标对象与源对象中相同元素的值.
Object.assign()函数使用，用于多个对象的合并并重新赋值
m0_64207574的博客
02-21 460
Object.assign()函数使用，用于多个对象的合并并重新赋值
js解构赋值
最新发布
2501_91105254的博客
07-19 380
a.‘=’左侧的{}用于批量生成变量，右侧对象的属性值将被赋值给左侧的变量。2.对象解构：将对象属性和方法快速批量赋值给一系列变量的简洁语法。d.对象找不到与变量名一致的属性时，变量值为undefined。1.数组解构：将数组的单元值快速批量赋值给一系列变量的语法。基本语法：左侧[ ]装变量,将右侧的数据赋值给左侧变量。a.变量多单元值少时：多的变量为undefined。b.对象属性的值将被赋值给与属性名相同的变量。c.防止数组单元值没传给变量：设置默认值。e.对象解构的变量名可以重新改名。
js里面object对象
j2ee_zhongqi的专栏
03-07 219
[b]对象的存取方式有2种如下[/b] meberA.name ; meberA.age 或者 meberA["name"]; meberA.["age"] 当存在此属性时将修改属性的值，当不存在时候自动创建一个新的属性，并且赋值 由于整个js都是由对象构成的，所以说可以用以下函数查看某个对象所有的属性 function showAllProper(objname,strobjn...
js对象赋值
onepiece1991的博客
04-13 2722
/变量先置空 let objClone = null , hashKey = hashMap . get(obj);//正则表达式的情况 if(obj instanceof Date) return new Date(obj);//日期对象的情况 if(hashKey) return hashKey;//判断是否需要继续进行递归 if(typeof obj == "object" && obj!
JS中对象赋值
weixin_46125684的博客
02-15 1631
const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget); // expected output: Object { a: 1, b: .
JavaScript对象拷贝与Object.assign用法实例分析
10-18
在探讨JavaScript对象拷贝及Object.assign用法的过程中，我们将了解到深拷贝与浅拷贝的概念及其在JavaScript中的实际应用。同时，通过实例分析，我们会深入理解Object.assign的功能与使用技巧。 首先，了解深拷贝与...
前端JavaScript篇之object.assign和扩展运算法是深拷贝还是浅拷贝，两者区别、如何判断一个对象是空对象
星辰迷上大海的博客
01-30 2122
浅拷贝是指创建一个新的对象或数组，新对象的属性值或新数组的元素值是对原始对象或数组中的值的引用。这意味着如果原始对象或数组的属性值或元素值是对象或数组，那么新对象或数组中的这些值仍然会指向相同的内存地址。
js代码-Object.assign() 提取并集，组装成一个对象，字段冲突则用后面参数的
07-14
值得注意的是，`Object.assign()` 进行的是浅拷贝，这意味着如果源对象的属性是另一个对象的引用，而不是基本类型，那么目标对象将拥有源对象的引用，而不是复制一个新的对象。这可能导致意外的结果： ```...
js中给object对象赋值
怡暘
11-26 2628
let imageGSDMarks = {} // 对象 let datas = ['1', '2', '3', '4', '5', '6'] // 数组 datas.foreach((item) => { imageGSDMarks[item] = '' // 循环遍历将数组datas的数据，以对象的方式添加的对象中。 })
jAavascript基础积累
警警的博客
04-08 829
深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是在编程中常用的概念，它们指的是复制对象或数组时的不同方式。
JS Object赋值注意点
JeffanChen的博客
08-26 1414
记录一下用变量赋值 var a='age'; var obj1={a:23}; console.log(obj1); //{a:23} a不会主动变为age × var obj2={[a]:23}; console.log(obj2); //{age:23} √
js的对象赋值问题：值传递还是引用传递？
houzhyan-博客
10-03 2638
ECMAScript中有5种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object，Object本质上是由一组无序的名值对组成的。ECMScript不支持任何创建自定义类型的机制，而所有值最终都将是上诉6中数据类型之一。乍一看，好像只有6种数据类型不足以表示所有数据；但是，由于ECMScript数据类型具有...
js for循环给object数组赋值
weixin_34257076的博客
12-22 8173
var style = { fontsize: 12, left: 0 }; var style_array = new Array(); function ss(){ for (var i = 0; i < 12; i++) { style={};//重点 style.fontsize = parseInt((M...
浅谈JavaScript中的对象赋值
先知三日
06-04 895
3. Object.assign() 方法（浅拷贝）：this.info = Object.assign({}, this.deviceInfo)，使用 Object.assign() 方法将一个或多个源对象的属性复制到目标对象，也是实现浅拷贝的一种方式。2. 对象扩展（浅拷贝）：this.info = {...this.deviceInfo}，使用对象扩展语法创建一个新对象，包含原对象的所有属性和值，但是它们引用不同的对象。这些是常见的对象赋值方式，每种方式都有不同的特点和适用场景。
javascript Object对象深层嵌套自动赋值
weixin_40037026的博客
08-07 1602
js中 给一个多层嵌套的object对象赋值需要十分小心, 一不小心就很容易出现undefined错误, 因为给一个object里深层对象赋值时, 需要确保整个object链路能够到达, 否则就会报undefined错误, 例如以下代码: let a = {} a.b.c.d = {} // 会报错 因为链路无法到达d 常见的解决方法有 逐层判断赋值 let a = {} if (!Object.prototype.hasOwnProperty.call(a, 'b')) { a.b = {}
对象赋值和数组赋值
呼叫6945的博客
08-24 603
如果索引超出当前数组的范围，JavaScript 会自动将数组扩展到那个索引，并填充未赋值的元素为。还有很多其他方法,这就实例方法,这就不一一赘述了请参考文档。方法可以用来填充数组中的所有元素或某一部分元素。根据某种条件或计算给数组元素赋新值，可以使用。
Object.assign浅拷贝
12-06
需要注意的是，Object.assign()方法只会复制源对象的可枚举属性，而且只会进行浅拷贝。这意味着如果源对象的属性值是一个对象，那么目标对象中的该属性值将与源对象中的该属性值指向同一个对象。如果源对象的属性值...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值