扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
最近在重写我自己的静态博客生成器,虽然遇到的小问题挺多,但今早这个问题令我印象深刻。
创新互联建站专注于企业全网营销推广、网站重做改版、启东网站定制设计、自适应品牌网站建设、成都h5网站建设、商城网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为启东等各大城市提供网站开发制作服务。
博客的文章基础数据储存在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
。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流