Javascript避免从数组中删除对象后获取null

Question

我有一个包含多个嵌套数组的数组。每个嵌套数组都有三个对象。我正在尝试删除第二个，但目前，我得到了一个空值。我想要的只是最终输出（之后）没有空值。 Splice 正在返回一个错误，即 splice 函数不存在。

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

delete 在这种情况下不会做你想做的事，它总是会用空位置替换数组条目，因为我相信它会像处理对象一样处理数组（所以你的长度属性也不会更新）。

我相信你几乎把它放在了你的注释部分。而不是：

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

使用：

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

Splice 会改变你的数组，然后你可以返回。

Answer 3

你可以在回调函数中使用map和splice：

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

Answer 4

您可以使用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 代替已删除的元素。

对于一个实验，让我们从下面的数组中删除第二个元素：

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

索引1 变为undefined。但是您会在输出中看到 null 而不是 undefined 这是因为当您将数组对象转换为 JSON 时，undefined 会转换为 null，因为 JSON 规范中没有 undefined：

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