为什么 JavaScript 的扩展语法允许 {...null} 而不允许 [...null]？ [复制]

Question

今天更新了一些代码，将可选的 props 返回到 React 组件。我发现即使函数有时返回null，当返回值立即解包时它也不会出错。

迂腐的代码总结：

const returnPropsOrDont = (condition) => {
  if (condition) return null;
  return { optionalProp: 'foo' };
}
...
render() {
  const { condition } = props;
  return <SomeComponent
           staticProp="staticProp"
           {...returnPropsOrDont(condition)}
         />
}

意识到这很酷，我跑到控制台并在对象和数组上进行了尝试。唉-

   > {...null} // {}
   > {...undefined} // {}, which is interesting because null is an object but undefined is not
   > [...null] // Uncaught TypeError: object null is not iterable

我做了一些简单的谷歌搜索和found one article，这表明 TypeScript 认为这是一个确保可选定义的值不会困扰毫无戒心的开发人员的功能。很好，但是 a) 我没有使用 TypeScript，并且 b) 我不知道为什么 JS 不会以同样的方式保护数组。

既然这似乎是对可选定义值的一种保护，为什么{...null} 可以，而[...null] 不行？

Answer 1

通常，...x 的使用要求x 是可迭代的，因为... 的目的通常是将可迭代对象展平为其组件。

null 不是可迭代。它没有组件，因此迭代null 是没有意义的。 for (const e of null) 同样会失败，因为of 也需要一个iterable。

但是，{...x} 要求 x 是可枚举的，因为它不仅需要值，还需要键。

null 是可枚举的。 null 有时被视为对象，这就是其中一种情况。对象是可枚举的，因为它们可以具有属性。 for (const p in null) 同样会成功，因为in 需要一个可枚举。

Answer 2

[...null] - 这里使用 spear 运算符，它仅适用于可迭代对象（如字符串、数组、生成器或自定义可迭代对象），但 null 不是可迭代对象并且会收到错误。您可以通过添加特殊属性 Symbol 来创建自己的可迭代对象。迭代器

{...null} - 因为typeof null == 'object' 有效，但在现实生活中它没有意义