React中使用array.slice同时获取数组前3项与最后2项的方法

首先明确结论：单次调用Array.slice()无法同时获取数组不连续的前3项和最后2项。
slice的设计逻辑是返回原数组中指定起止索引之间的连续片段，不支持跨区间截取非连续内容。你提到的“不重新创建数组”的要求本身存在一点认知偏差：slice执行后本来就会返回新的浅拷贝数组，不会修改原数组，不存在破坏原菜单数据的问题。

代码修正方案 #

你不需要硬套单个slice传参的结构，直接拼接两次slice的返回结果即可，全程不会修改原menu数组：

{(auth ? menu.slice(0) : [...menu.slice(0,3), ...menu.slice(-2)]).map((item) => (
  <Link
    onClick={() => dispatch(handleMenu())}
    to={item.path}
    className={`${auth === false && "font-md"} ${
      item.path === window.location.pathname && "font-2xl"
    }`}
  >
    {item.title}
  </Link>
))}

逻辑说明 #

• 已认证场景：menu.slice(0)省略第二个参数，会返回从索引0到数组末尾的全部菜单，修复了你原代码里[0,5]只取前5项的问题
• 未认证场景：menu.slice(0,3)取前3项（索引0/1/2），menu.slice(-2)用负数索引直接取数组最后2项，两个结果展开合并为需要渲染的菜单列表
• 所有slice操作都不会修改原menu数组，符合你不改动原始数据的要求

如果你硬要维持原来slice(...参数)的单调用写法，只有当菜单数组固定长度为5时才成立——此时前3项+最后2项就是全部数组内容，未认证传[0]即可，但这显然不符合截断未认证用户可见菜单的需求。

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