一个JS对象操作上的小坑

发表于   |   分类于

今天，工作上遇到一个很滑稽的问题。我大概描述一下，具体的源代码和项目详情这里就不详述了。

项目上使用到了一款插件叫做jqGrid，在使用这个插件进行表格数据载入的时候调用了一个名为localData的对象里面的一个列表——我们姑且称之为localData.list——里面的数据。在页面加载的时候这个表格就会被初始化。在点击某个按钮进行数据初始化的时候需要清空这个表格，于是我写下了一段带有巨坑的代码：

1
2
3
4
5
localData = {
  status: 0,
  count: 0,
  list: []
};

出事了……，在后续进行数据添加之后（localData.list.push），进行表格的重载.trigger("reloadGrid")操作时，数据无法展现。

百思不得其解之下，询问同事，他们也表示曾经出现过类似的问题，但是后来不知道怎么搞的就没事了。我比对了一下他们的项目源码，发现他们是这样写数据清空操作的：

1
2
3
localData.status = 0;
localData.count = 0;
localData.list.length = 0;

喏，陷阱就埋在这里……

在使用诸如a={}的形式进行对象的初始化操作时，之前的信息将会全部丢失，即使被赋值之后的结构与之前的一模一样，之前的对象也跟这个毫无关系了。

其实我早就应该意识到这个陷阱的，因为：

1
{} === {}

结果为false

总结：心要更细一些，基础得加强，赋值不要随意。

谨以此作文一篇，以儆效尤。本文完。