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
})