在做项目的时候有使用 Echarts 作为统计数据的图表显示。通常我使用 Echarts 的时候会在文件的最上面创建一个 const option 常量对象,使用中对 option 用 lodash 的 cloneDeep() 函数进行深克隆,然后使用克隆后的常量值。这样做其实是不好的。

知乎 上看到一个关于深拷贝的问题,其中一个回答者说了这样的话。

对付 deep clone, 最好的办法是抛弃需要 deep clone 的代码.

本来我对这句话很困惑,但点开评论,其中他有对这句话做了解释。并对例如 Echarts 的 option 的赋值问题,说可以用函数或者构造函数生成多个对象就可以了。让我对之前的使用方法做了反思。的确,用深克隆的话,不仅会创建一个新的变量,而且还会调用深克隆进行遍历赋值,这个遍历其实对我们使用来说应该是可以避免的。比如使用函数就可以达到生成新的变量的目的。所以我的建议是,如果使用 Echarts 的 option,可以在文件的最上面创建一个最简单的箭头函数,返回值为默认 option 对象数据。如果需要使用新的数据,调用该函数即可。代码如下:

 

const defaultOpts = () => ({ title, legendgrid, toolbox, xAxis, yAxis, series, ...}); // 可以放在该文件 Class 的外面

const opt1 = defaultOpts() // 使用时创建该常量并赋值箭头函数的对象返回值
opt1.data = ... // 可以针对新的常量对象进行数据变更并不会影响箭头函数的内容
const opt2 = defaultOpts() // 如果需要创建第二个 option