[toc]

小程序数据本地存储中遇到的数组深度克隆问题

问题描述

• 背景：

因后端服务器功能没有完成，且小程序当前功能以展示为主，比较简单。所以暂时将所有要展示的文字等信息以数组和对象的形式存储在小程序前端的一个JS文件中export出来供页面使用

• 出现问题：

部分信息需要分组展示，故将该数组在要用到的地方分割成5个一组再组合成二维数组，在页面中遍历展示

这样修改后，测试组发现只有第一次进入能正常展示内容。从第二次开始进入该页面就无法正常展示这个数组中的内容，全部为空，且该页面其他内容均正常显示

问题探究

1. 最开始以为是onload和onshow的问题，但该页面是只能链接跳转进入的内部页面，每次都会销毁和重建，且其他在onload中的功能均正常
2. 然后在打印的数组中发现第二次进入时数组外部又套了一个数组，且其中的数据在没有经过分组合成代码前就已经被分组合成二维数组

问题发现

• 检查了储存静态数据的js内原始数据无误
• 最后发现是因为该数组来自于一个对象，而对象来自一个更大的数组，==在onload中是先从大数组取出该对象，再从对象取出目标数组==，这个过程是直接把目标数组赋值给新变量，导致实际上只是==浅拷贝==，再加上原数据实际是以变量的形式暴露的，故第一次进入页面时的分割操作是直接影响到原数据的
• 这导致下一轮再遇到分割合成二维数组的代码就会把数据外面再套一个数组，导致wxml中找不到对应数据
• 只不过它只是修改了本次执行缓存的数据，不会修改原文件，所以重新刷新后第一次又能正常进入，第二次才会再出现问题

问题解决

• 将直接赋值改为深度克隆。

let newArr=JSON.parse(JSON.stringify(arr))