JavaScript 预分配数组 Uncaught RangeError: Invalid Array Length

Question

我有一个小的代码循环抛出 Uncaught RangeError: Invalid Array Length

我能够在 Google Chrome 控制台中使用它来重现它

const COUNT = 100_000_000;
const xValues = new Array(COUNT);
const yValues = new Array(COUNT);
for (let i = 0; i < COUNT; i++) {
    xValues[i] = i;
    yValues[i] = Math.sin(i * 0.000001);
}
console.log(`count: ${yValues.length}`);

这是开发者控制台中的输出

据我所知，Javascript 中的最大数组大小是 2^32-1？这里应该有足够的内存来分配，并且索引 i 永远不会是负数，也不会超出数组的边界。

奇怪的是，如果我使用这段代码，没有崩溃

const COUNT = 100_000_000;
const xValues = new Array(COUNT);
const yValues = new Array(COUNT);
for (let i = 0; i < COUNT; i++) {
    xValues[i] = i;
    yValues[i] = i;
}
console.log(`count: ${yValues.length}`);

分配给 yValues[i] 的值永远不会超出范围 -1、+1，因此我也不能将此视为数字超出范围的问题。

有人对此有所了解吗？

编辑：更新

另一个不起作用的场景。计算随机游走。

    const count = 100_000_000;
    const xValues = new Array(COUNT);
    const yValues = new Array(COUNT);
    let prevYValue = 0;
    for (let i = 0; i < COUNT; i++) {
        const curYValue = Math.random() - .5;

        xValues[i] = i;
        yValues[i] = prevYValue + curYValue;

        prevYValue += curYValue;
    }

这个也扔！但是

    yValues[i] = i 

很好¯\_(ツ)_/¯

编辑：更新 2

现在可以确认这是特定于浏览器的，如果您在 Firefox 中运行相同的测试，它可以工作，但浏览器要求您等待。

怀疑异常Uncaught RangeError 是错误报告的超时？

Answer 1

真正的原因在于 V8 内存优化。当您存储整数时 - 它存储 32 位数字，但是当您存储双数时 - 它以不同的方式存储（作为对象） - 所以 yValues 数组包含引用但实际值存储在堆中。因此，在您的示例中，您只使用了所有堆内存。要查看限制，请使用：console.memory，您会看到如下内容：

MemoryInfo {
totalJSHeapSize: 10000000, 
usedJSHeapSize: 10000000, 
jsHeapSizeLimit: 3760000000}

在我的浏览器中是3_760_000_000

堆上的对象占用 50+ 字节，所以我的限制大约是 69_000_000 个浮点数。