条件扩展运算符

Question

const cond = false

const extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
]

const userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
  ...(cond && extraInfo)
]

当cond为真时，我想要额外信息和用户信息。

当cond为假时，只需要用户信息。

问题是当cond为假时，我得到以下错误：

TypeError: (intermediate value)(intermediate value)(intermediate value)[Symbol.iterator]不是一个函数。

我理解的是，在这种情况下不能将布尔值用作扩展元素，例如...false。

但是...( cond ? extraInfo : {} ) 也似乎不起作用。

到底发生了什么？

- Liren Yeo

Answer 1

只管去做

...(cond ? extraInfo : [])

使用真实示例

var cond = true;

var extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
];

var userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
  ...(cond ? extraInfo : [])
];

console.log( userInfo );

使用 false 的演示

var cond = false;

var extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
];

var userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
  ...(cond ? extraInfo : [])
];

console.log( userInfo );

- gurvinder372

---

现在有意义了！所以对象没有 [Symbol.iterator] 协议就不能迭代，这就是为什么 ...{} 不起作用的原因？ - Liren Yeo

@AswinRamesh 不要这样做。这会更长，更令人困惑，并且只有在 extraInfo 为真时才有效。 - Bergi

@Liren 如果两个都是对象字面量，它就可以工作。例如 var obj = {s:1}; var obj2 = { ...obj } - gurvinder372

@Akxe 抱歉，我没听懂你的意思。 - gurvinder372

@Akxe extraInfo 是一个数组。 - Liren Yeo

Answer 2

有条件地将实体展开到 Object

console.log(
  { 
    name: 'Alex',
    age: 19,
    ...(true && { city: 'Kyiv' }),
    ...(false && { country: 'Ukraine' })
  }
) 

// { name: 'Alex', age: 19, city: 'Kyiv' }

将一个实体有条件地展开到数组中

console.log(
  [
    'Dan',
    'Alex',
    ...(true ? ['Robin'] : [])
  ]
)

// [ 'Dan', 'Alex', 'Robin' ]

- Purkhalo Alex

---

那么，将值展开到对象和数组之间的实际区别是什么？当尝试将值展开到数组时，会出现“Uncaught TypeError: boolean false is not iterable (cannot read property Symbol(Symbol.iterator))”错误。 - Qwerty

我不知道这可以做到。在某些使用情况下真的很简洁。棒！ - Daniel San

@Qwerty，这里的问题是对象引起了TypeError。像false && somethingElise这样的表达式将始终返回false，这是不可扩展的。您需要在这里使用三元运算符，并使用空对象（如果为false）类似于数组示例。 - Emanuele Scarabattoli

Answer 3

另一种方式：

cond为真：

var extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
]

var cond = true;
var userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
  ...(cond && extraInfo || [])
]
console.log(userInfo);

cond为假：

var extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
]

var cond = false;
var userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
  ...(cond && extraInfo || [])
]
console.log(userInfo);

- Faly

---

为什么不使用适当的三元运算符？ - Bergi

品味问题。 - Faly

正确性、简洁性和性能的问题。当然，你可能对它们有可怕的品味 :-) - Bergi

你确定三元运算符更高效吗？如果你不理解它，那并不意味着它很糟糕。 - Faly

是的，因为它不必评估 cond && extraInfo 表达式返回值的真实性。这只是一个操作，而不是两个。（此外：写出你的意思） - Bergi

Answer 4

const extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
];
const userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
];

const cond = true;
let getMyValue = cond ? [].concat(extraInfo, userInfo) : userInfo;

console.log(getMyValue)

- dinesh kumar

Answer 5

let getMyValue = cond ? [].concat(extraInfo, userInfo) : userInfo;

让我们来检查一下

const extraInfo = [
  {
    a: 11,
    b: 25
  },
  {
    a: 12,
    b: 34
  },
  {
    a: 1,
    c: 99
  }
];
const userInfo = [
  {
    z: 8
  },
  {
    z: 10
  },
];

const cond = false;
let getMyValue = cond ? [].concat(extraInfo, userInfo) : userInfo;

console.log(getMyValue)

- dinesh kumar

---

虽然这理论上回答了问题，但最好在此处包含答案的基本部分，并提供参考链接。 - Mat

嗨，我将我的答案放在部分底部，没有问题，让我们检查一下。 - dinesh kumar