JavaScript如何将对象插入数组指定索引？splice方法未达预期

JavaScript 原生数组的splice()方法默认逻辑为：如果传入的插入起始索引大于数组当前长度，不会自动填充起始位置到数组末尾之间的空位，会直接把待插入元素追加到数组尾部，表现和push()一致，无法自动补全插入位置前的undefined占位。

插入前先判断数组当前长度和目标索引的大小关系，如果数组长度小于等于目标索引，先把数组长度扩容到目标索引值，中间未赋值的空位会自动填充为undefined，之后再执行splice()插入即可。

修正后的完整代码：

let arr = [];

function addToArray(index){
    // 以下变量请替换为业务场景下的实际有效值，否则会触发引用错误
    let comment = value;
    let score = scoreType;
    let scorenow = score;
    let id = id;

    // 长度不足时先扩容补位
    if (arr.length <= index) {
        arr.length = index;
    }
    // 指定位置插入对象
    arr.splice(index, 0, {comment, score, scorenow, id});
}

执行addToArray(2)时的运行逻辑：

• 初始空数组arr长度为0，小于目标索引2
• 将arr.length设置为2，此时数组为[undefined, undefined]
• 在索引2的位置插入目标对象，最终返回结果为[undefined, undefined, {comment, score, scorenow, id}]，完全符合预期。

补充：如果需要兼容传入负数索引的场景，可以在函数入口先加索引合法性校验，把负数索引转换为从数组末尾计算的正索引，不符合要求的索引直接抛出错误即可。

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