将对象键定义为给定变量的值，而不是变量本身的名称

Question

上下文:我正在使用谷歌图表创建一个饼状图，我想使最后一个索引固定为红色。为此，我将一个变量保存为索引，它将使用添加的最新索引更新值。然后，我将传递给变量i，以成为定义颜色的对象的关键，但似乎谷歌图表没有注册变量i，只接受0,1,2,3等数字。

let indices = indexSum;
for (let i = 1; i <= indices; i++) {
var lossColor = {
i: { color: "red" },
};
}

在被保存为lossColor的对象中，如果我使用数字1例如作为键，它将工作，但如果我使用i，它将不起作用。我这样做是为了跟踪用户创建的索引的数量，以便最后一个索引始终显示为红色。

var data = new google.visualization.DataTable();
data.addColumn("string", "Ativo");
data.addColumn("number", "Quota");
data.addRows([
...slices.map((slice) => [slice.ativo, slice.quota]),
["Loss", perda],
]);
//Styling
let options = {
legend: "right",
pieHole: 0.5,
legend: { textStyle: { color: "gray" } },
pieSliceText: "value",
slices: lossColor,
colors: ["#728FCE", "#FBB117", "#6AA121", "#4863A0", "#7D0552", "#FF0000"],
backgroundColor: "#22252a",
chartArea: {
left: 50,
right: 50,
top: 70,
},
width: "100%",
height: "500px",
};
var chart = new google.visualization.PieChart(
document.getElementById("piechart")
);
chart.draw(data, options);
}

是否有一种方法，使对象lossColor的键检索数字本身，而不仅仅是i，因为这似乎不被谷歌图表所接受(没有抛出错误，它只是简单地不注册颜色)。

应该出现数字"1"或"2";而不是"i"，例如

Answer 1

好吧，i: { color: "red" }基本上是创建一个对象与一个名为i的键。要用i的值键创建对象，可以先初始化一个空对象-let myObj = {};，然后像这样设置属性-myObj[i] = "red";。

下面是更新后的代码:

let indices = indexSum;
var lossColor = {};
for (let i = 1; i <= indices; i++) {
lossColor[i] = { color: "red" };
}

同时，使用lossColor作为常量，即在循环之外，这样它就不会在每次循环时被清空。

编辑:你也可以用ES6+做同样的事情，正如@MikhailSemikolenov指出的。

let indices = indexSum;
var lossColor = {};
for (let i = 1; i <= indices; i++) {
lossColor = { ...lossColor, [i]: { color: "red" } }
}

Answer 2

如果您试图将lossColor键设置为i的值，则无法按照您显示的方式进行操作。根据MDN - Object文档，您必须执行以下操作，以创建具有变量值的键:

let lossColor[i] = { color: "red" }

通过这种方式，您将创建一个键为i的对象，而不是值为i的对象