JavaScript - 似乎无法将 'reset' 数组传递给函数

Question

我对 JavaScript 有点陌生，但我对一般编程有相当的经验。我怀疑我的问题可能与范围界定或将数组作为参数传递的细节有关，但我不确定。

高级目标是使用多个“节点”进行实时绘图，每个节点每秒生成 50 个点。我已经让这个工作直接运行到一个数组中，并由 dygraphs 和 C3.js 渲染，并很快意识到这是太多的数据，无法持续实时渲染。 Dygraphs 似乎在大约 30 秒后开始影响用户体验，而 C3.js 似乎在 10 秒左右窒息。

下一个尝试是根据缩放级别抽取绘制的数据。

我将数据保存到一个“对象”中，我使用它有点像其他语言的字典。使用 AJAX 请求进展顺利。其思路是利用AJAX请求创建一个大数据缓冲区，并使用keys来存储单元根据序列号生成的数据作为keys。这运行良好，并且正在按预期填充对象。我觉得在我提出问题之前了解这个对象的“结构”是有益的。如下:

{
    1: [[x10,y10], [x11,y11], [...], [x1n, y1n]],
    2: [[x20,y20], [x21,y21], [...], [x2n, y2n]],
    ... : [ ... ]
    a: [[xa0,ya0], [xa1,ya1], [...], [xan, yan]]
}

定期地，该数据的一个子集将用于生成 dygraphs 图。我正在抽取存储的数据并创建一个“绘图缓冲区”来保存实际数据的子集。

dygraphs 库以多种方式获取数据，但我想“本地”构造它，这只是一个数组数组。数组中的每个数组都是数据的“行”。所有行必须具有相同数量的元素才能排列成列。生成的数据可能同时也可能不同。如果数据 x 值完全匹配，则由于 x10 = x20 = xn0，因此只有两个节点的结果数据如下所示:

[
    [x10, y10, y20],
    [x11, y11, y21],
    [ ... ],
    [xan, yan, yan]
]

请注意，这只是行中的 x 和 y。实际上，每个序列号的时间可能不会对齐，因此可能更接近:

[
    [x10, y10, null],
    [x20, null, y20],
    [x11, y11, y21],
    [ ... ],
    [xan, yan, yan]
]

对不起所有的背景。我们可以找到我遇到问题的代码。我定期尝试使用以下代码创建绘图缓冲区:

window.intervalId = setInterval(
    function(){
        var plotData = formatData(nodeData, 45000, 49000, 200);

        /* dygraphs stuff here */
    },
    500
);

function formatData(dataObject, start, end, stride){
    var smallBuffer = [];

    var keys = Object.keys(dataObject);
    keys.forEach(
        function(key){
            console.log('key: ', key);

            mergeArrays(dataObject[key], smallBuffer, start, end, stride);
        }
    );

    return smallBuffer;
}

function mergeArrays(sourceData2D, destDataXD, startInMs, endInMs, strideInMs){
    /* ensure that the source data isn't undefined */
    if(sourceData2D){
        /* if the destDataXD is empty, then basically copy the 
         *  sourceData2D into it as-is taking the stride into account */
        if(destDataXD.length == 0){
            /* does sourceData2D have a starting point in the time range? */
            var startIndexSource = indexNear2D(sourceData2D, startInMs);
            var lastTimeInMs = sourceData2D[startIndexSource][0];

            for(var i=startIndexSource; i < sourceData2D.length; i++){
                /* start to populate the destDataXD based on the stride */
                if(sourceData2D[i][0] >= (lastTimeInMs + strideInMs)){
                    destDataXD.push(sourceData2D[i]);
                    lastTimeInMs = sourceData2D[i][0];
                }

                /* when the source data is beyond the time, then break the loop */
                if(sourceData2D[i][0] > endInMs){
                    break;
                }
            }
        }else{
            /* the destDataXD already has data in it, so this needs to use that data
             *  as a starting point to merge the new data into the destination array */
            var finalColumnCount = destDataXD[0].length + 1;
            console.log('final column count: ', finalColumnCount);

            /* add the next column to each existing row as 'null' */
            destDataXD.forEach(
                function(element){
                    element.push(null);
                }
            );

            /* TODO: move data into destDataXD from sourceData2D */

        }
    }
}

添加一些信息，因为如果不付出一些努力，它可能不是不言自明的。我创建了两个函数，“formatData”和“mergeArrays”。这些可以在一个函数中完成，但我更容易从概念上分离出“对象”域和“数组”域。 “formatData”函数简单地遍历存储在每个键中的所有数据，每次调用“mergeArray”例程。 'mergeArray' 例程尚未完成，这是我遇到问题的地方。

第一次通过时，formatData 应该创建一个空数组 - smallBuffer - 使用 mergeArrays 将数据合并到该数组中。第一次执行 'mergeArrays' 我看到 smallBuffer 确实正在创建并且是一个空数组。这个空数组作为参数提供给 'mergeArrays' 并且 - 第一次通过 - 这非常有效。下一次，“smallBuffer”数组不再为空，因此“mergeArrays”中的第二种情况被执行。我的第一步是计算列数，以便我可以适本地填充每一行。这工作正常，但有助于指出问题。下一步是简单地将空列的“null”值附加到每一行。这就是事情变得奇怪的地方。第一次通过“mergeData”后，destDataXD 仍包含来自先前执行的“空”数据。从本质上讲，'var smallBuffer = [];'实际上并没有清除并保留一些东西。直到接近尾声，这件事才明显。我无法准确解释 b/c 发生了什么我不完全理解它，但 destDataXD 在最后不断增长“空值”，而没有按预期正确重置。

谢谢你的时间，我期待听到你的想法，j

Answer 1

快速通读代码，我看到的危险点是你第一次在 destDataXD 中添加一个元素.

destDataXD.push(sourceData2D[i]);

请注意，您不是在推送数组的副本。您正在添加对该数组的引用。 destDataXD和 sourceData2D现在共享相同的数据。

所以，当然，当你按下任何 null destDataXD 中的数组中的值, 你也在修改 sourceData2D .

你应该使用javascript数组复制方法 slice

destDataXD.push(sourceData2D[i].slice());