数组连续项下移功能异常：选中项交替切换问题求助

我来帮你分析下这个问题的根源，然后给出修复方案～

问题原因 #

你当前的moveDown方法存在两个关键问题：

1. 遍历过程中直接修改原数组：当连续选中多个项时，遍历到前面的项并交换位置后，会影响后续遍历的项的位置，导致连续项出现“来回切换”的异常。比如选中索引0和1的项，先交换0和1，接下来遍历到索引1时，此时的项是原来的索引0的项，它依然处于选中状态，会再次触发交换操作，最终导致两项又换回去。
2. 选中状态的反复修改：先把项的selected设为false，之后又通过tempItem重新设置为true，这个过程不仅冗余，还可能导致遍历过程中选中状态判断出错。

修复方案 #

我们可以调整逻辑，先收集所有需要下移的项的索引，然后倒序处理这些索引（避免修改数组后影响未处理的索引），直接交换位置并保留选中状态：

moveDown() {
  // 第一步：收集所有需要下移的项的索引（排除最后一项）
  const moveIndices = this.selectedItems
    .map((item, index) => {
      return item.selected && index !== this.selectedItems.length - 1 ? index : -1;
    })
    .filter(index => index !== -1);

  // 第二步：倒序处理索引，避免连续项互相干扰
  moveIndices.sort((a, b) => b - a).forEach(index => {
    // 交换当前项和下一项
    const temp = this.selectedItems[index];
    this.selectedItems[index] = this.selectedItems[index + 1];
    this.selectedItems[index + 1] = temp;
    // 选中状态会跟着项一起移动，不需要额外修改
  });
}

逻辑说明 #

• 收集索引：先筛选出所有选中且不是最后一项的索引，避免遍历过程中修改数组导致的位置混乱。
• 倒序处理：比如要处理索引0和1，先处理索引1，再处理索引0。这样处理索引1时交换1和2，不会影响索引0的位置；之后处理索引0时交换0和1，此时的索引1已经是原来的2项，不会和之前的操作冲突。
• 保留选中状态：因为我们直接交换数组元素的位置，项本身的selected属性不会改变，所以不需要额外修改选中状态，自然会跟着项移动到新位置。

这样修改后，连续选中的项就能正常整体下移，不会出现相互切换的异常啦～

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