TypeScript与Angular中多维数组赋值异常问题求助

问题 #

将filaCalendario推入filasCalendario后，调用splice(0)清空filaCalendario准备存入新值，结果发现filasCalendario也变成了空数组。首次推入后控制台能看到数据，清空后就为空了。相关代码如下：

filaCalendario: string[] = [];
filasCalendario: string[][] = [];

crearFila(){
for (let actividad of this.listaActividades) {
  this.filaCalendario.push(actividad.faseId);
  this.filaCalendario.push(actividad.descripcion);
  for (let dia of this.cabeceraCalendarioNumeroDiaDeLaQuincena) {
    if (new Date(actividad.fecha).getDate() == dia) {
      this.filaCalendario.push(actividad.duracion.toString());
    }
    else {
      this.filaCalendario.push("");
    }
  }

   this.filasCalendario.push(this.filaCalendario);

   this.filaCalendario.splice(0);
  }
  console.log(this.filasCalendario);
 }
}

原因 #

这是因为数组是引用类型，你把filaCalendario推入filasCalendario时，并没有存入数组的副本，而是存入了指向该数组的内存地址引用。后续调用splice(0)清空原数组，本质上是修改了这个内存地址指向的数组内容，所以filasCalendario里的所有元素（其实都是同一个数组的引用）都会跟着变成空数组。

解决方案 #

有两种常见的解决方式：

方式1：每次循环新建一个filaCalendario数组 #

在循环内部初始化数组，避免复用同一个引用：

filasCalendario: string[][] = [];

crearFila(){
for (let actividad of this.listaActividades) {
  // 每次循环新建数组，避免复用同一个引用
  const filaCalendario: string[] = [];
  filaCalendario.push(actividad.faseId);
  filaCalendario.push(actividad.descripcion);
  for (let dia of this.cabeceraCalendarioNumeroDiaDeLaQuincena) {
    if (new Date(actividad.fecha).getDate() == dia) {
      filaCalendario.push(actividad.duracion.toString());
    }
    else {
      filaCalendario.push("");
    }
  }

   this.filasCalendario.push(filaCalendario);
  }
  console.log(this.filasCalendario);
 }
}

方式2：推入时创建数组副本 #

如果需要保留外部的filaCalendario变量，可以在push的时候通过扩展运算符或slice()创建数组副本：

filaCalendario: string[] = [];
filasCalendario: string[][] = [];

crearFila(){
for (let actividad of this.listaActividades) {
  this.filaCalendario.push(actividad.faseId);
  this.filaCalendario.push(actividad.descripcion);
  for (let dia of this.cabeceraCalendarioNumeroDiaDeLaQuincena) {
    if (new Date(actividad.fecha).getDate() == dia) {
      this.filaCalendario.push(actividad.duracion.toString());
    }
    else {
      this.filaCalendario.push("");
    }
  }

   // 推入数组的副本，而非原引用
   this.filasCalendario.push([...this.filaCalendario]);
   // 或者用slice()：this.filasCalendario.push(this.filaCalendario.slice());

   this.filaCalendario.splice(0);
  }
  console.log(this.filasCalendario);
 }
}

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