一个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


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

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