嵌套数组对象结构的深度复制踩坑

990 阅读2分钟

背景

  • 一个简易的临时用的填信息的表单放在本地静态html网页上,数据也作为变量储存在script标签中,直接发html给对方填写后用cdn的FileSaver.js生成处理好格式的json文件,我就收集这个文件直接扔给脚本去读。(主要还是这是个全新的项目,什么服务器数据库的都没有搞,数据暂时要我手输,所以趁着有空写了个小程序把工作量分给收集客户信息的人,我就只用收能直接丢给脚本批量处理的半成品)

  • 方便起见直接要求一个人有多个手机要填的将两个号码之间用空格分隔写在同一个input中。

  • 收集好的数据在生成文件前处理好格式, 手机字段 要分割成数组元素

  • 即数据是以下结构

//原
let origin=[
	{
		name:'xx',
		phone:'xx xx'
	},
	....
]

//修改后
let update=[
	{
		name:'xx',
		phone:['xx','xx']
	},
	....
]

问题发现

  • **想当然地用了slice来深度拷贝,**然后发现第一次生成文件可以正常,不刷新页面再点击生成就会报错
  • 打印后发现 原数据的phone也被修改成了数组的形式,所以没法再次处理,报错

一度以为自己记错了slice不能深度复制,又用concat之类的方法试了试,发现都不行

  • 最后新开了个js文件试了试才发现是 嵌套结构的锅

问题解决

知道原因了就好办了,只要解决嵌套结构的深度复制就好了。

选择了最简单的方法:JSON.parse(JSON.stringify(origin))

  • 注意!JSON方法深拷贝虽然可以轻松解决嵌套问题,但也是有弊端的

JSON方法深拷贝的缺点

网上找到的深拷贝方法,不过我这就是个临时用来减轻重复劳动的一次性东西,内容也只有字符串,所以就懒得弄了。

终究还是知识点不扎实才出了这样的问题啊。。。