JavaScript中按ID更新数组对象并保证orderval连续有序

场景与需求 #

给定对象数组listarr，传入id和orderval两个参数，需完成以下操作：

• 若数组中存在相同id的对象，更新其orderval值；
• 更新后的数组需保证orderval值（忽略null）连续有序，若存在重复则递增调整至无重复的连续序列。

示例代码 #

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

var pid = 44; var pvalue = 2

预期输出 #

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

尝试的代码 #

// 根据相同id更新orderval
var updateList = list.map(e=> ({
  ...e,
  orderval: e.id===pid ? pvalue : e.orderval
}))

// 处理连续顺序
var result = updateList.map(i => ({
  ...e, // 此处e未定义，存在语法错误
  orderval: (i.orderval !== pvalue && i.orderval > pvalue) ? (i.orderval || 0)+1 : i.orderval
}));

补充场景 #

当var pid = 44; var pvalue = null;时，更新后的数组为：

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

此时无重复的orderval，但序列不连续，需调整为：

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

解决方案 #

要实现需求，需分步骤完成目标对象更新、非null值的去重与连续化调整，同时保留原数组的元素顺序与其他属性。

完整代码实现：

function updateAndFixOrder(list, pid, pvalue) {
  // 第一步：更新对应id的orderval
  const updatedList = list.map(item => 
    item.id === pid ? { ...item, orderval: pvalue } : { ...item }
  );

  // 第二步：提取所有非null的orderval并排序，生成连续映射关系
  const validOrders = updatedList
    .filter(item => item.orderval !== null)
    .map(item => item.orderval)
    .sort((a, b) => a - b);

  // 去重并生成从1开始的连续序列映射
  const orderMap = new Map();
  let currentSeq = 1;
  validOrders.forEach(order => {
    if (!orderMap.has(order)) {
      orderMap.set(order, currentSeq++);
    }
  });

  // 第三步：根据映射关系调整数组的orderval
  return updatedList.map(item => {
    if (item.orderval === null) return item;
    return { ...item, orderval: orderMap.get(item.orderval) };
  });
}

// 测试示例场景
const list = [
  { id: 10, orderval: null, color : 'red' },
  { id: 23, orderval: 1, color: 'blue' },
  { id: 13, orderval: 4, color: 'yellow' },
  { id: 44, orderval: 3, color: 'black' },
  { id: 55, orderval: 2, color: 'indigo' },
];

// 测试第一个场景
console.log(updateAndFixOrder(list, 44, 2));
// 输出符合预期

// 测试补充场景
console.log(updateAndFixOrder(list, 44, null));
// 输出符合补充场景的预期

代码说明 #

1. 更新目标对象：通过map遍历数组，匹配到目标id时更新orderval，其余对象原样复制，避免修改原数组。
2. 生成连续序列映射：提取所有非null的orderval，排序后去重，为每个唯一值分配从1开始的连续序号，用Map存储映射关系。
3. 调整数组orderval：再次遍历数组，将非null的orderval替换为映射后的连续序号，null值保持不变。

该方案同时解决了重复值与序列不连续的问题，且完整保留原数组的元素顺序和其他属性。

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