防止阿雷。返回条件不满足时返回[未定义的重复回调]

Question

我正在写一些代码，有些事情让我困惑。我有一个名为alarmsList的数字数组。现在我想遍历这个列表，如果一个值高于60，例如，我想创建一个新的对象数组（集合），在那里我们存储高值，它的索引来自原始数组。所以以下面的代码为例

const alarmsList = [1, 61, 77, 4, 5, 6, 7, 8, 85, 4, 3, 55];

const highAlarmsList = alarmsList.map((item, index) => {
    if(item > 60) {
        return ({ value: item, index })
    }
});

console.log(highAlarmsList)

控制台。日志输出如下

[
    undefined,
    {
        "value": 61,
        "index": 1
    },
    {
        "value": 77,
        "index": 2
    },
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    {
        "value": 85,
        "index": 8
    },
    undefined,
    undefined,
    undefined
]

这个输出是我所需要的，但是如何防止返回未定义的值呢？我考虑过使用数组。但这似乎不合适？我应该使用不同的数组方法吗？我不想使用for循环并推送到一个新数组，除非这是在不返回未定义值的情况下实现新数组的最佳/唯一方法。

Answer 1

map通过对数组的每个元素运行回调来创建一个新数组。如果条件不满足，它将返回undefined或null。因此，不可能从输出中跳过元素。

或者你可以ue减少或过滤

const alarmsList = [1, 61, 77, 4, 5, 6, 7, 8, 85, 4, 3, 55];

const highAlarmsList = alarmsList.reduce((acc, item, index) => {
  item > 60 && acc.push({
    value: item,
    index
  })
  return acc;
}, [])

console.log(highAlarmsList)

Answer 2

你可以使用数组。filter（）使用布尔值作为谓词删除未定义的值：

const alarmsList = [1, 61, 77, 4, 5, 6, 7, 8, 85, 4, 3, 55];

const highAlarmsList = alarmsList.map((item, index) => {
  if(item > 60) {
    return ({ value: item, index })
  }
}).filter(Boolean);

console.log(highAlarmsList)