JS 地图返回问题答案

【问题标题】：JS Map returning issueJS 地图返回问题
【发布时间】：2018-03-23 16:02:03
【问题描述】：

我正在使用映射函数来浏览幻灯片数据，我只希望返回前 5 个。但是，幻灯片返回前 5 张幻灯片，然后返回 2 个空幻灯片对象（因为有 7 张幻灯片。如何防止最后两张返回？

const slides = slideData.slides.map((slide, index) => {
  if( index < 5 ) {
    return slide;
  }
});
console.log(slides);

另外，如果我做类似的事情......

let firstFive = [];
const slides = slideData.slides.map((slide, index) => {
  if( index < 5 ) {
    firstFive.push(slide)
  }
});

这可以正常工作，但是我收到一个 lint 错误，提示 Expected to return a value at the end of arrow function array-callback-return。这样做的标准方法是什么？

【问题讨论】：

【解决方案1】：

map 总是返回一个元素数量与其输入数组相同的数组。

相反，请考虑使用filter 仅在过滤后的输出中包含前 5 个元素：

slideData.slides.filter((slide, index) => {
  if( index < 5 ) {
    return true;
  }
});

或者，如果您有兴趣查找特定的连续元素运行，就像您在本例中所做的那样，只需使用 slice(n, m) 来获取元素 n 到 m-1：

slideData.slice(0, 5)

【讨论】：

【解决方案2】：

一般来说，对于将（可能）返回数组子集的操作，您希望使用 filter 而不是 map。

map 始终返回相同长度的数组，其中每个项目都根据map 提供的函数进行转换。

filter 返回一个过滤后的数组，该数组仅包含赋予filter 的函数返回真值的项。

所以在你的情况下：

const slides = slideData.slides.filter((_, i) => i < 5));

但是，对于这个特定示例，情况更加简单，因为您需要基于位置的数组子集。使用slice 是您所需要的：

const slides = slideData.slides.slice(0, 5); // extract first five items

【讨论】：