数组移位时的Javascript内存优化

Question

我的项目中有更改历史。History 是一个由对象组成的数组，其中每个对象有 2 个数组。

所以当我添加历史快照时，它看起来像这样（但实际上我没有添加空数组）：

history.push({   //new history moment  

    firstP:  [],

    secondP: [],

 })

例如数组 firstP 由如下对象组成：

{

    color: "red",

    move: 1,

    ... and some other fields (max 14 fields if it matters)

}

firstP 和 secondP 通常拥有数千个对象。所以每个历史快照对于内存来说都是相当沉重的。所以我添加了限制

const limitOfSteps = 50;

现在每次推送后，我都会检查历史长度是否不大于 50。如果是，我会执行 history.shift();

但是我在记忆中看到的是，即使在移动（删除数组中的第一个元素）时，使用的内存也在增加。当用户在 react 应用程序中执行某些操作时，该元素会添加到历史记录中，因此他可以根据需要进行尽可能多的更改。

我知道有垃圾收集器，但它如何与数组一起工作？移动数组应该意味着元素已经消失（并且也从内存中消失了？）但它并没有立即消失（如果用户将快速进行更改，那么整个应用程序将内存不足）。

将删除的元素（就在移动数组之前）更改为 undefined 或 null 会使内存更快地释放吗？

主要目标是使用更少的内存......有人知道怎么做吗？

编辑：数组可能会移动一千次。

Edit2（也许我的问题全错了？也许我应该问一下整个数组何时被删除？）这一切都在状态下的反应应用程序中。

切片历史（进行复制）可能会消耗更多内存，但这是不可避免的，因为状态是不可变的。我的更新方法如下所示：

updateHistory = (newElement) => {

    const history = this.state.history.slice();

    history.push(newElement);

    if(history.length - 1 > 50) history.shift();

    this.setState({history: history});

}

这有什么意义吗？

Answer 1

垃圾收集是在 JavaScript 中自动完成的，您不必自己管理。这也是为什么您在从数组中移动项目时看到内存增加的原因，尽管您将大小限制为 50。您不能强制或阻止垃圾收集，但是当它运行时，它会在不引用它的情况下删除值。

Answer 2

一个对象被称为“垃圾”，如果有零个指向它的引用，则称为可收集的。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management与该方法相关联，您可以尝试删除变量引用。例子：var a = 1;var array = [a, 2, 3, 4];a = null;array.shift();// orvar array = [1, 2, 3, 4];array[0] = null;array.shift();