javascript - 如何动态更改对象键？

Question

文字墙，请耐心看完。我愿意提供解决问题所需的所有代码，但我不知道从哪里开始，所以首先要解释问题，如果有人可以帮助我解决这个问题，我将非常感激。

我正在使用 Vue/Vuex，我的应用程序中出现了一个奇怪的(至少对我来说)问题:我有一个用文档的对象填充的Array我从 MySQL DB 获取，每次用户从列表中选择其中一个时，它就会从文档 Array 移动到 的“选定”对象对象，并为其分配了一个唯一的key，即用户当前所在的路线，如下所示:

/machines/1/home : { }

然后，他打开另一个选项卡，选择一个文档等，现在“所选”看起来像这样

{/machines/1/home : { }, /machines/2/home : { }, /machines/3/home : { }}

完成这一切之后，对于每个选项卡(由其当前路径标识)，我将显示一个唯一的文档。当用户关闭最后一个选项卡时，文档及其 key 将被成功删除，但如果他决定关闭三个选项卡中的第二个，则一切都会中断，因为现在我有选项卡 1 和选项卡 3(“选定”为

{/machines/1/home : { }, /machines/3/home : { }}

但是选项卡的路由是

{/machines/1/home, /machines/2/home}

总之，我要问的是:是否可以更改“选定”中的剩余对象键以匹配新选项卡？

Answer 1

您可以使用对象数组来选择，然后在需要时创建对象的对象。

在数组中，如果删除第二项，第三项将取代第二项，依此类推。

例如:

const selectedArray = [{
  val: 'one'
}, {
  val: 'two'
}, {
  val: 'three'
}];

// remove/close 2nd tab
let removedTab = 2;
selectedArray.splice(removedTab - 1, 1);

const selected = selectedArray.reduce((a, d, i) => {
  a[`/machines/${i + 1}/home`] = d;
  return a;
}, {});

console.log(selected)