如何将files.splice返回的对象取出存入splicedFiles以避免二维数组？

问题场景 #

使用files.splice(index, 1)删除元素时，该方法返回的是包含被删除元素的数组，但splicedFiles本身已是数组，直接用push()添加返回值会生成不符合需求的二维数组。需要把返回数组里的对象单独取出，存入splicedFiles，而不是存入数组对象。

示例数组格式：

const arr = [
    {
        "id": 290,
        "size": 50461,
    },
]

原TS代码：

splicedFiles = new Array();
removeFile(files: any, index: number) {
  return this.splicedFiles.push(files.splice(index, 1));
}

问题原因 #

Array.splice()方法的返回值是包含所有被删除元素的数组——哪怕只删除一个元素，返回的也是长度为1的数组。直接用push()把这个数组加到splicedFiles里，就会形成[[被删除对象]]的二维数组结构，不符合预期。

解决方案 #

方案1：直接取返回数组的第一个元素 #

既然确定只删除一个元素，直接从返回数组中取出下标为0的元素，再添加到splicedFiles：

splicedFiles = new Array();
removeFile(files: any, index: number) {
  // 取出被删除的单个元素
  const deletedItem = files.splice(index, 1)[0];
  // 将元素推入目标数组
  return this.splicedFiles.push(deletedItem);
}

方案2：使用展开运算符（推荐，扩展性更强） #

用ES6的展开运算符...把返回数组里的元素展开，一次性推入splicedFiles。哪怕以后需要删除多个元素（比如splice(index, 2)），代码也不需要修改：

splicedFiles = new Array();
removeFile(files: any, index: number) {
  // 展开返回数组的元素，直接推入目标数组
  return this.splicedFiles.push(...files.splice(index, 1));
}

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