建站
咨詢
售后
建站咨詢
新聞中心
最近在重寫(xiě)我自己的靜態(tài)博客生成器，雖然遇到的小問(wèn)題挺多，但今早這個(gè)問(wèn)題令我印象深刻。
創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、啟東網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為啟東等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
發(fā)現(xiàn)問(wèn)題
博客的文章基礎(chǔ)數(shù)據(jù)儲(chǔ)存在main.json中，其中專門(mén)有數(shù)組dateindex來(lái)儲(chǔ)存經(jīng)過(guò)排列后的文章順序。而今天這個(gè)問(wèn)題就發(fā)生在刪除文章時(shí)對(duì)dateindex的處理上。
最開(kāi)始我使用JavaScript的delete關(guān)鍵字對(duì)dateindex內(nèi)對(duì)應(yīng)文章的元素進(jìn)行了刪除。因?yàn)橹拔乙恢绷?xí)慣這樣做，所以也沒(méi)怎么想這樣做的后果。
刪除文章的最后一步會(huì)對(duì)包括dateindex的文章數(shù)據(jù)使用JSON.stringify()轉(zhuǎn)換為JSON文件格式。
接下來(lái)會(huì)調(diào)用函數(shù)renderList()，該函數(shù)中首先會(huì)利用JSON.parse()將上面的JSON解析為js對(duì)象，然后對(duì)dateindex數(shù)組進(jìn)行遍歷。接著就出錯(cuò)了：
Uncaught TypeError: Cannot read properties of null
看到這個(gè)null我立馬意識(shí)到是dateindex里處理有問(wèn)題了。試了幾次發(fā)現(xiàn)都是這樣，回去檢查代碼才發(fā)現(xiàn)：這個(gè)delete對(duì)于數(shù)組一定要謹(jǐn)慎使用。
怎↗么↘回事呢
這一節(jié)舉個(gè)例子來(lái)說(shuō)明~
let arr=[[1],[2],[3],[4],[5]];
delete arr[2];
上面這段代碼中我嘗試用delete刪除了arr的下標(biāo)為2的元素，我們?cè)囍敵鲆幌绿幚砗蟮臄?shù)組：
console.log(arr); // > (5)[[1], [2], 空, [4], [5]]
很明顯已經(jīng)有不對(duì)勁的地方了，雖然用delete刪除了元素內(nèi)容，但數(shù)組長(zhǎng)度并沒(méi)有變化，下標(biāo)為2的元素相當(dāng)于被架空了（undefined）。
arr.forEach(v=>console.log(v[0])) // 1 2 4 5
此時(shí)使用forEach沒(méi)有問(wèn)題，會(huì)自動(dòng)跳過(guò)“空元素”，但如果經(jīng)過(guò)JSON方法處理一道情況就不同了：
json=JSON.stringify(arr);
arr2=JSON.parse(json);
console.log(arr2); // > (5)[[1], [2], null, [4], [5]]
因?yàn)閿?shù)組長(zhǎng)度未變，空元素在JSON中被記錄為了null，而重新解析為JavaScript對(duì)象時(shí)也就自然而然變成null了，這個(gè)時(shí)候再進(jìn)行循環(huán)就不會(huì)忽略了：
arr2.forEach((v)=>console.log(v[0]))
/*
1
2
Uncaught TypeError: Cannot read properties of null (reading '0')
*/
這便是問(wèn)題所在。
替代方法
JavaScript數(shù)組原型鏈上還有一個(gè)方法splice(開(kāi)始下標(biāo)[,刪除數(shù)量[,填補(bǔ)元素...]])。
該方法對(duì)于數(shù)組也是原地操作，并且數(shù)組的長(zhǎng)度會(huì)被改變。因此直接用
arr.splice(2,1);
代替delete arr[2]即可。
教訓(xùn)
雖然Array在JavaScript里也屬于對(duì)象，但是數(shù)組是有序序列，是特殊的對(duì)象，在使用delete這種針對(duì)對(duì)象的關(guān)鍵字時(shí)一定要多了解一下產(chǎn)生的后果(有點(diǎn)開(kāi)地圖炮的感覺(jué)）。
最好不要隨便在數(shù)組上使用delete。
當(dāng)前文章：噢！JavaScript (2)：對(duì)數(shù)組要小心使用delete
鏈接URL：http://www.ef60e0e.cn/article/dsojhji.html
