如何在JavaScript中限制数组元素数量为20个？

原代码使用map遍历所有文档时，当计数变量xy >= 20会返回undefined，最终数组会包含无效的undefined元素，以下是两种优化方案：

方案一：先截取前20个文档再映射（推荐） #

直接对querySnapshot.docs做切片，只取前20个元素再生成HTML字符串，既高效又不会产生无效元素：

// 截取前20个文档后映射生成HTML
const items = querySnapshot.docs.slice(0, 20).map(post => `
<div class="postBox">
  <h4 class="postName">${post.data().display_name}</h4>
  <h1 class="postTitle">${post.data().title}</h1>
  <h3 class="postDescription">${post.data().description}</h3>
  <h5 class="postId">post id:${post.id}</h5>
  <h6 class="postUid">uid:${post.data().uid}</h6>
  <div class="likeContainer">
    <ion-icon name="thumbs-up-outline" class="likeBtn"></ion-icon>
    <h3 class="likeCount">${post.data().likes}</h3>
  </div>
</div>
`);

注意：将原代码中的id改为class，多个相同id的元素不符合HTML规范，会导致后续DOM操作异常。

方案二：使用reduce控制数组长度 #

如果需要中途加入过滤逻辑，可使用reduce构建数组，直到元素数量达到20个为止：

const items = querySnapshot.docs.reduce((acc, post) => {
  if (acc.length < 20) {
    acc.push(`
<div class="postBox">
  <h4 class="postName">${post.data().display_name}</h4>
  <h1 class="postTitle">${post.data().title}</h1>
  <h3 class="postDescription">${post.data().description}</h3>
  <h5 class="postId">post id:${post.id}</h5>
  <h6 class="postUid">uid:${post.data().uid}</h6>
  <div class="likeContainer">
    <ion-icon name="thumbs-up-outline" class="likeBtn"></ion-icon>
    <h3 class="likeCount">${post.data().likes}</h3>
  </div>
</div>
    `);
  }
  return acc;
}, []);

内容的提问来源于stack exchange，提问作者sando xavier