JavaScript移动数组元素并偏移其余元素的更优实现方案？

原生方法最优实现 #

直接用JS内置的Array.prototype.splice方法即可实现，无需自己写循环逻辑，代码简洁易维护：
splice支持同时完成元素删除和插入操作，核心逻辑为：先从旧索引位置移除目标元素，再将该元素插入到新索引位置即可。

function moveArrayElement(arr, oldIndex, newIndex) {
  // 先做边界校验，避免索引越界
  const len = arr.length;
  if (oldIndex < 0 || oldIndex >= len || newIndex < 0 || newIndex >= len) {
    return arr;
  }
  // 索引相同无需移动
  if (oldIndex === newIndex) return arr;

  // 移除旧位置元素，插入到新位置
  const targetElement = arr.splice(oldIndex, 1)[0];
  arr.splice(newIndex, 0, targetElement);
  return arr;
}

// 测试用例
const arr = ['100', 'A', 'B', 'C', 'D', 'E', 'F'];
console.log(moveArrayElement(arr, 0, 6)); // 输出 ["A", "B", "C", "D", "E", "F", "100"]

单循环实现方案 #

如果需要自己通过循环实现，无需分两个分支写逻辑，只要根据新旧索引的大小确定遍历步长，即可用单个循环完成：

function moveArrayElementSingleLoop(arr, oldIndex, newIndex) {
  const len = arr.length;
  if (oldIndex < 0 || oldIndex >= len || newIndex < 0 || newIndex >= len || oldIndex === newIndex) {
    return arr;
  }

  const target = arr[oldIndex];
  // 确定遍历步长：新索引更大就往前遍历，反之往后遍历
  const step = newIndex > oldIndex ? 1 : -1;

  for (let i = oldIndex; i !== newIndex; i += step) {
    arr[i] = arr[i + step];
  }
  // 最后把目标元素放到新位置
  arr[newIndex] = target;
  return arr;
}

// 测试用例
const arr2 = ['100', 'A', 'B', 'C', 'D', 'E', 'F'];
console.log(moveArrayElementSingleLoop(arr2, 0, 6)); // 输出 ["A", "B", "C", "D", "E", "F", "100"]

两种方案性能差异极小，日常开发优先选择splice的实现即可，代码量最少也不容易出bug。

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