Javascript避免從數組刪除對象后獲取null

Question

我有一個帶有多個嵌套數組的數組。 每個嵌套數組都有三個對象。 我正在嘗試刪除第二個，但此刻，我得到了一個空值。 我想要的是最終輸出（之后）沒有空值。 拼接返回錯誤，表明拼接功能不存在。

 var json_data=[[{value:"value1",formattedValue:"value1"},{value:"Unwanted part 3",formattedValue:"Unwanted part 3"},{value:2831.8,formattedValue:"283,180.00 %"}],[{value:"value1",formattedValue:"value1"},{value:"Unwanted part 2",formattedValue:"Unwanted part 2"},{value:349.1111111111111,formattedValue:"34,911.11 %"}],[{value:"value2",formattedValue:"value2"},{value:"Unwanted part 1",formattedValue:"Unwanted part 1"},{value:3.3703703703703702,formattedValue:"337.04 %"}]]; document.getElementById("before").innerHTML= JSON.stringify(json_data); for(i=0;i<json_data.length;i++){ let items = json_data[i]; const subItemToBeRemovedId = 1; items.forEach((item) => items.forEach((subItem, index) => { //console.log(JSON.stringify(items[subItemToBeRemovedId])); delete items[subItemToBeRemovedId]; //return item.subItemToBeRemovedId.splice(index, 1); })); } document.getElementById("after").innerHTML= JSON.stringify(json_data); 

 <h1>before</h1> <div id="before"></div> <h1>after </h1> <div id="after"></div> 

Answer 1

您可以使用以下代碼，
在這里，您只需使用.splice()從數組中刪除元素。 不需要使用多個forEach() 。

 var json_data = [ [{ value: "value1", formattedValue: "value1" }, { value: "Unwanted part 3", formattedValue: "Unwanted part 3" }, { value: 2831.8, formattedValue: "283,180.00 %" }], [{ value: "value1", formattedValue: "value1" }, { value: "Unwanted part 2", formattedValue: "Unwanted part 2" }, { value: 349.1111111111111, formattedValue: "34,911.11 %" }], [{ value: "value2", formattedValue: "value2" }, { value: "Unwanted part 1", formattedValue: "Unwanted part 1" }, { value: 3.3703703703703702, formattedValue: "337.04 %" }] ]; document.getElementById("before").innerHTML = JSON.stringify(json_data); for (i = 0; i < json_data.length; i++) { let items = json_data[i]; console.log("ITEMS ===>", items); items.splice(1, 1); } document.getElementById("after").innerHTML = JSON.stringify(json_data); 

 <h1>before</h1> <div id="before"></div> <h1>after </h1> <div id="after"></div> 

這是您要尋找的解決方案。

Answer 2

您可以使用Array.prototype.map獲取內部數組的內容，然后根據位置對其進行過濾：

 const json_data=[[{value:"value1",formattedValue:"value1"},{value:"Unwanted part 3",formattedValue:"Unwanted part 3"},{value:2831.8,formattedValue:"283,180.00 %"}],[{value:"value1",formattedValue:"value1"},{value:"Unwanted part 2",formattedValue:"Unwanted part 2"},{value:349.1111111111111,formattedValue:"34,911.11 %"}],[{value:"value2",formattedValue:"value2"},{value:"Unwanted part 1",formattedValue:"Unwanted part 1"},{value:3.3703703703703702,formattedValue:"337.04 %"}]]; document.getElementById("before").innerHTML= JSON.stringify(json_data); const after_json_data = json_data.map(items => items.filter((item, idx) => idx !== 1)) document.getElementById("after").innerHTML= JSON.stringify(after_json_data); 

 <h1>before</h1> <div id="before"></div> <h1>after </h1> <div id="after"></div> 

使用delete運算符刪除數組元素不會更改數組的length ，相反，它會undefined來代替Deleted元素。

為了進行實驗，請從下面的數組中刪除第二個元素：

 const arr = ["foo", "baz", "bar"]; delete arr[1]; console.log(arr); 

索引1變為undefined 。 但是您看到輸出中出現null而不是undefined這是因為將數組對象轉換為JSON時，由於JSON規范中沒有undefined ，因此undefined會轉換為null ：

 const arr = ["foo", "baz", "bar"]; delete arr[1]; console.log(arr); // undefined is null in the JSON string console.log(JSON.stringify(arr)); 

Answer 3

在這種情況下，delete不會執行您想要的操作，它將始終用空位置替換數組條目，因為我認為它像對象一樣處理Array（因此，length屬性也不會更新）。

我相信，您在注釋掉的部分中幾乎擁有它。 代替：

 return item.subItemToBeRemovedId.splice(index, 1);

采用：

items.splice(subItemToBeRemovedId, 1);
return items;

Splice將使您的Array發生變異，然后可以將其返回。

Answer 4

您可以在回調函數中使用map和splice ：

json_data = json_data.map(subArr => {
    subArr.splice(1,1);
    return subArr
})