如何从数组中获取最多 3 个第一个和最后一个项目

Question

我正在使用 react 进行分页。我想显示前 3 页，然后显示三个点，当用户单击它们将成为输入的点时，用户可以输入页码，最后是最后 3 页。像这样：

<< 1 2 3 ... 10 11 12 >>

但使用我当前的代码如果我有 4 页的数组。我明白了：

<< 1 2 3 ... 2 3 4 >>

如何处理这种情况？有什么建议吗？

const pagesArr = [...Array(data.pageCount).keys()].map((x) => ++x); // [1, 2, 3, ... 10, 11, 12]

<>
{pagesArr.slice(0, 3).map((p) => (
  <a
    key={p}
    href='#'
    className='z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium'
  >
    {p}
  </a>
))}
{pagesArr.length > 6 && (
  <span className='relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700'>
    ...
  </span>
)}
{pagesArr.slice(Math.max(pagesArr.length - 3, 1)).map((p) => (
  <a
    key={p}
    href='#'
    className='z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium'
  >
    {p}
  </a>
))}
</>

Answer 1

我猜你只是检查 pagesArr.length > 6，如果不是则映射所有 6？