JavaScript ES6展开运算符在未定义的情况下

Question

115

在开发React应用程序时，我需要向一个组件发送一个条件属性，因此我找到了一个模式来实现这个功能，尽管这对我来说似乎非常奇怪，我不明白它是如何以及为什么起作用。

如果我键入：

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

当对未定义的值使用展开运算符时，会引发错误。然而当未定义的值位于一个对象内时，会返回一个空对象。

关于这种行为，我感到相当惊讶。这确实是预期的行为吗？我能否依赖它，并且这是一种好的实践吗？

- omri_saadon

我认为任何依赖于迭代器的东西都会因为null或undefined而抛出异常，因为在这些值上没有办法实现所需的方法。我不知道对象展开语法为什么能够工作。 - llama

说起来，我想对象字面量扩展语法不会失败是有道理的，因为它所扩展的通常是另一个普通对象，而这些对象默认情况下不是迭代器，所以在这种情况下几乎必须要做出例外。 - llama

{...undefined} 这甚至无法通过Babel编译，所以我不会使用它。 - Keith

1

算了，它需要 stage-0，所以我认为它不是 ES6.. 这个扩展特性会成为 ES7 吗？ - Keith

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- strider · Accepted Answer

这种行为在执行类似可选展开的操作时非常有用:

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
  } 
}

一种想法：可惜它不能用于扩展成数组