Javascript 在我更改arrayToDataTable输入（google图表行）后，2个var数组神秘地改变

我正在通过显示货币汇率的折线图

基本上我有两种类型的值：

日期（iso8601格式）

费率（十进制数）

我正在尝试执行一个函数，该函数更改arrayToDataTable的输入：

    dataChart = google.visualization.arrayToDataTable(arrayForChart);

基本上我在两种货币之间改变了基础货币的角色。 每次我这样做时，折线图都应该反转

当我按下更改显示按钮一次（“currencyRates\u changeDisplay”）时，它会更改图形。他把图表颠倒过来了，一切正常。 但在这之后，图表将与上次更改的值保持一致。谷歌的图表线也不会再改变了

我做了一些调试

在我按下一次按钮“#currencyRates_changeDisplay”后，“var arrayForChart”和“var arrayTest”似乎变为“var ArrayChangeDisplaySettingForChart”的值。在那之后，他们不再改变了。 我想是因为这一行：

    dataChart = google.visualization.arrayToDataTable(arrayForChart);

但我不确定。这是我的全部代码：

    <script>

    var arrayForChart;
    var arrayTest;
    var checkkk=0;

    var arrayChanegeDisplaySettingForChart;

    var dataChart;


    var baseCurrencyDisplaySetting=1;     
    var baseCurrency="USD";


    var dayResults;
    var yesterdayResults;


    var fromCurrency;
    var toCurrency;
    var currencyAmount;


    var direction;
    var percent;
    var gainLoss;

    loadRates();

    $(document).ajaxStop(function () {

        if (baseCurrencyDisplaySetting==2){
            arrayChanegeDisplaySettingForChart=arrayForChart;
            arrayChanegeDisplaySettingForChart=changeArrayForChart(arrayChanegeDisplaySettingForChart);
        }
        whenAjaxReallyStops();

    });
    function whenAjaxReallyStops() {

            //alert("AJAX REALLY ENDED");                   
            displayCurrencyConverterResult();
            dipsplayChart();
            displayAllRates();


    }

    function loadRates(){
        baseCurrency   = $("#baseCurrency").val();
        fromCurrency   = $("#currency_from").val();
        toCurrency   = $("#currency_to").val();
        currencyAmount = $("#currency_amount").val();


    $.ajax({
    type: "POST",
    url: "just a url here...",
    data: {
    baseCurrency: baseCurrency,
    toCurrency: toCurrency
            },
    cache: false
        }).done(function(data) {

            resultArray=data;
            dayResults=resultArray["0"];
            yesterdayResults=resultArray["1"];
            console.log(dayResults);
            console.log(yesterdayResults);
            arrayTest=resultArray["arrayForCharts"];
            arrayForChart=resultArray["arrayForCharts"];
            alert ("arrayForChart changed");
            console.log(resultArray);

        });
    }


    function changeArrayForChart(changedArrayForChart){

        console.log(changedArrayForChart);
        for (var key in changedArrayForChart) {     
            if (key != 0){
                let newRateForChart=1*(1 / changedArrayForChart[key][1]);
                changedArrayForChart[key][1]=newRateForChart;
            }
        }
        return changedArrayForChart;    
    }
    function dipsplayChart(){
        //from here google chart stuff
        google.charts.load("current", {packages: ["corechart", "line"]});
        google.charts.setOnLoadCallback(drawLineColors);


        //until here google chart stuff
    }

    function drawLineColors() {
        dataChart=null;
        if (baseCurrencyDisplaySetting==1){
            if (checkkk==0){
                    console.log (JSON.stringify(arrayForChart));
                dataChart = google.visualization.arrayToDataTable(arrayForChart);
            }else{
                    console.log (JSON.stringify(arrayTest));
                dataChart = google.visualization.arrayToDataTable(arrayTest);
            }
            checkkk=checkkk+1;
            var titleChartString = baseCurrency + " vs " + toCurrency + " Last 90 days";
        }else{
                console.log(JSON.stringify(arrayChanegeDisplaySettingForChart));            
dataChart = google.visualization.arrayToDataTable(arrayChanegeDisplaySettingForChart);
            var titleChartString = toCurrency + " vs " + baseCurrency + " Last 90 days";
        }       
        var options = {
    title: titleChartString ,
    explorer: {
    actions: ["dragToZoom", "rightClickToReset"],
    axis: "horizontal",
    keepInBounds: true
            },
    hAxis: {
    title: "Date",
    format: "d MMM",

            },
    vAxis: {
    title: "Rate",
            },
    colors: ["#a52714", "#097138"]
        };
        var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
        chart.draw(dataChart, options);
    }           

    $("body").on( "click", "#currencyRates_changeDisplay", function(){
        if (baseCurrencyDisplaySetting==1){
            baseCurrencyDisplaySetting=2;
            if (typeof arrayChanegeDisplaySettingForChart == "undefined"){
                arrayChanegeDisplaySettingForChart=arrayForChart;
                arrayChanegeDisplaySettingForChart=changeArrayForChart(arrayChanegeDisplaySettingForChart);
            }
        }else{
            baseCurrencyDisplaySetting=1;
        }
        displayAllRates();
        dipsplayChart();
    });                     

    </script>

