数组的深clone

上一篇博文写了对象的深拷贝，这些天在工作中，正好遇到了出在同样身为”引用类型”，数组身上的问题。
先说下需求：

通过UE图看出需求，表格中的每一行是通过点击添加按钮，动态添加到表格中的；并且在每一行中会有很多需要填入配置项的输入框；

技术：react

问题：根据数据驱动原理，这个表格的生成依靠的是一个数组数据tableList，这个数组中的每一个元素是一个object，object中有个value属性的值也是数组，这个数组用来生成配置输入框，类似于这样：

const tableList = [{id:1, value:[],type:3},{id:1, value:[],type:3},{id:1, value:[],type:3}...]

问题：tableList中的每一个元素都是表格中的一列，那么如果想增加一列的话，就往tableList中push一个新的object，那么react自动会渲染出新一列表格，这看似没什么问题；但是问题恰恰出现了，当你在第一列的输入框中输入内容的时候，第二列、第三列、第四列…中的输入框都会显示同一内容；

debug：这个问题原因是，当每次往tableList数组中push一个新的对象的时候，这个对象中也含有数组，数组是个引用类型，在追加的时候，只是追加了内存栈中的引用地址，这些引用地址指向了内存堆中的同一数组内容，进而出现使输入框联动的问题；这就需要我们每次往tableList中push对象的时候，让这个对象中的数组是个经过深拷贝的数组，不仅仅是引用地址。

下面就说下数组的深拷贝：

当然方法有很多，我在网上也看到了很多方法，其中for循环是可用的，但是在这里我要介绍一种新的方法，新的思路：

const arr = [1,2,3,4,5];const deepCloneArr = JSON.parse(JSON.stringify(arr));

将一个数组转换为字符串，因为字符串是基本类型，再把这字符串转为数组，这样就实现了数组的深克隆；