javascript - 未定义的 Javascript ES6 扩展运算符

Question

在开发我的 react 应用程序时，我需要向组件发送一个条件 prop，因此我在某个地方找到了这样做的模式，尽管这对我来说似乎很奇怪，我无法理解它是如何以及为什么工作的。

如果我输入：

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

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

我对这种行为感到非常惊讶，这真的是应该的吗，我可以依靠这个吗？这是一个好习惯吗？

Answer 1

此行为对于执行可选传播之类的操作很有用：

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

现在使用可选链接Stage 4（并且已经在 TypeScript 3.7+ 中可用） ，它会变得更好：

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

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