赋值操作,等号左右两边数据同时变化?表格修改弹框数据改变,列表数据同时改变?

本文主要是介绍赋值操作,等号左右两边数据同时变化?表格修改弹框数据改变,列表数据同时改变?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

首先,赋值操作(使用=)通常不会导致等号左右两侧的变量值发生变化,赋值操作是将等号右侧的变量值赋值给左侧变量,左侧变量发生改变,右侧不会改变,这类赋值操作指的是 值复制

然而,若等号两侧的变量指向同一个对象(引用类型,如数组、对象等),那么对其中一个变量进行修改会影响另一个,这是因为她们引用的是同一个内存地址,赋值操作是复制了内存地址,而非对象本身,这类赋值操作指的是 引用复制

在JS的数据类型,通常基本类型(数字、字符串、Boolean)赋值操作都是值复制,引用类型(对象、数组等)赋值操作是引用复制。

怎么解决表格修改弹框数据改变,列表数据同时改变的问题呢(引用复制)?

  1. 深拷贝
    a. 使用 JSON.parse(), JSON.stringify()

    let originalObj = { nested: { value: 1 } };
    let copiedObj = JSON.parse(JSON.stringify(originalObj));copiedObj.nested.value = 2;
    console.log(originalObj.nested.value); // 输出:1,原始对象未受影响
    

    注意,上述方法有局限性,它不能处理函数、循环引用、undefined、Symbol、BigInt、Date、RegExp等非JSON格式兼容的值

    b.使用第三方库(如 lodash、immer、clone-deep 等)

    import cloneDeep from 'lodash/cloneDeep';let originalObj = { nested: { value: 1 } };
    let copiedObj = cloneDeep(originalObj);copiedObj.nested.value = 2;
    console.log(originalObj.nested.value); // 输出:1,原始对象未受影响
    

    c.自定义递归深拷贝函数

    function deepCopy(obj) {if (obj === null || typeof obj !== 'object') {return obj;}if (obj instanceof Date) {return new Date(obj);}if (obj instanceof RegExp) {return new RegExp(obj);}let copy = Array.isArray(obj) ? [] : {};for (let key in obj) {if (obj.hasOwnProperty(key)) {copy[key] = deepCopy(obj[key]);}}return copy;
    }let originalObj = { nested: { value: 1 } };
    let copiedObj = deepCopy(originalObj);copiedObj.nested.value = 2;
    console.log(originalObj.nested.value); // 输出:1,原始对象未受影响
    
  2. 使用不可变数据结构

    使用诸如 immutable-js、immer 等库提供的不可变数据结构。这些库在内部实现深拷贝的同时,提供了更高效的变更操作,能够在不改变原始数据的前提下返回一个新的状态。这对于React、Redux等需要频繁比较状态差异的应用尤其有用。

    import produce from 'immer';let originalState = { nested: { value: 1 } };
    let nextState = produce(originalState, draft => {draft.nested.value = 2;
    });console.log(originalState.nested.value); // 输出:1,原始状态未受影响
    console.log(nextState.nested.value); // 输出:2
    

这篇关于赋值操作,等号左右两边数据同时变化?表格修改弹框数据改变,列表数据同时改变?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

Python操作PDF文档的主流库使用指南

《Python操作PDF文档的主流库使用指南》PDF因其跨平台、格式固定的特性成为文档交换的标准,然而,由于其复杂的内部结构,程序化操作PDF一直是个挑战,本文主要为大家整理了Python操作PD... 目录一、 基础操作1.PyPDF2 (及其继任者 pypdf)2.PyMuPDF / fitz3.Fre

python中列表应用和扩展性实用详解

《python中列表应用和扩展性实用详解》文章介绍了Python列表的核心特性:有序数据集合,用[]定义,元素类型可不同,支持迭代、循环、切片,可执行增删改查、排序、推导式及嵌套操作,是常用的数据处理... 目录1、列表定义2、格式3、列表是可迭代对象4、列表的常见操作总结1、列表定义是处理一组有序项目的

C++11范围for初始化列表auto decltype详解

《C++11范围for初始化列表autodecltype详解》C++11引入auto类型推导、decltype类型推断、统一列表初始化、范围for循环及智能指针,提升代码简洁性、类型安全与资源管理效... 目录C++11新特性1. 自动类型推导auto1.1 基本语法2. decltype3. 列表初始化3

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali

MySQL 强制使用特定索引的操作

《MySQL强制使用特定索引的操作》MySQL可通过FORCEINDEX、USEINDEX等语法强制查询使用特定索引,但优化器可能不采纳,需结合EXPLAIN分析执行计划,避免性能下降,注意版本差异... 目录1. 使用FORCE INDEX语法2. 使用USE INDEX语法3. 使用IGNORE IND

MyBatis-Plus 自动赋值实体字段最佳实践指南

《MyBatis-Plus自动赋值实体字段最佳实践指南》MyBatis-Plus通过@TableField注解与填充策略,实现时间戳、用户信息、逻辑删除等字段的自动填充,减少手动赋值,提升开发效率与... 目录1. MyBATis-Plus 自动赋值概述1.1 适用场景1.2 自动填充的原理1.3 填充策略

C#监听txt文档获取新数据方式

《C#监听txt文档获取新数据方式》文章介绍通过监听txt文件获取最新数据,并实现开机自启动、禁用窗口关闭按钮、阻止Ctrl+C中断及防止程序退出等功能,代码整合于主函数中,供参考学习... 目录前言一、监听txt文档增加数据二、其他功能1. 设置开机自启动2. 禁止控制台窗口关闭按钮3. 阻止Ctrl +

java如何实现高并发场景下三级缓存的数据一致性

《java如何实现高并发场景下三级缓存的数据一致性》这篇文章主要为大家详细介绍了java如何实现高并发场景下三级缓存的数据一致性,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 下面代码是一个使用Java和Redisson实现的三级缓存服务,主要功能包括:1.缓存结构:本地缓存:使

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

C#解析JSON数据全攻略指南

《C#解析JSON数据全攻略指南》这篇文章主要为大家详细介绍了使用C#解析JSON数据全攻略指南,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、为什么jsON是C#开发必修课?二、四步搞定网络JSON数据1. 获取数据 - HttpClient最佳实践2. 动态解析 - 快速