数组移位时的Javascript内存优化

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

因此，当我添加历史快照时，它看起来是这样的（但实际上我并没有添加空数组）：

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

{
    color: "red",
    move: 1,
    ... and some other fields (max 14 fields if it matters)
}

updateHistory = (newElement) => {
    const history = this.state.history.slice();
    history.push(newElement);
    if(history.length - 1 > 50) history.shift();
    this.setState({history: history});
}

firstP和secondP通常容纳数千个对象。 因此，每个历史快照的内存都非常大。 所以我增加了限制

const limitOfSteps = 50;

现在，在每次推后，我检查历史的长度是否不超过50。 如果是，我做历史

但我在记忆中看到的是，即使在移位（移除数组中的第一个元素）时，使用的内存也在增加。当用户在react应用程序中执行某项操作时，该元素会添加到历史记录中，以便他可以根据自己的意愿进行任意多的更改

我知道有垃圾收集器，但它是如何处理阵列的？ 移动数组应该意味着元素已经消失（也从内存中消失了？） 但它并没有立即消失（如果用户很快做出更改，那么整个应用程序都会消失） 将内存不足）

将移除的元素（在移动数组之前）更改为未定义或null会使内存释放更快吗

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

编辑： 阵列甚至可以移动上千次

Edit2（也许我的问题全错了？也许我应该问一下，当整个阵列被移除时是否会发生这种情况？） 这一切都在状态下的react应用程序中

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

{
    color: "red",
    move: 1,
    ... and some other fields (max 14 fields if it matters)
}

updateHistory = (newElement) => {
    const history = this.state.history.slice();
    history.push(newElement);
    if(history.length - 1 > 50) history.shift();
    this.setState({history: history});
}

---

这有什么意义吗？

垃圾收集是在JavaScript中自动完成的，您不必自己管理它。这也是为什么在从阵列中移动项目时，内存会增加，尽管将大小限制为50

---

您不能强制或阻止垃圾收集，但当它运行时，它会在不引用它的情况下删除值。

垃圾收集是在JavaScript中自动完成的，您不必自己管理。这也是为什么在从阵列中移动项目时，内存会增加，尽管将大小限制为50

您不能强制或阻止垃圾收集，但当它运行时，它会在不引用它的情况下删除值

一个对象被称为“垃圾”，如果没有指向它的引用，那么它就是可回收的。

您可以尝试删除变量引用。例如：

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

一个对象被称为“垃圾”，如果没有指向它的引用，那么它就是可回收的。

您可以尝试删除变量引用。例如：

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

---

. 它不会移除任何东西。我是说“移位”对不起。我编辑了这个问题，你能给我们看一下限制数组为50个元素的代码吗？好的，我更新了所有内容，请阅读…为了减少你疯狂的开销，我在这里写了一些非常棒的概念代码，永远不会看到光明。它不会移除任何东西。我是说“移位”对不起。我编辑了这个问题，你能给我们展示一下将数组限制在50个元素的代码吗？好的，我更新了所有内容，请阅读…为了减少你疯狂的开销，我在这里写了一些真正的lols概念代码，它们永远不会出现。