使用reduce映射对象列表时过滤答案

【问题标题】：Filter while mapping a list of object using reduce使用reduce映射对象列表时过滤
【发布时间】：2020-01-17 19:21:05
【问题描述】：

我想映射一个设备列表，但不是每个设备，所以我需要我的地图功能中的某种过滤器。

这是我的地图功能的样子

get activities() {
    return this.props.screenProps.store.activities.map((sensor) => {
      return {
        id: sensor.SensorID,
        type: sensor.SensorType,
        timestamp: sensor.EventDate,
        key: sensor.SensorType,
      }
    })
  }

我只想返回 id 大于 5 的传感器，所以我尝试了这个但它没有用。

get activities() {
    return this.props.screenProps.store.activities.map((sensor) => {
    if (sensor.SensorID => 5){
    return {
            id: sensor.SensorID,
            type: sensor.SensorType,
            timestamp: sensor.EventDate,
            key: sensor.SensorType,
        }

    }
}

我已经阅读了减少将是要走的路，我试图让它工作，但是没有任何成功。有什么帮助吗？

【问题讨论】：

reduce 旨在将您的数组“减少”为一个返回值。这可能是一个元素、一个集合或任意数量的事物。虽然您可以使用 reduce 进行过滤，但它会强制它。最有效和最清晰的方法是使用filter 然后map。如果您的回调返回true，filter 将返回元素仅。 map 将为每次迭代返回一些东西，即使那个东西是空的。

标签： reactjs react-native jsx

【解决方案1】：

假设 SensorID 是一个数字而不是一个字符串，你可以试试这个

get activities() {
    return this.props.screenProps.store.activities
      // Filter out records for which SensorID is more than or equal to 5.
      .filter(sensor => sensor.SensorID >= 5)
      // Use that filtered array to map it in a new one.
      .map((sensor) => {
      return {
        id: sensor.SensorID,
        type: sensor.SensorType,
        timestamp: sensor.EventDate,
        key: sensor.SensorType,
      }
    })
  }

如果你热衷于为此使用reduce，你可以试试下面的sn-p

get activities() {
    return this.props.screenProps.store.activities
      .reduce((acc, sensor) => {
        // Push the element to final array only if the SensorId >= 5
        if (sensor.SensorID >= 5) {
          acc.push({
            id: sensor.SensorID,
            type: sensor.SensorType,
            timestamp: sensor.EventDate,
            key: sensor.SensorType,
          });
        }

        return acc;
      }, []);
  }

【讨论】：

这就像一个魅力，请你，如果你不介意给我一些解释它是如何工作的？谢谢
在代码中添加了 cmets。我希望这些对您有所帮助。