Question

如何在javascript中实现重新分配的列表（或与此相关的任何其他值）？

我试图像在python中那样做，并制作一个空列表并在满足我的条件的情况下分配它，但是javascript似乎会退回到我的{{1} }

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

if/else

摆弄我的问题： https://jsfiddle.net/vk8swjc3/

Answer 1

您当前正在通过重新说出let来重新定义所有这些数据变量。删除租借并直接进行services.AddSingleton<IAuthorizationHandler, AllowedIpRequirementHandler>(); services.AddHttpContextAccessor();以重新分配它们。

Answer 2

两个问题：

如果在块内使用let x，则在内部作用域中创建一个新变量x。删除let，您将重新分配原始的x。
如果您在DOMContentLoaded回调中重新分配它们，则在设置该回调之后（仅在回调本身中，或者一旦回调具有跑）。参见https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

这是执行顺序的演示：

console.log('top')

document.addEventListener("DOMContentLoaded", () => {
  console.log('DOMContentLoaded')

  executeWithinCallback()
})

const executeWithinCallback = () => {
  console.log('after DOMContentLoaded')
}

console.log('bottom')

Answer 3

在范围（花括号）上使用var，let或const时，会定义一个变量，该变量只能在该范围内使用。

因此，如果要在其他范围内使用顶级变量，则不应使用var，let或const为变量赋值。

您可以在这里查看：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Answer 4

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

您的小提琴正在按预期的方式工作，但没有达到您的预期。如果您在console.log()中的条件之后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];
  }
  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();
});

更新的小提琴：https://jsfiddle.net/q3tmon21/

或者，要使代码按预期运行，只需在第一个渲染器上使用条件设置的数组，只需将其后的所有代码移至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,
  });
});

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

4 个答案: