Javascript数组位移时的内存优化

Question

我在我的项目历史记录中有更改的历史。历史是一个数组，其中每个对象都有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应用程序中执行某些操作时，该元素将添加到历史记录中，因此他可以随心所欲地进行多次更改。

我知道有垃圾回收器，但它如何处理数组呢？移位数组应该意味着该元素已经消失了（并且从内存中消失了？），但它不会立即消失（如果用户快速进行更改，则整个应用程序将耗尽内存）。

在移位数组之前（刚好在删除元素之前）将被删除的元素更改为未定义或null是否会更快地释放内存？

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

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

编辑2（也许我的问题完全错了？也许我应该问的是当整个数组被删除时？） 这都在React应用程序中的状态中。

可能切片历史记录（进行复制）会更耗费内存，但这是不可避免的，因为状态是不可变的。我的更新方法看起来像这样：

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

这有任何意义吗？

- emsiiggy

---

unshift() "在数组的开头添加一个或多个元素"。它不会移除任何元素。 - undefined

对不起，我是说"shift"。抱歉，我修改了问题。 - undefined

你能给我们展示一下将数组限制在50个元素的代码吗？ - undefined

好的，我已经更新了所有内容，请阅读。 - undefined

为了减少你们庞大的开销，我写了一些非常有趣的概念代码，但这些代码永远不应该被使用。https://jsfiddle.net/3ajuyqz1/5/ - undefined

我猜真正重要的是用“成千上万个元素”填充firstP和secondP的代码。这些元素是如何创建的？它们还从哪里引用了其他地方？请发布那段代码。history数组本身只有50个元素，不会有什么影响。 - undefined

Answer 1

JavaScript中的垃圾回收是自动进行的，不需要你自己来管理。这也是为什么当你从数组中移除项目时，尽管你将大小限制在50个，但内存仍然会增加的原因。

你无法强制或阻止垃圾回收，但当它运行时，它会负责删除没有引用的值。

- Stephan Olsen

Answer 2

一个对象被称为“垃圾”或可回收的，是指没有任何引用指向它。 https://developer.mozilla.org/zh-CN/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();

- OO7