JavaScript map方法逻辑解析及二维数组插入元素问题排查

你的代码存在两个核心用法错误，导致输出不符合预期：

• 方法用错：插入数组元素需要用splice方法，你用的slice是数组截取方法，仅支持传入起始、结束两个索引参数，不会修改原数组，也不支持插入元素的能力。你给slice传入(2, 0, "Hello")时，因为起始索引2大于结束索引0，方法直接返回空数组，这就是你输出全为空的直接原因。
• 返回值逻辑错：就算替换成splice，该方法的返回值是被删除的元素组成的数组，不是修改后的完整数组，直接拿返回值包装后返回也拿不到正确结果。

function array () {
  let numbers = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
  // 预期输出：[[1, 2, "Hello", 3], [4, 5, "Hello", 6], [7, 8, "Hello", 9]]
  let newNumbers = numbers.map(function (row) {
    // 先拷贝子数组，避免修改原numbers内的原始数据，不需要保留原数据可省略这步
    const targetRow = [...row]
    // 从索引2的位置开始，删除0个元素，插入"Hello"
    targetRow.splice(2, 0, "Hello")
    return targetRow
  })

  Logger.log(newNumbers);
}

• slice(start, end)：非修改式方法，不会改动原数组，返回原数组中索引从start到end（不含end）的片段组成的新数组，常用于数组浅拷贝、片段截取。
• splice(start, deleteCount, ...insertItems)：修改式方法，会直接改动调用它的原数组，执行逻辑是从start位置开始，删除deleteCount个元素，再将后续传入的insertItems依次插入到该位置，返回值是本次操作被删除的元素组成的数组。

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