未定义的 JavaScript ES6 扩展运算符

Question

这个问题已经有答案了:

Spreading undefined in array vs object (3 个回答)

已关闭 5 年前。

在开发我的 React 应用程序时，我需要向组件发送条件属性，因此我在某处找到了一种模式来执行此操作，尽管这对我来说似乎很奇怪，而且我无法理解它是如何以及为什么工作的。

如果我输入:

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

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

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

Answer 1

此行为对于执行诸如可选传播之类的操作非常有用:

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

使用 optional chaining 会变得更好，现在处于第 4 阶段(并且已经 available in TypeScript 3.7+):

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

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