JavaScript中基于条件高效更新对象数组：不可变性与map()实践

var list = [
  { id: 10, val: null, color: 'red' },
  { id: 23, val: 1, color: 'blue' },
  { id: 13, val: 3, color: 'yellow' },
  { id: 44, val: 4, color: 'black' },
  { id: 55, val: 2, color: 'indigo' },
];

var paramId = 44;
var paramValue = 3;

// 原始尝试的问题示例
let result = [];
for (const item of list) {
  // 这里的条件判断和赋值逻辑与期望不符
  // 并且只在条件满足时才push，导致结果数组不完整
  if (item.val === paramValue && item.id !== paramId) {
    item.val = item.val ?? item.val + 1; // ??操作符在这里可能不是期望的行为
    result.push(item); // 仅push满足条件的项
  } else {
    // 未满足条件的项不会被添加到result中
  }
}
console.log(result); // 结果数组会比原数组小，且未更新paramId对应的项

const list = [
  { id: 10, val: null, color: 'red' },
  { id: 23, val: 1, color: 'blue' },
  { id: 13, val: 3, color: 'yellow' },
  { id: 44, val: 4, color: 'black' },
  { id: 55, val: 2, color: 'indigo' },
];

/**
 * 根据指定条件更新对象数组中的值，并返回一个新数组。
 *
 * @param {number} targetId - 需要特殊处理的ID。
 * @param {number} updateValue - 用于更新targetId对应项的值，以及作为其他项递增的匹配值。
 * @returns {Array<Object>} 更新后的新对象数组。
 */
const updateList = (targetId, updateValue) =>
  list.map((item) => {
    // 使用对象扩展运算符创建一个当前项的浅拷贝
    const newItem = { ...item };

    if (newItem.id === targetId) {
      // 如果id与targetId相同，则直接将val设置为updateValue
      newItem.val = updateValue;
    } else if (newItem.val === updateValue) {
      // 如果id与targetId不同，且val与updateValue相同，则将val递增1
      // (newItem.val || 0) + 1 确保null值被视为0进行计算
      newItem.val = (newItem.val || 0) + 1;
    }
    // 其他情况（id不同且val不等于updateValue），newItem.val保持不变
    return newItem;
  });

// 示例用法
console.log("--- paramId = 44, paramValue = 3 ---");
console.log(updateList(44, 3));
/* 期望输出:
[
  { id: 10, val: null, color: 'red' },
  { id: 23, val: 1, color: 'blue' },
  { id: 13, val: 4, color: 'yellow' }, // val=3 匹配 paramValue=3, 递增为4
  { id: 44, val: 3, color: 'black' }, // id=44 匹配 paramId=44, 更新为paramValue=3
  { id: 55, val: 2, color: 'indigo' }
]
*/

console.log("\n--- paramId = 13, paramValue = 2 ---");
console.log(updateList(13, 2));
/* 期望输出:
[
  { id: 10, val: null, color: 'red' },
  { id: 23, val: 1, color: 'blue' },
  { id: 13, val: 2, color: 'yellow' }, // id=13 匹配 paramId=13, 更新为paramValue=2
  { id: 44, val: 4, color: 'black' },
  { id: 55, val: 3, color: 'indigo' }  // val=2 匹配 paramValue=2, 递增为3
]
*/