如何限制数组值的数量？答案

【问题标题】：How can I limit the number of array's values?如何限制数组值的数量？
【发布时间】：2017-09-21 06:23:55
【问题描述】：

我有一个 JS 数组，它的每个键都包含页面的整个 HTML。我将该数组用作 back 和 forward 按钮。

有时当它包含 100 个页面的 HTML 时，浏览器的性能会下降。那么我有两个问题：

当前数组：

var myarr = ['val1', 'val2', 'val3']; // - it should be limited to 3 values
+------+------+------+
| val1 | val2 | val3 |
+------+------+------+

将新值压入后的预期数组：

myarr.push('val4'); // expected result:

+------+------+------+
| val2 | val3 | val4 |
+------+------+------+

这样做可能吗？

【问题讨论】：

使用Array.prototype.shift() 删除第一个元素。
使用方法 yourArrayInsertCustomMethod(item) 来管理你的数组逻辑
如果您知道如何使用 array.slice，您可以创建一个所需长度的新数组：var arr2 = [...myarr.slice(-2), 'var4']
对于第一个问题，stackoverflow.com/q/19354808/215552 有答案，stackoverflow.com/q/1248302/215552 有如何计算对象的内存占用。只需遍历您的数组。有关数组方法的更多信息，请阅读the documentation。
我还应该提到，像这样将页面的整个 HTML 加载到内存中可能是个坏主意。它完全违背了浏览器缓存页面能力的目的。

【解决方案1】：

显然你想要一个堆栈。例如，如果您已经使用了这个数组并且在 push 上有很多调用。您可以替换它的推送功能（不是 Array.prototype 而是实例本身的推送）。如果需要，您可以在那里限制数组并移动元素。

var push = arrayInstance.push;
arrayInstance.push = function(elem) {
    // todo check length and remove leading elems if needed
    push(elem);
}

它可能在语法上不正确，但您可以掌握。这不是一个干净的解决方案，更好的解决方案是嵌套功能并创建相应的对象/类。

【讨论】：

【解决方案2】：

为什么还要使用数组。如果您正在动态构造数组的值，即 PREVIOUS 和 NEXT 页面的 HTML，您不能简单地为您保存这些值的全局变量吗？

lastPage = HTML of currentPage-1
thisPage = HTML of currentPage
nextPage = HTML of currentPage +1

所以当你前进时......

lastPage = thisPage;
thisPage = nextPage;
nextPage = HTML of currentPage + 1 (computed)

然后返回...

nextPage = thisPage;
thisPage = lastPage;
lastPage = HTML of currentPage -1 (computed)

这样就不会有任何数组增长或内存泄漏问题。

【讨论】：