最近在重寫我自己的靜態博客生成器，雖然遇到的小問題挺多，但今早這個問題令我印象深刻，
發現問題
博客的文章基礎資料儲存在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，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/423844.html
標籤：其他