如何通过将数组传递给函数来删除数组中的空对象 - javascript？答案

【问题标题】：How to remove empty objects in an array by passing it to a function - javascript?如何通过将数组传递给函数来删除数组中的空对象 - javascript？
【发布时间】：2020-09-09 22:43:41
【问题描述】：

嗨，我有一个从 api 返回的对象。

let ApiData1 = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 10,
                "stateId": 10,
                "name": "Tamil Nadu",
                "code": "TN"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 11,
                "stateId": 11,
                "name": "Karnataka",
                "code": "KA"
            }
        },
        null,
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 12,
                "stateId": 12,
                "name": "Pondicherry",
                "code": "PY"
            }
        },
        null,
          {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 1,
                "stateId": 1,
                "name": "Delhi",
                "code": "DL"
            }
        }

    ]
}

在此数据中，在 ApiData1.features 中。有一些空值重新调整。我需要删除这个空值并且必须像这样返回。

输出

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 10,
                "stateId": 10,
                "name": "Tamil Nadu",
                "code": "TN"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 11,
                "stateId": 11,
                "name": "Karnataka",
                "code": "KA"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 12,
                "stateId": 12,
                "name": "Pondicherry",
                "code": "PY"
            }
        },
          {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 1,
                "stateId": 1,
                "name": "Delhi",
                "code": "DL"
            }
        }

    ]
}

无论如何都是通过将此 ApiData 传递给函数并像这样返回来实现这一点。你能帮我解决这个问题吗？

提前致谢

【问题讨论】：

这与您 32 分钟前提出的问题有关吗？ stackoverflow.com/questions/61965838/…
有点，但不一样。
到目前为止你尝试过什么？可以看看Array.filter 方法
ApiData1.features = ApiData1.features.filter(o => o)

标签： javascript arrays reactjs javascript-objects

【解决方案1】：

试试这个，它应该有助于摆脱空值

ApiData1.features = ApiData1.features.filter(ob => ob !==null)

【讨论】：

您确定可以这样赋值吗？ ApiData1.features 会被识别为有效的变量名吗？
是的，你可以。我们不想更改完整的 ApiData1 ，我们只需要从 features 数组中过滤掉值。
@ManirajMurugan ApiData1.features 不是变量名，features 是变量 ApiData1 中对象的属性
@JaromandaX，谢谢你的提及，我现在可以理解只有财产价值发生了变化..我的理解不好..

【解决方案2】：

您可以使用ES6 spread operator 和.filter() 过滤空数据，这是一个有效的sn-p：

let ApiData1 = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 10,
                "stateId": 10,
                "name": "Tamil Nadu",
                "code": "TN"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 11,
                "stateId": 11,
                "name": "Karnataka",
                "code": "KA"
            }
        },
        null,
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 12,
                "stateId": 12,
                "name": "Pondicherry",
                "code": "PY"
            }
        },
        null,
          {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 1,
                "stateId": 1,
                "name": "Delhi",
                "code": "DL"
            }
        }

    ]
}

let newData = {
  ...ApiData1,
  features: ApiData1.features.filter((el) => el)
}

console.log(newData);

【讨论】：

【解决方案3】：

添加了命令式风格的编码风格。

使用 forEach 循环
在 JS 对象/数组中通过 ref 传递。
使用 [...spreadOperator] 更新 ApiData1 特征数据

  var ApiData1 = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 10,
                "stateId": 10,
                "name": "Tamil Nadu",
                "code": "TN"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 11,
                "stateId": 11,
                "name": "Karnataka",
                "code": "KA"
            }
        },
        null,
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 12,
                "stateId": 12,
                "name": "Pondicherry",
                "code": "PY"
            }
        },
        null,
          {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 1,
                "stateId": 1,
                "name": "Delhi",
                "code": "DL"
            }
        }

    ]
};


var features =[];
ApiData1.features.forEach(feature => feature ? features.push(feature): null);
ApiData1['features'] = [...features];
console.log(ApiData1);

【讨论】：