如何在JavaScript中移除数组内对象元素并添加至同数组另一对象

需求：从数组中id为column-1的对象的itemIds数组里移除元素"2163"，并将该元素添加至id为column-2的对象的itemIds数组中。

原始数组示例 #

[
  {
    "id": "column-1",
    "title": "New",
    "itemIds": [
      "2163",
      "3477",
      "9639"
    ]
  },
  {
    "id": "column-2",
    "title": "Active",
    "itemIds": [
      "6018",
      "7028",
      "4491"
    ]
  },
  {
    "id": "column-3",
    "title": "Resolved",
    "itemIds": [
      "9156"
    ]
  },
  {
    "id": "column-4",
    "title": "Closed",
    "itemIds": [
      "3773",
      "6317",
      "6868"
    ]
  }
]

尝试的代码 #

let activeitemId = 2163;
let truncatedvalue= columns[indexOfactiveColumn].itemIds.filter(function(e) { 
  return e !== activeitemId 
})

let addedvalue = [...columns[indexOfoverColumn].itemIds,activeitemId];
const label = 'itemIds';
const newValue = truncatedvalue;
const addednewvalue = addedvalue;
const updatedArray = [
  ...columns.slice(0, indexOfactiveColumn),
  {  
    ...columns[indexOfactiveColumn],
    [label]: newValue,
  },
  ...columns.slice(indexOfactiveColumn + 1),
];

console.log('columnall-updatedArray',updatedArray); 

优化后的解决方案 #

你的代码只处理了移除元素的列，未处理添加元素的列；另外activeitemId是数字类型，但原始数组内的itemIds元素是字符串，会导致filter判断失效，需要统一类型。

完整实现代码：

const columns = [/* 此处放入原始数组 */];
const targetItemId = "2163"; // 和数组内元素类型保持一致
const sourceColumnId = "column-1";
const targetColumnId = "column-2";

// 生成更新后的数组，不修改原数组
const updatedColumns = columns.map(column => {
  if (column.id === sourceColumnId) {
    // 移除目标元素
    return {
      ...column,
      itemIds: column.itemIds.filter(id => id !== targetItemId)
    };
  }
  if (column.id === targetColumnId) {
    // 添加目标元素
    return {
      ...column,
      itemIds: [...column.itemIds, targetItemId]
    };
  }
  // 其他列保持不变
  return column;
});

console.log('更新后的数组', updatedColumns);

说明 #

• 用map遍历数组，无需手动处理索引，代码更简洁易读
• 保持原数组不可变，所有修改都返回新对象/新数组
• 统一targetItemId的类型为字符串，确保判断逻辑准确
• 一次遍历同时完成移除和添加两个操作，效率更高

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