向数组推送新值时覆盖原有元素的技术问题排查

你遇到的问题核心在于JavaScript中数组是引用类型。当你把pair数组push到colors时，并没有复制pair的内容，而是将指向pair数组的内存引用存入了colors。因此colors里的所有元素本质上都是指向同一个pair数组的指针——每次修改pair的内容，所有引用它的位置都会同步变化，最终所有元素都会变成最后一次修改的值。

方法1：每次创建新的pair数组 #

不再复用同一个pair变量，每次需要新增键值对时，重新创建空数组：

function myFunction() {
  var colors = []

  // 第一次push
  var pair = []
  pair[0] = 'R'
  pair[1] = 'Red'
  colors.push(pair)

  // 第二次push
  pair = [] // 重新生成新数组
  pair[0] = 'B'
  pair[1] = 'Blue'
  colors.push(pair)

  // 第三次push
  pair = []
  pair[0] = 'G'
  pair[1] = 'Green'
  colors.push(pair)

  Logger.log('colors= ')
  Logger.log(colors) // 输出预期结果：[[R, Red],[B, Blue],[G, Green]]
}

方法2：push时复制pair数组的副本 #

如果想复用pair变量，可以在push时生成它的副本，让colors存储独立的数组实例：

function myFunction() {
  var colors = []
  var pair = []

  // 第一次push
  pair[0] = 'R'
  pair[1] = 'Red'
  colors.push([...pair]) // 扩展运算符创建副本

  // 第二次push
  pair[0] = 'B'
  pair[1] = 'Blue'
  colors.push(pair.slice()) // slice()方法创建副本

  // 第三次push
  pair[0] = 'G'
  pair[1] = 'Green'
  colors.push(Array.from(pair)) // Array.from创建副本

  Logger.log('colors= ')
  Logger.log(colors) // 输出预期结果：[[R, Red],[B, Blue],[G, Green]]
}

两种方法都能让colors存储独立的数组元素，避免后续修改覆盖之前的值。

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