JavaScript数组对象增改函数异常，请求排查问题原因

以下是几种导致你的数组未正确更新的常见情况及解决办法：

1. 查找元素时错误比较对象引用而非name属性 #

很多人会误用indexOf来查找元素，但indexOf比较的是对象的引用地址，而非name属性值。当你传入新的对象{name:'set1', a:2}时，它和原数组里的{name:'set1',a:1}是两个不同的对象引用，所以indexOf会返回-1，导致函数执行添加逻辑而非更新。

错误代码示例：

const arr = [{name:'set1',a:1}];

function updateOrAdd(obj) {
  const existingIdx = arr.indexOf(obj); // 比较对象引用，无法匹配原元素
  if (existingIdx !== -1) {
    arr[existingIdx] = obj;
  } else {
    arr.push(obj);
  }
}

updateOrAdd({name:'set1', a:2});
// 结果：arr变成 [{name:'set1',a:1}, {name:'set1',a:2}]

修复方案：
改用findIndex，根据name属性值匹配元素：

const arr = [{name:'set1',a:1}];

function updateOrAdd(obj) {
  const existingIdx = arr.findIndex(item => item.name === obj.name);
  if (existingIdx !== -1) {
    arr[existingIdx] = obj; // 直接替换原元素
    // 或者修改原对象属性：arr[existingIdx].a = obj.a;
  } else {
    arr.push(obj);
  }
}

updateOrAdd({name:'set1', a:2});
// 结果：arr变成 [{name:'set1',a:2}]

2. 使用map更新但未将结果赋值回原数组 #

map方法会返回一个新数组，不会修改原数组。如果只是调用map而不把返回值赋值给原数组，原数组自然不会变化。

错误代码示例：

const arr = [{name:'set1',a:1}];

function updateOrAdd(obj) {
  arr.map(item => {
    if (item.name === obj.name) {
      return obj; // 返回新对象，但原数组未被修改
    }
    return item;
  });
}

updateOrAdd({name:'set1', a:2});
// 结果：arr还是 [{name:'set1',a:1}]

修复方案：
将map的返回值赋值给原数组，或者直接修改匹配到的对象属性：

// 方案1：用map结果替换原数组
function updateOrAdd(obj) {
  arr = arr.map(item => item.name === obj.name ? obj : item);
}

// 方案2：直接修改原对象属性（推荐，避免创建新数组）
function updateOrAdd(obj) {
  const existingItem = arr.find(item => item.name === obj.name);
  if (existingItem) {
    existingItem.a = obj.a;
  } else {
    arr.push(obj);
  }
}

3. 函数内部重新声明了同名数组变量 #

如果函数内部用let或const重新声明了arr，那么你操作的只是函数内的局部数组，外部的原数组不会受到任何影响。

错误代码示例：

let arr = [{name:'set1',a:1}];

function updateOrAdd(obj) {
  let arr = []; // 这里声明了局部arr，和外部arr无关
  const existingIdx = arr.findIndex(item => item.name === obj.name);
  // ...后续操作都是针对局部arr
}

修复方案：
删除函数内部的数组声明，确保操作的是外部的目标数组：

let arr = [{name:'set1',a:1}];

function updateOrAdd(obj) {
  // 去掉这里的let arr = []
  const existingIdx = arr.findIndex(item => item.name === obj.name);
  if (existingIdx !== -1) {
    arr[existingIdx].a = obj.a;
  } else {
    arr.push(obj);
  }
}

4. name属性的类型不匹配 #

如果原数组中元素的name是字符串类型，而你传入的对象name是数字类型（比如{name:1, a:2}），那么===严格相等比较会失败，导致无法匹配到原元素，进而执行添加逻辑。

错误代码示例：

const arr = [{name:'set1',a:1}];

updateOrAdd({name:1, a:2}); // name是数字，和原字符串'set1'不匹配

修复方案：
统一name的类型后再比较，比如都转为字符串：

const existingIdx = arr.findIndex(item => String(item.name) === String(obj.name));

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