如何正确从 JavaScript 函数中返回并显示分页数据

聖光之護 2026-01-17 00:00:00 次阅读

函数能正常执行并返回数组，但无法在页面中显示，根本原因在于 return 仅向调用者传递值，不会自动更新 dom；需显式将返回结果渲染到 html 元素中。

要实现“点击按钮加载下一页数据并显示”，关键在于：函数必须返回数据，同时在调用后立即将其插入页面。你当前的 nextTwo() 确实正确返回了切片后的数组（如 [11, 12, ..., 20]），但 onclick="nextTwo()" 仅执行函数，却丢弃了返回值——它既未被接收，也未被用于更新界面。

✅ 正确做法：接收返回值 + 渲染到 DOM

首先，确保目标容器存在（例如一个

然后修改函数，在返回数据的同时，也完成 DOM 更新（推荐方式）：

const objList = [
  { id: 1, name: "Item 1" }, { id: 2, name: "Item 2" },
  // ... 共20个对象（示例略）
  { id: 20, name: "Item 20" }
];

function nextTwo() {
  const page = 2;      // 固定为第2页 → 显示第11–20项
  const step = 10;
  const start = (page - 1) * step; // 更直观：第1页从0开始，第2页从10开始
  const end = start + step;

  const nextItems = objList.slice(start, end);

  // ✅ 步骤1：更新页面（关键！）
  const container = document.getElementById('item_list');
  if (container) {
    container.innerHTML = nextItems
      .map(item => `${item.name} (ID: ${item.id})`)
      .join('');
  }

  // ✅ 步骤2：仍可返回（便于测试或链式调用）
  return nextItems;
}