有什么方法可以将对象中键的存在依赖于外部值吗？

Question

我想根据标志值在对象中设置一些键

例如

const ourFlag = true //true or false depends on case

const ourObject = {
  name: 'Pablo',
  secondName: 'Picasso',
  [ourFlag && 'age']: 20,
  [ourFlag && 'moreComplexValue']: [
    {
      val: true
    },
    {
      val: false
    }
  ]
}

只要ourFlag设置为true一切都按我的预期工作，但是当我将其值更改为false时，一些奇怪的事情开始出现。

属性年龄不再存在-良好，但属性更复杂值现在为假

当标志为false时得到的代码：

js prettyprint-override">{
  name: 'Pablo',
  secondName: 'Picasso',
            // age disappear as I expected
  false: [  //why!?!
    {
      val: true
    },
    {
      val: false
    }
  ]
}

当标志为true时得到的代码：

{ .    //brilliant everything is fine
  name: 'Pablo',
  secondName: 'Picasso',
  age: 20,
  moreComplexValue: [
    {
      val: true
    },
    {
      val: false
    }
  ]
}

有没有办法用这些计算属性来处理它？

Answer 1

问题是javascript对象键始终是字符串，否则会被类型化为字符串。

因此，当值为false时，它变为字符串“false”，并且同一个键被使用两次并用第二个值重写

要动态设置关键点，可以将其设置为未定义或使用if。。其他的

const ourFlag = true //true or false depends on case

const ourObject = {
  name: 'Pablo',
  secondName: 'Picasso',
}
if(ourFlag) {
  ourObject.age = 20;
  ourObject.moreComplexValue = [
    {
      val: true
    },
    {
      val: false
    }
  ];
}

Answer 2

<代码>[标志

一个更好的选择是使用对象扩展...标志

let ourFlag = true

const a = {
    name: 'Pablo',
    secondName: 'Picasso',
    ...ourFlag && {age: 20},
    ...ourFlag && {moreComplexValue: [1, 2, 3]}
}

ourFlag = false


const b = {
    name: 'Pablo',
    secondName: 'Picasso',
    ...ourFlag && {age: 20},
    ...ourFlag && {moreComplexValue: [1, 2, 3]}
}

console.log(a)
console.log(b)