前端踩坑记录：javaScript复制对象和数组，不能简单地使用赋值运算

已于 2024-10-30 10:42:54 修改
阅读量814 收藏 6
点赞数 9
分类专栏： Vue 文章标签： javascript
于 2024-09-01 08:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l_q_l/article/details/141643078
版权

问题

如图，编辑table中某行的信息，发现在编辑框中修改名称的时候，表格中的信息同步更新。。。

检查原因

编辑页面打开时，需要读取选中行的信息，并在页面中回显。代码中直接将当前行的数据对象赋值给编辑框中的表单对象了，这只是简单的让form指向了row的地址，并没有逐个的赋值其中的字段。

this.form = row;

 这样，当我在表单中更新某个字段的值的时候，我期望更新的是form中的数据，然而，因为form和row实际指向的是同一块数据空间，所以，row中的数据，也同步更新，就出现了我最开始的问题。

解决方案

那么，在获取选中行信息时，不能简单的进行赋值，而需要进行拷贝。可以使用Object.assign函数，将row中的数据拷贝到this.form中：

Object.assign(this.form,row)
了解本专栏 订阅专栏 解锁全文 超级会员免费看
JavaScript——数组入门
qq_46905110的博客
05-07 987
JavaScript——数组初识数组创建数组使用Array对象创建数组直接使用“[]”创建数组数组的基本操作获取数组长度数组的访问与遍历元素的添加与修改元素的删除   数组是JavaScript中最常见的数据类型之一，它属于对象类型中的内置对象。一个数组类型变量可以保存一批数据，并且数据可以是任意类型。 初识数组 1.数组的定义：数组是储存一系列值的变量集合，它由一个或多个数组元素组成，各元素之间使用英文逗号分隔，每个数组元素由“下标（索引）”和“值”构成； 2.“下标（索引）”和“值”： ·值”为元素的内
JS——直接赋值和引用赋值、数组对象的使用方法及注意事项
weixin_43980047的博客
09-24 3963
一、直接赋值和引用赋值 1.直接赋值： let str = "aaa"; let str2 = str;//这里是直接赋值 str2 = "aaa222"; console.log(str);//输出aaa console.log(str2);//输出aaa222 2.引用赋值： 引用赋值主要是数组跟对象的变量之间的赋值。 let arr=['1','2','3'];//数组 let arr2 = arr;//这里是引用赋值 arr2[0] = '2'; console.log(arr);//输出2,2,
js里数组名的直接赋值
aliangpiao9235的博客
07-31 568
const numbers = [...this.state.numbers]; numbers.push(numbers[numbers.length-1] + 1); console.log(numbers === this.state.numbers); 这样子输出的是false const numbers = this.state.nu...
js实现表格每行数据复制
weixin_41424721的博客
07-20 830
参考文章：https://www.cnblogs.com/zhenguo-chen/p/10454521.html copeRow(row) { const txt = Object.values(row).join() console.log(txt) const input = document.createElement("input"); // 创建一个新input标签 input.setAttribute("readonly", "readonly
vue + elementUI form表单JS赋值无法输入的问题
u010376229的博客
10-12 1150
当用JS给表单数据直接赋值后，表单无法输入的问题 层次深了之后会检测不到变化 解决方法： 1、可以初始化一份表单的各个字段 2、动态添加字段 如 this.$set(this.formData, key, value)
数组之间不能直接赋值，为什么？赋值有四种方法
Hello，小高同学
03-14 3万+
数组和数组之间能直接赋值吗？——不能 你难道是想 a=b?? 首先你要明白: 数组名a,b代表指针常量,所以说赋值号左边必须是一个变量 a=b; 根本就是错误的 注意：数组名是常量，指针一般都是变量，当然也可以是常量。查看：https://blog.csdn.net/cyj2014go/article/details/78203404 法一： 当然你的想法也有可取之处，取地址运算，把数...
JS数组与对象赋值问题
叶落无痕的博客
09-16 6337
在W3C的在线编程中经过测试发现以下问题： 当一个数组内部元素为对象时，给数组赋值应该先给对象赋值，然后把该对象push到数组中。 如下所示： 在控制台打印之后的数据格式为下图所示： 如果在给数组赋值的时候直接给对象赋值则会报错，如下所示： 以上是在W3C的测试结果。下面是本人在开发过程中因为同样的原因导致的CSS样式不应用的错误。 当通过循环直接向每个数组元素的对象赋值的时候，在控制台打印出的数据格式如下： 而当通过先给对象赋值，然后把对象 push 进数...
fundamentos_js：JavaScript和git flow的使用
02-22
ES6引入了字面量语法和解构赋值，使得对象和数组的创建和操作更为便捷。 6. **数组**：数组是有序的元素集合，可以包含不同类型的值。数组方法如push、pop、shift、unshift、slice、splice等提供了丰富的操作功能。...
【前端性能提升秘诀】：深入分析JavaScript对象复制的性能影响
# 1. JavaScript对象复制基础 ...- 字面量复制：简单的属性复制，适用于对象结构简单且不需要深拷贝的场景。 - `Object.assign()`：将所有可枚举属性的值从一个或多个源对象复制到目标对象，返回目标对象。 - 扩展运算
Javascript如何判断数据类型和数组类型
10-22
总而言之，在JavaScript中，判断数据类型和数组类型需要我们灵活运用typeof、instanceof、constructor以及Array.isArray()等方法，不同场景下根据需求选择合适的方法进行判断。正确识别数据类型对于开发健壮的...
JavaScript中的全局对象介绍
10-24
这些构造器允许创建不同类型的对象，如Date()用于处理日期和时间，RegExp()用于处理正则表达式，String()、Object()和Array()用于分别创建字符串、对象和数组类型的实例。这些构造器是JavaScript面向对象编程的基础...
vue给对象赋值无效
qq_27175079的博客
08-31 2787
今天刚上班遇到同事反馈，他的电脑上显示有问题，我自己看了一下自己的没有问题，看别人的也没有问题，就单单一台电脑有问题，使用的是chrome浏览器。 然后我打开代码查看，只有一句话 this.totalInfo = res;//res是后台返回的数据对象 这是一个普通的赋值语句，怎么都显示不出数据，实在不行我就用了$set也是不行，最后没有办法将对象拆分成独立的string，还是不行（有点忘了）。突然发现自己不会写代码了，到底是啥情况。最后我看了下那个同事的浏览器版本，是最新的浏览器版本。 这个问题可能是
Vue form表单input框 手动赋值未生效
sunshineTing2的博客
02-28 4589
前言 在VUE项目开发过程中，遇到一个很奇怪的表单赋值问题，赋值为生效，而当遇到下拉框切换时，上一个值显示出来了。 定位问题 1、在data中只定一个formData对象，其中有20多个表单项未定义 2、当后端数据返回时，前端直接赋值，未生效，采用$forceupdate()解决了问题 3、但是又偶然遇到另一个问题，就是必须下拉框变化时才更新数据。 原因 原因：如果在实例创建之后添加新的属性到实例上（赋值），它不会触发视图更新。 由此Vue实例创建时，表单属性名并未声明，因此Vue就无法对属性执行 gett
js 空数组直接赋值与push
热门推荐
asyoulike1994的博客
08-07 3万+
在用vue进行模型渲染数据的时候，最开始给数组赋值，代码如下 var arr = []; var date = new Date(1502121600000); arr[0] = date; arr[1] = date; 但是页面上的日历一直出不来初始化的数据，然后改成push方法， var arr = []; var date = new Date(1502121600000); arr.
JS 变量 调用函数赋值不成功
小叶lr的博客
05-14 1756
var sTime = [1,5,6,8]; var Orders = [2,4,5,6]; function exData(data) { sTime = []; //先清空 Orders = []; ------ sTime = [1,9,8,4]; Orders = [5,1,7,2]; 调用exData 函数结...
JS数组是不能直接比较的！！
法克瓜的博客
09-17 1209
写leetcode的时候发现数组是不能直接被==和===直接比较的。 因为JavaScript里面Array是对象，==或===操作符只能比较两个对象是否是同一个实例，也就是是否是同一个对象引用。目前JavaScript没有内置的操作符判断对象的内容是否相同。 但是惯性思维让人以为数组也是值，是可以比较的。 如果要比较数组是否相等，就只能遍历数组元素比较。 查了网上的资料，发现可以用String(...
前端React预备知识：JavaScript核心概念解析
5. 点差算子（.）对于对象和数组：这个表述可能是对点（.）和方括号（[]）操作符的描述。点操作符用于访问对象的属性，而方括号操作符可以用来访问对象的属性，也可以用来访问数组的元素。 6. 解构语法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值