在JavaScript中更改局部变量会影响具有不同名称的原始全局变量

Question

我在脚本顶部声明了一个全局：

var g_nutrition_summary = null;

当用户进入页面时，我返回网络数据并给这个变量一个值。

g_nutrition_summary = json.data;

这一行是变量的唯一赋值，以后再也不会调用（通过警报进行测试）。

稍后，我将使用json.data变量来使用插件Chart.js填充条形图。全局分配供以后使用。

在图表下面，用户可以通过一系列复选框筛选它显示的某些类型的数据。因此，我的目标是，保持网络中的原始值，然后对其进行本地复制，更改副本（而不是全局原始副本）并重新填充图表。每次用户选中/取消选中复选框时，它都会调用此函数并获取原始全局（g_nutrition_summary）并重新过滤。

以下是我的操作方法：

function filter_nutrition_log()
{
    alert("1: " + JSON.stringify(g_nutrition_summary));
    // reassign object to tmp variable
    var tmp_object = g_nutrition_summary;
    var food_array = new Array("Grains", "Vegetables", "Fruits", "Oils");
    var checked_array = new Array();
    // Make an array of all choices that are checked
    $(".input-range-filter").each(function() 
    {        
        var type = $(this).val(); 
        if ($(this).is(':checked')) 
        {            
            checked_array.push(type);            
        }     
    });
    alert("2: " + JSON.stringify(g_nutrition_summary));
    // Loop thru all the 7 choices we chart
    $.each(food_array, function(i, val) 
    {
       // find out if choice is in array of selected checkboxes
       if ($.inArray(val, checked_array) === -1)
       {
            // it's not, so delete it from out tmp obj we 
            // will use to repopulate the chart with
            // (we do not want to overwrite the original array!)
            delete tmp_object["datasets"][val];
       }
    });
    // Resert graph
    alert("3: " + JSON.stringify(g_nutrition_summary));
    getNutritionChart(null, tmp_object, null, false);
}

不知怎的，在警报"1"和警报"2"之间。全球发生了变化。然后，当用户再次单击复选框并调用此函数时，第一个警报显示原始全局对象包含tmp_object变量的更改数据。

正如你所看到的，当这种情况最初发生时，我调用了我创建的第三方函数。在上面描述的例子中，搜索全局绝对没有其他地方可以使用它。

我是否不了解JavaScript变量范围

Answer 1

javascript中的对象和数组都被视为引用，因此当试图将它们传递给函数或"复制"它们时，您只是在克隆引用

要获得"真实副本"，您需要遍历对象并将其内容复制到另一个对象。这可以递归地完成，但幸运的是jquery已经提供了一个函数：$.extend

因此，解决方案是：

var tmp_object = $.extend({},g_nutrition_summary);

如果你有一个嵌套的对象，你需要设置一个额外的参数：

var tmp_object = $.extend(true,{},g_nutrition_summary); // now it will do it recursively

对于数组，正如@Branden Keck所指出的，制作"真实副本"的一种简单方法是

var arrCopy = arrOriginal.slice(0)

关于jquery扩展的更多信息：https://api.jquery.com/jquery.extend/

Answer 2

赞同juvian的评论。要将新数组创建为某种程度上的"副本"而不仅仅是引用，请使用：

var tmp_object= g_nutrition_summary.slice(0);

然而，.slice（）只适用于数组，而不适用于JSON，因此要使用此方法，您必须从JSON 创建一个数组

我发现的另一种方法（虽然不是最干净的）建议从JSON创建一个字符串并重新解析：

var tmp_object= JSON.parse(JSON.stringify(g_nutrition_summary));