如何在带position属性的对象数组中插入删除元素并更新位置

1. 插入新对象到指定位置 #

核心逻辑：给新元素设置目标插入位置，将原数组中所有position大于等于目标位置的元素后移一位（position+1），最后把新元素加入数组并按position排序保证顺序。

function insertItem(arr, newItem, targetPosition) {
  // 给新元素赋值目标位置
  newItem.position = targetPosition;
  // 让所有需要后移的元素position加1
  arr.forEach(item => {
    if (item.position >= targetPosition) {
      item.position += 1;
    }
  });
  // 添加新元素到数组
  arr.push(newItem);
  // 按position重新排序，确保展示顺序正确
  arr.sort((a, b) => a.position - b.position);
}

示例用法：

let items = [
  { position: 1, name: 'A' },
  { position: 2, name: 'B' },
  { position: 3, name: 'C' }
];
// 插入到position=2的元素之前
insertItem(items, { name: '新元素' }, 2);
// 处理后数组：
// [
//   { position: 1, name: 'A' },
//   { position: 2, name: '新元素' },
//   { position: 3, name: 'B' },
//   { position: 4, name: 'C' }
// ]

2. 删除指定位置的对象 #

核心逻辑：先移除目标position的元素，再将原数组中所有position大于目标位置的元素前移一位（position-1）。

如果需要返回新数组：

function deleteItem(arr, targetPosition) {
  // 过滤掉要删除的元素
  const filteredArr = arr.filter(item => item.position !== targetPosition);
  // 让需要前移的元素position减1
  filteredArr.forEach(item => {
    if (item.position > targetPosition) {
      item.position -= 1;
    }
  });
  return filteredArr;
}

如果需要直接修改原数组：

function deleteItemInPlace(arr, targetPosition) {
  // 找到目标元素的索引
  const targetIndex = arr.findIndex(item => item.position === targetPosition);
  if (targetIndex === -1) return; // 没找到目标元素直接返回
  // 删除目标元素
  arr.splice(targetIndex, 1);
  // 更新剩余元素的position
  arr.forEach(item => {
    if (item.position > targetPosition) {
      item.position -= 1;
    }
  });
}

示例用法：

let items = [
  { position: 1, name: 'A' },
  { position: 2, name: 'B' },
  { position: 3, name: 'C' }
];
// 删除position=2的元素（返回新数组方式）
items = deleteItem(items, 2);
// 处理后数组：
// [
//   { position: 1, name: 'A' },
//   { position: 2, name: 'C' }
// ]

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