JS Map返回问题

Question

我正在使用映射函数来浏览幻灯片数据，我只希望返回前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。这样做的标准方法是什么？

Answer 1

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

相反，请考虑使用filter仅包含筛选输出中的前5个元素：

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

或者，如果您有兴趣找到特定的连续元素，就像在这种情况下一样，只需使用slice(n, m)来获取元素n到m-1：

slideData.slice(0, 5)

Answer 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