自定义 class 扩展数组而不使用扩展语法

Question

几年来，我一直在 JavaScript (repo, docs) 中构建和使用自定义数据分析工具。

我最近所做的更改之一是使用 JavaScript class 来扩展本机 Array 类型，因此我可以轻松地将自定义函数作为方法调用在类似数组的对象上，而不是将它们作为参数传递给那些函数，而不会失去使用 [] 表示法访问元素的能力。

为此，我一直在使用以下代码：

class AnalyserRows extends Array {
    constructor(sourceArray) {
        super(...sourceArray);
    }

    // ...
}

这有一段时间运行良好，但最近我试图加载一组特别大的数据，但我运行遇到了问题。我试图创建一个包含大约 66,000 个元素的 AnalyserRows 对象，但 Chrome 抛出此错误：

Uncaught RangeError: Maximum call stack size exceeded

在我的搜索中，我找到了这个问题的解释： RangeError - Maximum Call Stack Size Exceeded Error Using Spread Operator in Node.js / Javascript

The spread operator (and Array.assign) loads the entire source array onto the stack, then pushes it onto the destination array. Once the source array exceeds 125,052, it causes a Stack Overflow / Range Error.

所以现在我的问题是如何在自定义 class 的 constructor 中调用 super 并在不使用扩展运算符的情况下传递源数组的每个元素？

可以用这么多元素创建一个 Array 而没有任何实际问题，所以我觉得应该可以用 class 像这样扩展 Array 。但是，如果不使用扩展运算符或进行一些其他更改以阻止我使用我一直在使用的某些语法，我不知道该怎么做。

Answer 1

Array 构造函数有两种形式：您可以将所有数组元素传递给它，或者您可以将数组的大小传递给它。您可以尝试使用第二种形式，然后在构造函数中复制数组元素。

class AnalyserRows extends Array {
    constructor(sourceArray) {
        super(sourceArray.length);
        for (let i = 0; i < sourceArray.length; i++) {
            this[i] = sourceArray[i];
        }
    }

    // ...
}

但是，这对于巨大的数组来说可能非常慢。根据您提供的引述，听起来任何 built-in 快捷方式都会运行进入堆栈溢出问题。

自定义 class 扩展数组而不使用扩展语法

Custom class extending Array without using spread syntax

javascript

es6-class

spread-syntax