如何创建带计算属性名的对象？Angular对象构建问题求助

问题背景 #

我想通过不同组件的复选框选择来构建一个对象，@Inputs和@Outputs的数据收发都正常，但在对象构建环节遇到问题——向对象添加属性时会出现值被覆盖的情况，无法按预期逐步添加属性。

目标对象格式 #

我需要生成如下结构的对象，每勾选一个复选框就往对应层级里添加属性：

{
  "first":{
     "0" : "one",
     "1" : "two"
  },
  "second":{
     "0": "five",
     "1": "six",
     "2": "seven"
  },
  "third":{
     "0": "eight",
     "1": "nine"
  }
}

当前错误结果 #

现在每次勾选后，之前的属性会被覆盖，得到的对象是这样的：

{ "first": { "1": "two" }, "second": { "1": "six" } }

当前处理函数代码（Angular） #

buttonHandler(event: any) {
  console.log('event', event);

  let pillName = event.pillName;
  let filterName = event.filterValue;
  let idx = event.index;

  this.testObj[pillName] = {  [idx]: filterName };

  console.log('testObj', this.testObj);
}

纯JavaScript复现示例 #

let aaa = [
  { id: 1, filterName: 'one', checked: false },
  { id: 2, filterName: 'two', checked: false },
  { id: 3, filterName: 'three', checked: false },
];

let bbb = [
  { id: 1, filterName: 'five', checked: false },
  { id: 2, filterName: 'six', checked: false },
  { id: 3, filterName: 'seven', checked: false },
];

let ccc = [
  { id: 1, filterName: 'eight', checked: false },
  { id: 2, filterName: 'nine', checked: false },
  { id: 3, filterName: 'ten', checked: false },
];

let items = [
  { id: 1, pillName: 'first', filterValues: aaa },
  { id: 2, pillName: 'second', filterValues: bbb },
  { id: 3, pillName: 'third', filterValues: ccc },
];

let testObject = {}

function buttonHandler(event) {
  console.log('event', event);

  let pillName = event.pillName;
  let filterName = event.filterValue;
  let idx = event.index;

  testObject[pillName] = { [idx]: filterName };

  console.log('testObj', testObject);
}

buttonHandler({pillName: "first", filterValue: "one", index: 0, checked: true})
buttonHandler({pillName: "first", filterValue: "two", index: 1, checked: true})
buttonHandler({pillName: "second", filterValue: "six", index: 1, checked: true})
buttonHandler({pillName: "second", filterValue: "seven", index: 2, checked: true})

解决方案 #

问题出在每次赋值时都直接替换了pillName对应的对象，而不是在原有对象上添加新属性。修改处理函数即可：

Angular版本 #

buttonHandler(event: any) {
  console.log('event', event);

  let pillName = event.pillName;
  let filterName = event.filterValue;
  let idx = event.index;

  // 先判断该层级对象是否存在，不存在则初始化空对象
  if (!this.testObj[pillName]) {
    this.testObj[pillName] = {};
  }
  // 在已有对象上添加新属性，不会覆盖原有内容
  this.testObj[pillName][idx] = filterName;

  console.log('testObj', this.testObj);
}

JavaScript版本 #

function buttonHandler(event) {
  console.log('event', event);

  let pillName = event.pillName;
  let filterName = event.filterValue;
  let idx = event.index;

  if (!testObject[pillName]) {
    testObject[pillName] = {};
  }
  testObject[pillName][idx] = filterName;

  console.log('testObj', testObject);
}

这样修改后，每次勾选都会往对应层级的对象里新增属性，而不会覆盖之前已有的内容，就能得到预期的对象结构了。

内容的提问来源于stack exchange，提问作者foo_bar_zing