如何过滤掉 Typescript 中的空对象？答案

【问题标题】：How do I filter out empty objects in Typescript?如何过滤掉 Typescript 中的空对象？
【发布时间】：2020-08-13 13:49:42
【问题描述】：

我希望你能帮助我。

我正在使用 mapbox-gl 创建地图，并且正在渲染一些坐标 [lon, lat]。

虽然有些值是 null，所以我尝试使用 reducer 将它们过滤掉，但对于那些空值，我只创建一个无法删除的空对象并出现错误（ filtersPositions.lon -> 错误：类型“{}”上不存在属性“lon”）

我怎样才能只渲染那些非空值的集群？这是我的代码：

    <Cluster ClusterMarkerFactory={clusterMarker} zoomOnClick>
    {systems.map(({ last_position, id }) => {

        const filteredPositions = Object.entries(last_position).reduce((a,[k,v]) => (v == null ? a : {...a, [k]:v}), {})

        return (
          <SystemMarker
            key={id}
            coordinates={[filteredPositions.lon, filteredPositions.lat]}
            heading={0}
            id={id}
            onClick={onSystemSelect}
          />
        )
    })}
    </Cluster>

【问题讨论】：

是this你需要什么？
谢谢，但它就像我的 reducer 一样工作，但没有解决我的问题，因为对象中的值要么都是 null，要么不为 null。当它们为空时，会创建一个空对象，我要做的是删除空对象。
哦，只需检查Object.entries 是否为空，然后执行delete obj[prop]。如果你想删除一个原始对象，你必须这样做obj = undefined

标签： reactjs typescript filter

【解决方案1】：

reducer 应该对列表的元素进行一些计算并只返回一个元素。典型的用例是计算列表元素的总和：

let list = [1,2,3,4,5]
let sum = list.reduce((prev, curr) => prev + curr, 0); // 15

如果要过滤列表。有一个filter method。尝试使用它。

const filteredPositions = Object.entries(last_position).filter(([k,v]) => v !== null)

【讨论】：

reduce() 的第二个参数不需要与数组元素之一相同，所以我不知道我会说“应该”返回一个元素数组。这是一个典型的用例，当然，但不是唯一的。我强烈同意，既然filter() 存在，你不应该用reduce() 重新实现它。但有趣的是，reduce() 在某种意义上是一个“通用”数组操纵器，因为你可以implement map/filter/find with it 但反之则不行。
谢谢，我需要的是在映射之前添加一个过滤器，谢谢！