噢！JavaScript (2)：对数组要小心使用delete

最近在重写我自己的静态博客生成器，虽然遇到的小问题挺多，但今早这个问题令我印象深刻。

发现问题

博客的文章基础数据储存在

main.json

中，其中专门有数组

dateindex

来储存经过排列后的文章顺序。而今天这个问题就发生在删除文章时对

dateindex

的处理上。

最开始我使用JavaScript的

delete

关键字对

dateindex

内对应文章的元素进行了删除。因为之前我一直习惯这样做，所以也没怎么想这样做的后果。

删除文章的最后一步会对包括

dateindex

的文章数据使用

JSON.stringify()

转换为JSON文件格式。

接下来会调用函数

renderList()

，该函数中首先会利用

JSON.parse()

将上面的JSON解析为js对象，然后对

dateindex

数组进行遍历。接着就出错了：

Uncaught TypeError: Cannot read properties of null

看到这个

null

我立马意识到是

dateindex

里处理有问题了。试了几次发现都是这样，回去检查代码才发现：这个

delete

对于数组一定要谨慎使用。

怎↗么↘回事呢

这一节举个例子来说明~

let arr=[[1],[2],[3],[4],[5]];
delete arr[2];

上面这段代码中我尝试用

delete

删除了

arr

的下标为2的元素，我们试着输出一下处理后的数组：

console.log(arr); // > (5) [[1], [2], 空, [4], [5]]

很明显已经有不对劲的地方了，虽然用

delete

删除了元素内容，但数组长度并没有变化，下标为2的元素相当于被架空了（

undefined

）。

arr.forEach(v=>console.log(v[0])) // 1 2 4 5

此时使用

forEach

没有问题，会自动跳过“空元素”，但如果经过

JSON

方法处理一道情况就不同了：

json=JSON.stringify(arr);
arr2=JSON.parse(json);
console.log(arr2); // > (5) [[1], [2], null, [4], [5]]

因为数组长度未变，空元素在JSON中被记录为了

null

，而重新解析为JavaScript对象时也就自然而然变成null了，这个时候再进行循环就不会忽略了：

arr2.forEach((v)=>console.log(v[0]))
/*
1
2
Uncaught TypeError: Cannot read properties of null (reading '0')
*/

这便是问题所在。

替代方法

JavaScript数组原型链上还有一个方法

splice(开始下标[,删除数量[,填补元素...]])

。

该方法对于数组也是原地操作，并且数组的长度会被改变。因此直接用

arr.splice(2,1);

代替

delete arr[2]

即可。

教训

虽然

Array

在JavaScript里也属于对象，但是数组是有序序列，是特殊的对象，在使用

delete

这种针对对象的关键字时一定要多了解一下产生的后果~~(有点开地图炮的感觉）~~。

最好不要随便在数组上使用

delete

。