Question

我有一个用给定数据绘制图表的函数。数据与参数一起传递。该函数如下所示：

drawCustomChart(element, data) {
    console.log(data);
    for (var i = 0; i < data.length; i++) {
        element.append(
            `<div class="chart__item--${data[i][1]}">
                <div class="chart__item__tag">${data[i][0]}</div>
                <div class="chart__item__bar">
                    <div class="chart__item__bar__inner" style="width: ${data[i][2]}%" data-chart-bar="${data[i][1]}"></div>
                    <div class="chart__item__bar__tooltip chart__item__bar__tooltip--${data[i][1]}" data-tooltip="${data[i][1]}">
                        <div class="chart__item__bar__tooltip__arrow"></div>
                        <span class="chart__item__bar__tooltip__label">${data[i][0]}: ${data[i][2]}</span>
                    </div>
                </div>
                <div class="chart__item__label">${data[i][2]}</div>
            </div>`
        );
    }
}

我使用以下代码调用该函数：

// The function call
drawElectionResultsChart(electionResultsChartData);

// The function that's being called
drawElectionResultsChart(data) {
    helpers.drawCustomChart($$.voteCountsChart, data);
}

传递给drawElectionResultsChart（data）的数据是一个二维数组，如下所示：

Array[13]
    0: Array[3]
    1: Array[3]
    2: Array[3]
    3: Array[3]
    4: Array[3]
    5: Array[3]
    6: Array[3]
    7: Array[3]
    8: Array[3]
    9: Array[3]
    10: Array[3]
    11: Array[3]
    12: Array[3]
    length:  13
    __proto__: Array[0]

主数组中的每个数组都包含三个值。问题是这个。在console.logs数组（console.log(data)）在drawCustomChart函数内的行上，它工作正常，数组被记录。但是，在日志之后，由于某种原因它再次执行console.log，然后它显示undefined。由于数组突然变为未定义，因此drawCustomChart方法输出关于data.length的错误（因为data现在未定义）。

为什么会发生这种情况，我该如何解决？

Answer 1

试试这个

drawCustomChart(element, data) {
    console.log(data);
    for (var i = 0; i < Object.keys(data).length; i++) {
        element.append(
            `<div class="chart__item--${data[i][1]}">
                <div class="chart__item__tag">${data[i][0]}</div>
                <div class="chart__item__bar">
                    <div class="chart__item__bar__inner" style="width: ${data[i][2]}%" data-chart-bar="${data[i][1]}"></div>
                    <div class="chart__item__bar__tooltip chart__item__bar__tooltip--${data[i][1]}" data-tooltip="${data[i][1]}">
                        <div class="chart__item__bar__tooltip__arrow"></div>
                        <span class="chart__item__bar__tooltip__label">${data[i][0]}: ${data[i][2]}</span>
                    </div>
                </div>
                <div class="chart__item__label">${data[i][2]}</div>
            </div>`
        );
    }
}

正确的控制台输出后，Javascript数组立即变为未定义

1 个答案: