JSON深拷贝实现改变拷贝数组原数组不变

已于 2024-08-16 15:18:23 修改
阅读量21 收藏
点赞数
分类专栏： Js方法 文章标签： 前端 javascript
于 2024-08-16 15:07:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69876298/article/details/141260226
版权
不改变原数组 tableData
const submit = () => {
  const params = JSON.parse(JSON.stringify(tableData.value));  
  params.forEach(obj => delete obj.id);

  console.log("🚀 ~ params :", params )  //[{ label: 'hello',value:'zs'}]
  console.log("🚀 ~ tableData", tableData.value)  //[{ label: 'hello',value:'zs', id:'1'}]
}

前端-七木
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript 浅拷贝、深拷贝的实现代码
10-30
一个简单的深拷贝实现可以使用JSON.parse 和 JSON.stringify 方法，但这有局限性，因为它无法处理函数、循环引用或日期等复杂对象： ```javascript function deepCopy(obj) { return JSON.parse(JSON.stringify...
javascript深拷贝、浅拷贝和循环引用深入理解
10-18
1. JSON.parse() 和 JSON.stringify()：这是一种简单的深拷贝方法，适用于能转换为JSON格式的对象。但这种方法会丢失不能序列化的值（如undefined、函数、正则表达式和symbol），并且如果有循环引用，也会导致错误。...
js数组对象复制拷贝不改变原来的值，深拷贝
flysnownet的博客
11-26 2063
js数组，对象复制拷贝，深拷贝，按值传递 数组拷贝 方法1 es6扩展运算符 let arr1 = [1, 2, 3], arr2 = [...arr1]; arr2.pop(); console.log(arr1); console.log(arr2); 2Object.assign() let arr1 = [1, 2, 3], arr2 = []; Object.assign(arr2,arr1) arr2.pop(); console.log(arr1); co
vue~对象数组深拷贝，不改变原数据结构
weixin_42806958的博客
06-17 1441
对象数组深拷贝
Flutter | 数组浅拷贝深拷贝
无夜之星辰的博客
01-06 2520
浅拷贝：拷贝指针 深拷贝：拷贝一份新的对象 void _test1() { final model1 = _Model(); final model2 = _Model(); final model3 = _Model(); final array1 = [model1, model2, model3]; // 这个是浅拷贝，操作array1，array2也会变化 final array2 = array1; array1.remove(model1); print(.
数组与对象的浅拷贝与深拷贝
weixin_42839080的博客
03-19 398
一 浅拷贝 浅拷贝: 当拷贝的数据是对象,对象里的 1) 属性值是基本数据类型,那么拷贝的是地址, 2) 属性值是复杂引用类型,那么拷贝的是地址 浅拷贝只解决了第一层的问题,拷贝的第一层如果是引用类型,拷贝的还是地址 1.1 对象的浅拷贝 1.1.1 Object.assgin()方法 Object.assgin() //将所有可以枚举属性的值从一个或多个源对象复制到目标对象,返...
JS面试题中深拷贝的实现讲解
11-20
在JavaScript中，`JSON.parse(JSON.stringify(obj))`被用来实现深拷贝，这种方法简单易懂。然而，它存在以下问题： 1. 性能：对于大数据量的对象，序列化和反序列化的过程会消耗大量时间。 2. 类型限制：不能拷贝...
Javascript 复制数组实现代码
10-29
如果需要进行深拷贝，则需要使用其他方法，例如递归复制或利用JSON方法（通过JSON.parse(JSON.stringify(array))）实现，但这需要考虑对象中不支持JSON序列化的数据（如函数、undefined、循环引用等）。
js代码-深拷贝对象
07-16
因此，深拷贝对于那些需要保持原对象不变性的情况非常有用。 **浅拷贝的概念** 浅拷贝则是在内存中创建一个新对象，只复制原始对象的引用，而不是每个属性的值。这意味着，如果原始对象包含嵌套的对象或数组，那么...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 620
ASP.NET Core Web API 使用Autofac框架
JAVA-WEB资源配置
最新发布
caryeko的专栏
08-15 109
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
vue3使用pnpm运行项目但是运行不起来
一个努力不被优化的程序员
08-12 187
重新创建项目，将老项目的package.json，vite.config.ts，src等文件拖拽替换。删除node_modules重新下：文字编译乱码，utf-8可能解析处理问题。（如果哪位知道为什么会这样或者怎么解决麻烦留言下）运行项目的时候发现根本运行不起来了。删除node_modules重新下。尝试过创建.npmr文件。创建.npmr：不管用。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 744
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
提升前端性能的JavaScript技巧
han2434的博客
08-14 705
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
display:flex布局，最简单的案例
有问题可关注公众号：前端研究院 后台输入问题回复
08-12 190
【代码】display:flex布局，最简单的案例。
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 156
【代码】playwright链接本地浏览器，实现自动登录。
Web语义化及实际应用
沐爸的博客
08-13 1021
Web语义化是什么？有什么作用？实际开发中如何运用呢？一起了解下吧！
NVDLA专题4：具体模块介绍——Convolution DMA
fangfanglovezhou的博客
08-14 426
NVDLA专题4：具体模块介绍——Convolution DMA
json实现数组的深拷贝
05-25
要实现json数组的深拷贝，可以使用JSON.stringify()和JSON.parse()方法。 具体步骤如下： 1. 使用JSON.stringify()方法将数组转换为字符串。 2. 使用JSON.parse()方法将字符串转换为新的数组对象。 3. 修改新的数组对象，不会影响原始数组对象。 以下是示例代码： ```javascript // 原始数组对象 let arr1 = [1, 2, {a: 3, b: 4}, [5, 6]]; // 深拷贝数组对象 let arr2 = JSON.parse(JSON.stringify(arr1)); // 修改新的数组对象 arr2[2].a = 7; arr2[3][0] = 8; console.log(arr1); // [1, 2, {a: 3, b: 4}, [5, 6]] console.log(arr2); // [1, 2, {a: 7, b: 4}, [8, 6]] ``` 注意：这种方法只适用于纯粹的JSON数据，如果数组中有函数、正则表达式等非JSON数据类型，则无法进行深拷贝。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值