如何在数组遍历中实现“前值变后值、当前值变前值”的滑动赋值逻辑

本文讲解如何在 javascript 数组遍历中优雅实现相邻元素的滑动赋值：每次调用函数时，before 取当前元素，after 取前一个元素（首项为 NULL），末尾还可补全终态（before = null, after = 最后一项）。

本文讲解如何在 javascript 数组遍历中优雅实现相邻元素的滑动赋值：每次调用函数时，before 取当前元素，after 取前一个元素（首项为 null），末尾还可补全终态（before = null, after = 最后一项）。

在实际开发中，我们常需处理具有时序或位置依赖关系的数据流，例如构建链表结构、生成差分日志、实现滚动提示（如“上一条：X，当前：Y”），或为动画/状态机提供前后帧上下文。此时，简单使用 map() 或 foreach() 的默认参数（仅含当前项与索引）往往不够——关键信息“前一项”需要显式获取。

核心解法在于：利用数组迭代方法（如 forEach、map、for…of 配合 entries()）自动传入的原始数组引用，在回调中通过 index – 1 安全访问前驱元素。这避免了手动维护临时变量、闭包状态或额外的预处理步骤，代码更简洁、可读性更高、无副作用。

以下为推荐实现（基于 forEach）：

const func1 = () => {   const myArray = ["Harry", "Hermione", "Ron", "Ginny", "Luna"];   myArray.forEach((current, index, arr) => {     func2(current, index, arr);   }); };  const func2 = (current, index, arr) => {   const before = current;   const after = index === 0 ? null : arr[index - 1];   console.log(`before = "${before}", after = "${after}"`); };  func1(); // 输出： // before = "Harry", after = "null" // before = "Hermione", after = "Harry" // before = "Ron", after = "Hermione" // before = "Ginny", after = "Ron" // before = "Luna", after = "Ginny"

✅ 关键要点说明：

• forEach 的第三个参数 arr 是对原数组的直接引用，非副本，确保索引访问高效且准确；
• 判断 index === 0 是安全获取前项的前提，避免负索引越界（arr[-1] 返回 undefined，而非 null）；
• 若需最终补全 before = null, after = “Luna”，可在 func1 中追加一次调用：

  // 在 forEach 后添加 if (myArray.Length > 0) {   func2(null, myArray.length, myArray); // 此时 index 超出范围，仅作标识 }

  并相应调整 func2：

  const func2 = (current, index, arr) => {   const before = current;   const after = index === 0      ? null      : (index <= arr.length ? arr[index - 1] : arr[arr.length - 1]);   console.log(`before = ${before === null ? "null" : `"${before}"`}, after = ${after === null ? "null" : `"${after}"`}`); };

⚠️ 注意事项：

• 避免在 func2 内部修改 arr（如 push/splice），否则可能影响后续迭代行为；
• 若数组为空，需单独处理边界情况（myArray.length === 0）；
• map() 同样支持三参数签名，但若无需返回新数组，forEach 语义更清晰、性能略优。

该模式本质是将“状态迁移”逻辑从函数外部（易出错的闭包/全局变量）下沉至数据本身（数组 + 索引），符合函数式编程中“数据驱动行为”的设计哲学，兼具健壮性与可测试性。