如何在数组迭代过程中维护前后元素关联并生成预期的前后值序列

看起来你想要遍历数组时，让每个元素对应一组before和after值——第一个元素的after是null，后续元素的after是前一个元素，最后还要额外加一组before为null、after是数组最后一个元素的结果对吧？

你原来用map的方式不太方便追踪前一个元素的值，因为map每次只处理当前元素，除非额外维护一个外部变量。这里给你两种更直观的实现方式：

方式一：使用普通for循环 #

这种方式最直接，能清晰地通过索引获取前一个元素：

const func1 = () => {
  let myArray = ["Harry", "Hermione", "Ron", "Ginny", "Luna"];
  
  // 遍历数组的每个元素，生成对应before/after
  for (let i = 0; i < myArray.length; i++) {
    const before = myArray[i];
    // 第一个元素的after为null，其余取前一个元素
    const after = i === 0 ? null : myArray[i - 1];
    func2(before, after);
  }
  
  // 处理最后一组特殊情况：before为null，after是数组最后一项
  func2(null, myArray[myArray.length - 1]);
}

const func2 = (before, after) => {
  // 格式化输出，让结果和你预期的一致
  const formatValue = val => val === null ? 'null' : `"${val}"`;
  console.log(`before = ${formatValue(before)}, after = ${formatValue(after)}`);
}

func1();

方式二：使用forEach遍历 #

如果你更喜欢数组方法，forEach的回调函数能拿到当前索引，同样可以轻松获取前一个元素：

const func1 = () => {
  let myArray = ["Harry", "Hermione", "Ron", "Ginny", "Luna"];
  
  myArray.forEach((currentItem, index) => {
    const before = currentItem;
    const after = index === 0 ? null : myArray[index - 1];
    func2(before, after);
  });
  
  // 追加最后一组特殊值，用at(-1)可以直接取最后一个元素，更简洁
  func2(null, myArray.at(-1));
}

const func2 = (before, after) => {
  const formatValue = val => val === null ? 'null' : `"${val}"`;
  console.log(`before = ${formatValue(before)}, after = ${formatValue(after)}`);
}

func1();

运行任意一段代码，都会输出你想要的结果：

before = "Harry", after = null
before = "Hermione", after = "Harry"
before = "Ron", after = "Hermione"
before = "Ginny", after = "Ron"
before = "Luna", after = "Ginny"
before = null, after = "Luna"

简单说下为什么不用map：map的设计初衷是转换数组生成新数组，而我们这里只是要执行调用func2的副作用，用for或forEach语义更清晰；另外如果用map的话，需要额外在外部维护一个变量来记录前一个元素，反而增加了复杂度。

备注：内容来源于stack exchange，提问作者nb_nb_nb