使用splice删除数组元素后如何将所有被移除元素汇总存入新数组

问题根源 #

你当前代码中用于存储删除元素的shallowCopy数组定义在toArchive函数内部，每次调用该函数都会重新初始化一个空数组，因此只能存储单次删除操作的元素，无法累计历史删除的所有内容。另外你代码中的filter方法属于冗余逻辑，没有接收返回值也没有产生任何实际作用，可以直接删除。

修复方案 #

方案1：使用外部作用域变量存储汇总结果

将存储删除元素的数组提到toArchive函数外部，保证变量不会在每次函数调用时被重置：

// 定义在函数外部，持久化存储所有被删除的元素
const deletedElements = []

const toArchive = (arr, index) => {
    // 直接将splice返回的被删除元素追加到汇总数组
    deletedElements.push(...arr.splice(index, 1))
    listToView(arr)
    // 打印的是累计的汇总数组，删除4次后就会得到长度为4的结果
    console.log(deletedElements)
}

方案2：使用闭包避免污染全局作用域

如果不想声明全局变量，可以用闭包封装存储汇总结果的数组：

const createArchiveHandler = () => {
  const deletedElements = []
  return (arr, index) => {
    deletedElements.push(...arr.splice(index, 1))
    listToView(arr)
    console.log(deletedElements)
  }
}

// 初始化删除处理函数
const toArchive = createArchiveHandler()

原理说明 #

Array的splice方法本身就会返回由所有被删除元素组成的数组，每次调用删除操作时将这部分内容追加到持久化存储的数组中，即可累计得到所有被删除元素的汇总集合。

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