如何对多层嵌套对象的数组进行切片以实现前端分页功能

原代码问题点 #

• 没有返回处理后的数组：forEach仅做遍历，不会返回新值，reduce生成的切片对象没有被赋值或返回，函数最终没有输出结果
• 切片参数逻辑错误：写的slice(start - 1, end + 1)会多取元素，不符合你给出的示例要求
• reduce缺少初始值：reduce没有传入初始空对象，运行时会直接报错
• 未对key排序：Object.keys返回的键是字符串类型，默认按字符序排列，转成数字排序能保证和你预期的序号顺序一致

修正后代码 #

const sliceData = (array, start, end) => {
  // 遍历每个顶层对象，返回处理后的新数组
  return array.map(item => {
    // 先把key转成数字排序，保证序号和预期一致
    const sortedKeys = Object.keys(item)
      .map(Number)
      .sort((a, b) => a - b)
      .slice(start, end) // Array.slice是左闭右开，传入0,2刚好取前2个元素，匹配你的示例需求
      .map(String); // 转回字符串匹配原对象的key类型
    
    // 用reduce生成切片后的新对象
    return sortedKeys.reduce((result, key) => {
      result[key] = item[key];
      return result;
    }, {}); // 必须传入初始空对象
  });
};

使用说明 #

要得到你给出的示例输出，直接调用sliceData(原始数组, 0, 2)即可。如果你的分页序号是从1开始计数，调整slice参数即可：比如取第1到第3项，传入slice(0, 3)即可。

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