数组移位时的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（也许我的问题全错了？也许我应该问一下整个数组何时被删除？） 都是在react app中的状态。

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

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();

// or

var array = [1, 2, 3, 4];
array[0] = null;
array.shift();