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

问题

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

检查原因

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

this.form = row;

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

解决方案

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

Object.assign(this.form,row)

数组

同理,数组存在同样的问题

 某select的Option需要在一个已有数组的基础上进行删减,但是原数组不能变。

最初使用的是newArr = arr的方式,在对newArr进行了一些列的操作后,发现arr的值成员也被修改了。

改为newArr = arr.slice() 正常。

另,如果想要实现两个数组的拼接,可用arr1 = arr1.concat(arr2)的方法

参考:JavaScript Array slice() 方法

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

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

相关文章

Qt QtConCurrent 使用示例

简介 QtConcurrent 是 Qt 框架中的一个模块,它提供了一种高级别的 API 来编写多线程程序,而无需直接使用线程、互斥锁或信号量等低级同步原语。QtConcurrent 允许你以声明性的方式启动任务,这些任务将在单独的线程中异步执行,同时…

[从0开始AIGC][LLM]:LLM中Encoder-Only or Decoder-Only?为什么主流LLM是Decoder-Only?

LLM中Encoder-Only or Decoder-Only & 为什么主流LLM是Decoder-Only? 文章目录 LLM中Encoder-Only or Decoder-Only & 为什么主流LLM是Decoder-Only?1. 什么是Encoder-only、Decoder-Only2. 为什么当前主流的LLM都是Decoder-only的架构低秩问题 …

mac电脑登录循环重启问题

问题是:mac电脑在输入密码后,黑屏重启,如此循环。 1、进入安全模式:先关机,按shift一直不松手 ,再按开机键一下,进入启动状态,到进入到安全模式。 2、输入用户密码,成功…

浅谈C# 虚函数和重写

一、基本介绍 虚函数(Virtual Function)和重写(Override)是面向对象编程中多态性的重要概念。它们允许子类改变继承自父类的行为。 虚函数 虚函数是可以在派生类中被重写的函数。在基类中声明虚函数时,使用关键字 vir…

秋招/春招投递公司记录表格

最近在准备秋招,在各个平台投递秋招简历,什么官网,邮箱,boss,应届生各个平台上,投递的平台比较多,比较乱,因此自己想将这些平台投递记录都收集到一个表格上,所以在腾讯文…

切片上传记录

核心就是 1 前端分片 2 后端组装 3 md5校验 Spark-md5介绍 用md5就是为了防止文件被篡改,小的文件直接可以用整个文件传入,返回文件md5,但是越大的文件(超过2G),如果用整文件的方式,时间会很久,分片计…

bladeX默认审批流flowable如何设置

下面就是流程图必须得写 ${taskUser} 你要配什么 就给审批流的service传什么

VSCode必备插件!快看过来!

同学同学,你是不是也很头疼VSCode不知道安装什么插件啊?尤其是萌新小白,更是一头雾水,那就快来一起看看吧~我帮你整理了一些非常实用的插件,安装上它们,你的开发体验会大大提升! 1. Chinese (S…

Python变量未赋值错误之程序优化示例

UnboundLocalError: local variable ‘respon1’ referenced before assignment V1: def main(): time1=2024-08-01 08:00:00 # 开始 08:00:00time2=2024-09-01 07:59:59 # 结束 07:59:00begintime=str_data_to_num(time1)endtime=str_data_to_num(time2)ss=get_grafana_l…

Call openai-node in the backend or call https in the frontend?

题意:在后端调用 openai-node 还是在前端调用 https? 问题背景: I have a web application by ReactJS and Nodejs. This application calls OpenAI APIs. 我有一个使用 ReactJS 和 Node.js 开发的 Web 应用程序。这个应用程序调用 OpenAI …

零基础入门转录组数据分析——预后模型之lasso模型

零基础入门转录组数据分析——预后模型之lasso模型 目录 零基础入门转录组数据分析——预后模型之lasso模型1. 预后模型和lasso模型基础知识2. lasso预后模型(Rstudio)——代码实操2. 1 数据处理2. 2 构建lasso预后模型2. 3 提取Lasso预后基因2. 4 计算风…

数据库性能测试2:内存数据库

继上一篇 数据库性能测试:Mysql、Sqlite、Duckdb 之后,做了一下内存数据库的性能测试,这里主要比较的是 Sqlite、Duckdb以及我这边使用容器实现的一个简单内存数据库,因为Sqlite和Duckdb都支持内存数据库模式,于是打算…

Pyqt5高级技巧:多线程任务、窗体交互、常用控件介绍(含基础Demo)

目录 一、多线程任务和多窗体交互 二、增删改查Demo 三、UI设计 【css效果代码对照表】 【实现效果】 【实现代码】 【常见问题】 Q1:工具栏怎么加,资源图片怎么加 Q2:控件被背景染色怎么办? Q3:QTdesigner有…

LVS的加权轮询算法

http://kb.linuxvirtualserver.org/wiki/Weighted_Round-Robin_Scheduling 加权轮循调度是为了更好地处理不同处理能力的服务器。每个服务器都可以被分配一个权重,一个表示处理能力的整数值。权值较高的服务器比权值较低的服务器首先接收到新连接,权值较…

<Rust>egui学习之小部件(七):如何在窗口中添加颜色选择器colorpicker部件?

前言 本专栏是关于Rust的GUI库egui的部件讲解及应用实例分析,主要讲解egui的源代码、部件属性、如何应用。 环境配置 系统:windows 平台:visual studio code 语言:rust 库:egui、eframe 概述 本文是本专栏的第七篇博…

c#中Task.Run 和使用 Task 构造函数创建任务的区别

Task.Run 和使用 Task 构造函数创建任务是两种不同的方法,它们在某些方面有显著的区别: 启动方式: Task.Run 是一个静态方法,它立即启动一个任务并在后台执行指定的工作。它通常用于快速启动一个简单的后台任务。使用 Task 构造函数创建任务&…

记一次学习--webshell绕过(利用清洗函数)

目录 样本 样本修改 样本 <?php $a array("t", "system"); shuffle($a); $a[0]($_POST[1]); 通过 shuffle 函数打乱数组,然后通过$a[0]取出第一个元素&#xff0c;打乱后第一个元素可能是t也可能是system。然后再进行POST传参进行命令执行。 这里抓…

Android14(U)文件扫描源码探究

1.MediaReceiver 扫描的功能集中在MediaProvider中&#xff0c;源码位置&#xff1a;packages/providers/MediaProvider 其中的packages/providers/MediaProvider/AndroidManifest.xml&#xff1a; <receiver android:name"com.android.providers.media.MediaReceive…

部署Rancher2.9管理K8S1.26集群

文章目录 一、实验须知1、Rancher简介2、当前实验环境 二、部署Rancher1、服务器初始化操作2、部署Rancher3、登入Rancher平台 三、Rancher对接K8S集群四、通过Rancher仪表盘部署Nginx服务1、创建命名空间2、创建Deployment3、创建Service 一、实验须知 1、Rancher简介 中文官…

【自由能系列(中级),代码模拟】预测编码的核心:三个关键方程式的详解

预测编码的核心&#xff1a;三个关键方程式的详解 ——探索预测编码背后的数学原理与应用 核心结论&#xff1a;预测编码是一种基于贝叶斯定理的理论框架&#xff0c;它通过三个关键方程式描述了大脑如何处理和解释来自环境的信号。这些方程式分别建立了贝叶斯定理的简化形式、…