在if/else（Javascript）中重新分配变量

如何在javascript中实现重新分配的列表或任何其他值

我试着像在python中那样，在满足条件的情况下创建一个空列表并分配它，但javascript似乎会回到if/else中分配的内容

我的目标是实现以下目标：

let data1 = [];
let data2 = [];
let data3 = [];
document.addEventListener("DOMContentLoaded", function(){
  if (document.getElementById('minus').checked) {
    let data1 = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    let data2 = [-23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    let data3 = [-64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  } else {
    let data1 = [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    let data2 = [23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    let data3 = [64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  }
});

//Further code that uses the variables we just set

在我的问题上胡闹：

---

您当前正在重新定义所有这些数据变量，请再说一次let。删除let并直接执行data1=[-64、31、23、34、23、30、50、43、29、64、22、34]以重新分配它们。

您当前正在通过再次说出let来重新定义所有这些数据变量。删除let并直接执行data1=[-64,31,23,34,23,30,50,43,29,64,22,34]以重新分配它们。

两个问题：

如果在块中使用let x，则在内部作用域中创建新变量x。删除let，您将重新指定原始x

如果在DOMContentLoaded回调中重新分配这些值，则在您仅在回调本身中设置回调后，或者在回调运行后，新值将不可用于立即运行的代码。看

下面是执行顺序的演示：

控制台。记录“顶部” document.addEventListenerDomainContentLoaded，=>{ console.log'DOMContentLoaded' executeWithinCallback } const executeWithinCallback==>{ console.log'after DOMContentLoaded' } console.log'bottom'有两个问题：

如果在块中使用let x，则在内部作用域中创建新变量x。删除let，您将重新指定原始x

如果在DOMContentLoaded回调中重新分配这些值，则在您仅在回调本身中设置回调后，或者在回调运行后，新值将不可用于立即运行的代码。看

下面是执行顺序的演示：

控制台。记录“顶部” document.addEventListenerDomainContentLoaded，=>{ console.log'DOMContentLoaded' executeWithinCallback } const executeWithinCallback==>{ console.log'after DOMContentLoaded' } log'bottom'当您在scopecurly大括号上使用var、let或const时，您将被定义为一个只能在该范围内使用的变量

所以，若您想在另一个作用域中使用顶级变量，那个么就不应该使用var、let或const为变量赋值

您可以在这里查看：

当您在scopecurly大括号上使用var、let或const时，您定义了一个只能在该范围内使用的变量

所以，若您想在另一个作用域中使用顶级变量，那个么就不应该使用var、let或const为变量赋值

---

您可以在这里查看：

在您最初的帖子中解决了变量范围问题之后，我们现在可以查看您问题的大部分内容，这似乎是更改数据的问题，或者至少是根据控件的状态设置初始数据的问题

你的小提琴正在按预期工作，但并不像你期望的那样。如果您在加载的DOMContentLoaded中的console.log条件之后记录任何数据数组，您将看到更新的数组

let data1 = [];
let data2 = [];
let data3 = [];

document.addEventListener("DOMContentLoaded", function(){
  if (document.getElementById('minus').checked) {
    data1 = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    data2 = [-23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    data3 = [-64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  } else {
    data1 = [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    data2 = [23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    data3 = [64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  }
  console.log(data1);
});
// [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34]

但是，在运行时，您已经使用空数组值设置了图表，并且它已呈现。在此之后更改数据数组的值将不会影响渲染的图表，也不会影响分配给chartData.datasets[n].data的数组的值

为了更新图表，您需要更改这些数据集值并在图表上调用update

let barVertical = document.getElementById("barVertical");
let barVerticalChart = new Chart(barVertical, {
    type: "bar",
    data: chartData,
    options: chartOptions,
});

const minus =  document.getElementById('minus');
minus.addEventListener('change', (e) => {
  if (e.target.checked) {
    chartData.datasets[0].data = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    chartData.datasets[1].data = [-23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    chartData.datasets[2].data = [-64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  } else {
    chartData.datasets[0].data = [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    chartData.datasets[1].data = [23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    chartData.datasets[2].data = [64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  }
  barVerticalChart.update();
});

更新小提琴：

或者，为了让代码像预期的那样运行，在第一次渲染时使用有条件设置的数组，只需将它之后的所有代码移动到DOMContentLoaded侦听器中

let data1 = [];
let data2 = [];
let data3 = [];

document.addEventListener("DOMContentLoaded", function(){
  if (document.getElementById('minus').checked) {
    data1 = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
        data2 = [-23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
        data3 = [-64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  } else {
    data1 = [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
        data2 = [23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
        data3 = [64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  }

  let labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    let chartData = {
    labels: labels,
    datasets: [
        {
            label: "Data1",
            data: data1,
            backgroundColor: "rgba(154, 18, 179, .7)",
        },
        {
            label: "Data2",
            data: data2,
            backgroundColor: "rgba(232, 126, 4, .7)",
        },
        {
            label: "Data3",
            data: data3,
            backgroundColor: "rgba(0, 230, 64, .7)",
        },
    ],
    };


    let barVertical = document.getElementById("barVertical");
    let barVerticalChart = new Chart(barVertical, {
    type: "bar",
    data: chartData,
    options: chartOptions,
  });
});

---

在解决了您在最初的帖子中遇到的变量范围问题之后，我们现在可以看看您问题的更大部分，这似乎是关于更改数据的问题，或者至少是基于控件状态设置初始数据的问题

你的小提琴正在按预期工作，但并不像你期望的那样。如果您在加载的DOMContentLoaded中的console.log条件之后记录任何数据数组，您将看到更新的数组

let data1 = [];
let data2 = [];
let data3 = [];

document.addEventListener("DOMContentLoaded", function(){
  if (document.getElementById('minus').checked) {
    data1 = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    data2 = [-23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    data3 = [-64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  } else {
    data1 = [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    data2 = [23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    data3 = [64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  }
  console.log(data1);
});
// [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34]

但是，在运行时，您已经使用空数组值设置了图表，并且它已呈现。在此之后更改数据数组的值将不会影响渲染的图表，也不会影响分配给chartData.datasets[n].data的数组的值

为了更新图表，您需要更改这些数据集值并在图表上调用update

let barVertical = document.getElementById("barVertical");
let barVerticalChart = new Chart(barVertical, {
    type: "bar",
    data: chartData,
    options: chartOptions,
});

const minus =  document.getElementById('minus');
minus.addEventListener('change', (e) => {
  if (e.target.checked) {
    chartData.datasets[0].data = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    chartData.datasets[1].data = [-23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    chartData.datasets[2].data = [-64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  } else {
    chartData.datasets[0].data = [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    chartData.datasets[1].data = [23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    chartData.datasets[2].data = [64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  }
  barVerticalChart.update();
});

更新小提琴：

或者，为了让代码像预期的那样运行，在第一次渲染时使用有条件设置的数组，只需将它之后的所有代码移动到DOMContentLoaded侦听器中

let data1 = [];
let data2 = [];
let data3 = [];

document.addEventListener("DOMContentLoaded", function(){
  if (document.getElementById('minus').checked) {
    data1 = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
        data2 = [-23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
        data3 = [-64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  } else {
    data1 = [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
        data2 = [23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
        data3 = [64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  }

  let labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    let chartData = {
    labels: labels,
    datasets: [
        {
            label: "Data1",
            data: data1,
            backgroundColor: "rgba(154, 18, 179, .7)",
        },
        {
            label: "Data2",
            data: data2,
            backgroundColor: "rgba(232, 126, 4, .7)",
        },
        {
            label: "Data3",
            data: data3,
            backgroundColor: "rgba(0, 230, 64, .7)",
        },
    ],
    };


    let barVertical = document.getElementById("barVertical");
    let barVerticalChart = new Chart(barVertical, {
    type: "bar",
    data: chartData,
    options: chartOptions,
  });
});

如果将x放入块中，则在内部作用域中创建一个新变量x。删除let，您将重新指定原始x。是否尝试设置内容

---

只有在第一次装载之后？或者在复选框更改后？如果将x放入块中，则在内部范围中创建新变量x。删除let，您将重新分配原始x。是否仅在第一次加载后才尝试设置内容？或者在复选框更改后？我已经用小提琴更新了我的帖子，它似乎不起作用，但它非常有意义。啊，是的，看起来您可能正在尝试访问来自data1、data2、data3等的数据。在您设置的事件侦听器运行之前。将其余代码移动到该事件侦听器中，您应该能够访问数据-同样，如果您在if/else语句后不久使用console.log data1，您应该会看到数组中填充了12项，正如您所期望的那样。我用小提琴更新了我的帖子，它似乎不起作用，但非常有意义。啊，是的，在您设置的事件侦听器运行之前，您可能正在尝试从data1、data2、data3等访问数据。将代码的其余部分移到该事件侦听器中，您应该能够访问数据—同样，如果在if/else语句之后不久使用console.log data1，您应该会看到数组中填充了12项，正如您所期望的那样。