Javascript 未定义的 ES6 扩展运算符

Question

在开发我的 React 应用程序时，我需要向组件发送一个条件道具，所以我在某个地方找到了这样做的模式，尽管这对我来说真的很奇怪，而且我不明白它是如何工作的以及为什么工作。

如果我输入：

console.log(...undefined)   // Error 
console.log([...undefined]) // Error
console.log({...undefined}) // Work

当展开运算符在 undefined 上激活时会引发错误，尽管当 undefined 在对象内部时，会返回一个空对象。

我对这种行为感到非常惊讶，它真的应该是这样吗，我可以依赖它吗？这是一个好的做法吗？

Answer 1

此行为对于执行类似 optional spreading:

的操作很有用

function foo(options) {
  const bar = {
    baz: 1, 
    ...(options && options.bar) // options and bar can be undefined
  } 
}

而且 optional chaining, which is in Stage 4 now (and already available in TypeScript 3.7+ 会变得更好):

function foo(options) {
  const bar = {
    baz: 1, 
    ...options?.bar //options and bar can be undefined
  } 
}

一个想法：太糟糕了，它也不能传播到数组中

Javascript ES6 spread operator on undefined