如何为数组比对功能添加计数监控，解决元素偏移导致的差异误判问题

问题根源 #

• 你用for...in遍历数组时，拿到的count是字符串类型，做加法时会触发字符串拼接而非数值运算，自然无法正确计算索引，这是你代码返回undefined的直接原因
• 单循环+固定偏移量的逻辑没有判断后续元素匹配情况，仅根据数组总长度调整偏移，很容易出现后续匹配完全错位的问题，无法应对中间多次增删的场景

最优简易实现：双指针遍历法 #

无需引入第三方依赖，几十行代码即可实现支持增删改识别的数组比对，完全不会出现单次偏移导致后续全部误判的问题：

async function compareArray() {
  const fetchOld = await fetch('https://a/data');
  const fetchNew = await fetch('https://a/data');
  const oldArr = await fetchOld.json();
  const newArr = await fetchNew.json();

  // 双指针分别指向旧数组、新数组的当前比对位置
  let oldPtr = 0;
  let newPtr = 0;
  const diffResult = [];

  while (oldPtr < oldArr.length && newPtr < newArr.length) {
    if (oldArr[oldPtr] === newArr[newPtr]) {
      // 元素相等，两个指针同时后移
      oldPtr++;
      newPtr++;
      continue;
    }

    // 元素不等，先判断是不是新数组新增了元素：找新数组后续有没有和当前旧数组元素相等的
    let findInNew = newArr.slice(newPtr).indexOf(oldArr[oldPtr]);
    // 再判断是不是旧数组删除了元素：找旧数组后续有没有和当前新数组元素相等的
    let findInOld = oldArr.slice(oldPtr).indexOf(newArr[newPtr]);

    if (findInNew > 0 && (findInOld === -1 || findInNew < findInOld)) {
      // 新数组当前位置新增了findInNew个元素
      for (let i = 0; i < findInNew; i++) {
        diffResult.push({
          type: '新增',
          position: newPtr + i,
          value: newArr[newPtr + i]
        });
      }
      newPtr += findInNew;
    } else if (findInOld > 0 && (findInNew === -1 || findInOld < findInNew)) {
      // 旧数组当前位置删除了findInOld个元素
      for (let i = 0; i < findInOld; i++) {
        diffResult.push({
          type: '删除',
          position: oldPtr + i,
          value: oldArr[oldPtr + i]
        });
      }
      oldPtr += findInOld;
    } else {
      // 元素修改
      diffResult.push({
        type: '修改',
        position: newPtr,
        oldValue: oldArr[oldPtr],
        newValue: newArr[newPtr]
      });
      oldPtr++;
      newPtr++;
    }
  }

  // 处理旧数组剩余未比对元素（全部是删除）
  while (oldPtr < oldArr.length) {
    diffResult.push({
      type: '删除',
      position: oldPtr,
      value: oldArr[oldPtr]
    });
    oldPtr++;
  }

  // 处理新数组剩余未比对元素（全部是新增）
  while (newPtr < newArr.length) {
    diffResult.push({
      type: '新增',
      position: newPtr,
      value: newArr[newPtr]
    });
    newPtr++;
  }

  // 输出差异结果，可替换为你需要的自定义处理逻辑
  console.table(diffResult);
}
compareArray();

你给出的示例数组跑这段代码，只会识别出索引1的位置新增了Gunner，后续元素不会被误判为差异。

仅修复原有代码的方案 #

如果你不想替换现有逻辑，只需把for...in遍历改为数值循环，同时调整偏移量的判定规则即可：

async function c() {
  let countControl=0;
  const fetchO = await fetch('https://a/data');
  const fetchN = await fetch('https://a/data');
  const O = await fetchO.json();
  const N = await fetchN.json();
  // 取两个数组的最长长度作为循环上限
  const maxLen = Math.max(O.length, N.length);
  for(let count = 0; count < maxLen; count++) {
    const oldVal = O[count + countControl];
    const newVal = N[count];
    if(newVal !== oldVal) {
      console.table('Old: ', oldVal, 'New: ', newVal);
      // 仅当前元素后续存在匹配时调整偏移，避免乱调偏移导致后续全错
      if(O.slice(count + countControl).includes(newVal)) {
        countControl += 1;
      } else if(N.slice(count).includes(oldVal)) {
        countControl -= 1;
      }
    }
  }
}
c();

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