然后我按下“currencyRates\u changeDisplay”按钮

我在控制台日志中看到此通知：

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

图表的阵列更改显示设置：

[[{"label":"Date","id":"Date","type":"date"},{"label":"Rate","id":"Rate","type":"number"}],["Date(2017, 3, 10)",0.2730897372876727],["Date(2017, 3, 11)",0.2734855736359907]]

然后我再次按下“currencyRates\u changeDisplay”按钮

arrayTest：

[[{"label":"Date","id":"Date","type":"date"},{"label":"Rate","id":"Rate","type":"number"}],["Date(2017, 3, 10)",0.2730897372876727],["Date(2017, 3, 11)",0.2734855736359907]

从这里开始，每次我按下按钮“currencyRates\u changeDisplay”：“arrayTest”和“arrayForChart”都会被“ArrayChangeDisplaySettingforChart”的值卡住，图表永远不会改变

任何人都可能知道问题出在哪里

---

非常感谢

当

arrayChangeDisplaySettingforChart

未定义时，代码指示仅调用

changeArrayForChart

。因此，这只会发生一次，就像在第一次之后一样，后一个变量不再是未定义的

因此，改变这一点：

if (baseCurrencyDisplaySetting==1){
    baseCurrencyDisplaySetting=2;
    if (typeof arrayChanegeDisplaySettingForChart == "undefined"){
        arrayChanegeDisplaySettingForChart=arrayForChart;
        arrayChanegeDisplaySettingForChart=changeArrayForChart(arrayChanegeDisplaySettingForChart);
    }
}else{
    baseCurrencyDisplaySetting=1;
}

致：

---

我仍在努力完全理解你的代码。你能给我一篇教程文章吗？这篇文章将向我解释这一行：//现在切换。注意changeArrayForChart变异了给定的数组//因此你不需要返回值changeArrayForChart（ArrayChangeDisplaySettingForChart）；“你的函数有这一行：

changedArrayForChart[key][1]=newRateForChart

。这意味着您作为参数提供的数组被修改（变异）。因此，当该函数完成时，传递给它的数组已经更改。您仍然可以将函数返回的数组分配回您的数组，但这实际上不会改变任何事情：数组已经改变了。例如，请参见有助于理解这一点的内容。

if (baseCurrencyDisplaySetting==1){
    baseCurrencyDisplaySetting=2;
    if (typeof arrayChanegeDisplaySettingForChart == "undefined"){
        arrayChanegeDisplaySettingForChart=arrayForChart;
        arrayChanegeDisplaySettingForChart=changeArrayForChart(arrayChanegeDisplaySettingForChart);
    }
}else{
    baseCurrencyDisplaySetting=1;
}

// For arrays you can just use `!` to test for not being defined:
if (!arrayChanegeDisplaySettingForChart) {
    // This happens only once:
    arrayChanegeDisplaySettingForChart = arrayForChart;
}
// Now toggle. Note that changeArrayForChart mutates the given array
// so you don't need the return value 
changeArrayForChart(arrayChanegeDisplaySettingForChart);
// A way to toggle between 1 and 2:
baseCurrencyDisplaySetting = 3 - baseCurrencyDisplaySetting;