JavaScript如何在数组的指定索引位置插入对象

直接用JS原生提供的splice方法就能搞定，不需要额外引入工具库，分两种常见场景给你实现：

方案1：直接修改原数组（最常用） #

splice方法本身就是用来对数组做增删改操作的，接收3个核心参数：

• 第一个参数：操作起始的索引位置
• 第二个参数：从起始位置开始要删除的元素个数，插入场景传0就行，代表不删除原有元素
• 第三个及之后的参数：要插入到起始位置的元素

直接封装成通用函数就行，我加了索引边界处理，避免传错索引出问题：

function insertAt(arr, index, item) {
  // 容错处理：索引小于0就插开头，大于数组长度就插末尾
  const realIndex = Math.max(0, Math.min(index, arr.length));
  arr.splice(realIndex, 0, item);
  return arr;
}

// 测试用例
const inputArray = [
  { _id: "D01", name: "Sky" },
  { _id: "D02", name: "Space" },
  { _id: "D03", name: "Black" },
  { _id: "D04", name: "Yello" },
];
const dataToBeInserver = { _id: "A01", name: "Watch" };

// 插入到索引2位置
insertAt(inputArray, 2, dataToBeInserver);

执行后inputArray的结果如下，新对象正好插在索引2的位置，原来索引2及之后的元素自动往后顺移一位：

[
  { _id: 'D01', name: 'Sky' },
  { _id: 'D02', name: 'Space' },
  { _id: 'A01', name: 'Watch' }, // 新插入的元素
  { _id: 'D03', name: 'Black' },
  { _id: 'D04', name: 'Yello' }
]

方案2：不修改原数组，返回全新数组 #

如果你的场景要求原数组不能被改动（比如React状态更新这类不可变数据场景），就用数组切片+展开运算符的写法：

function insertAtPure(arr, index, item) {
  const realIndex = Math.max(0, Math.min(index, arr.length));
  return [
    ...arr.slice(0, realIndex), // 切出插入位置之前的元素
    item, // 放要插入的新元素
    ...arr.slice(realIndex) // 拼上插入位置之后的元素
  ];
}

// 调用后原数组不变，返回的新数组是插入后的结果
const newArray = insertAtPure(inputArray, 2, dataToBeInserver);

注意点 #

• 不做边界处理直接调用splice的话，传入负数索引会从数组末尾倒计数插入，传入超过数组长度的索引会直接插在末尾，不符合常规预期，建议加上上面的容错逻辑。
• 插入的如果是对象类型，是引用传递，后续修改原对象会同步影响数组里存的这个对象值。

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