如何使用JavaScript实现数组分页及连续索引展示

/**
 * 根据页码和每页数量获取指定页的数据。
 * @param {Array} allRecords - 包含所有记录的完整数组。
 * @param {number} perPage - 每页显示的记录数。
 * @param {number} currentPage - 当前页码（从1开始）。
 * @returns {Array} 当前页的记录数组。
 */
const getPageRecords = (allRecords, perPage, currentPage) => {
  // 确保页码和每页数量是有效数字
  if (!Array.isArray(allRecords) || allRecords.length === 0) {
    return [];
  }
  if (perPage <= 0) {
    console.warn("每页记录数必须大于0，已自动设为10。");
    perPage = 10; // 默认值
  }
  if (currentPage <= 0) {
    console.warn("当前页码必须大于0，已自动设为1。");
    currentPage = 1; // 默认值
  }

  const startIndex = (currentPage - 1) * perPage;
  const endIndex = startIndex + perPage;

  // 使用 slice 方法截取当前页的数据
  return allRecords.slice(startIndex, endIndex);
};

// 示例数据
const allRecordsData = [
  {id: 1, color: "red"},
  {id: 2, color: "blue"},
  {id: 3, color: "green"},
  {id: 4, color: "brown"},
  {id: 5, color: "indigo"},
  {id: 6, color: "yellow"},
  {id: 7, color: "orange"},
  {id: 8, color: "purple"},
  {id: 9, color: "pink"},
  {id: 10, color: "cyan"},
  {id: 11, color: "magenta"},
  {id: 12, color: "lime"},
  {id: 13, color: "teal"}
];

// 获取第一页的数据 (每页3条)
console.log("--- 第一页数据 (每页3条) ---");
console.log(getPageRecords(allRecordsData, 3, 1));
/*
输出:
[
  { id: 1, color: 'red' },
  { id: 2, color: 'blue' },
  { id: 3, color: 'green' }
]
*/

// 获取第二页的数据 (每页3条)
console.log("\n--- 第二页数据 (每页3条) ---");
console.log(getPageRecords(allRecordsData, 3, 2));
/*
输出:
[
  { id: 4, color: 'brown' },
  { id: 5, color: 'indigo' },
  { id: 6, color: 'yellow' }
]
*/

// 获取第五页的数据 (每页3条，超出总记录数，返回剩余部分或空数组)
console.log("\n--- 第五页数据 (每页3条) ---");
console.log(getPageRecords(allRecordsData, 3, 5));
/*
输出:
[
  { id: 13, color: 'teal' }
]
*/

// 假设这是你的React组件或Vue模板中的渲染逻辑
// currentPage 和 perPage 是从状态或props中获取的
const currentPage = 2; // 当前在第二页
const perPage = 3;     // 每页显示3条

// 获取当前页的数据
const recordsOnCurrentPage = getPageRecords(allRecordsData, perPage, currentPage);

// 渲染逻辑
recordsOnCurrentPage.map((record, localIndex) => {
  // 计算全局索引
  const globalIndex = (currentPage - 1) * perPage + localIndex + 1;
  return (
    <div key={record.id}>
      Card {globalIndex}: {record.color}
    </div>
  );
});

/*
如果 currentPage = 1, perPage = 3:
Card 1: red
Card 2: blue
Card 3: green

如果 currentPage = 2, perPage = 3:
Card 4: brown
Card 5: indigo
Card 6: yellow
*/