JavaScript中实现对象数组间元素移位插入的需求

需求说明 #

• 新值始终添加到第一个对象的list数组中
• 若第一个对象的list已有元素，将该元素移至第二个对象的list；若第二个对象list也有元素，继续向后传递，以此类推

问题现象 #

执行原代码后，添加item2得到的结果不符合预期：前两个对象的list都包含item2，第三个对象的list为['item1']，但预期应为第一个对象list是['item2']，第二个是['item1']，第三个为空。

原代码问题分析 #

1. while循环中多次执行arr[current].list.push(item)，导致新元素被重复添加到后续对象的list中
2. 仅处理了当前对象与下一个对象的单次元素移动，未实现元素依次向后传递的完整逻辑

修正后的代码 #

function addItem(arr, item) {
  // 取出第一个对象的现有元素，为空则返回undefined
  let movedItem = arr[0].list.shift();
  // 将新元素放入第一个对象的list
  arr[0].list.push(item);

  // 从第二个对象开始，依次传递元素
  for (let i = 1; i < arr.length && movedItem !== undefined; i++) {
    // 暂存当前对象的现有元素
    const temp = arr[i].list.shift();
    // 把上一个对象传过来的元素加入当前list
    arr[i].list.push(movedItem);
    // 更新待传递元素为当前对象原来的元素
    movedItem = temp;
  }
}

// 示例测试
const item1 = 'item1';
const item2 = 'item2';
const myArr = [
  {name:'one', list:[]},
  {name:'two', list:[]},
  {name:'three', list:[]}
];

addItem(myArr, item1);
console.log('添加item1后:', myArr);
// 输出: [{name:'one', list:['item1']}, {name:'two', list:[]}, {name:'three', list:[]}]

addItem(myArr, item2);
console.log('添加item2后:', myArr);
// 输出: [{name:'one', list:['item2']}, {name:'two', list:['item1']}, {name:'three', list:[]}]

代码逻辑说明 #

1. 先取出第一个对象list中的元素（无元素则为undefined），直接将新元素放入第一个对象的list
2. 从第二个对象开始遍历：
   • 暂存当前对象list的现有元素
   • 将上一个对象传递过来的元素放入当前对象的list
   • 更新待传递元素为当前对象原来的元素，继续向后传递
3. 当没有元素可传递（movedItem为undefined）或遍历完所有对象时停止

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