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

Question

这个问题在这里已经有了答案:





Spreading undefined in array vs object

(3 个回答)


2年前关闭。




今天更新了一些代码，将可选的 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还需要一个可迭代的。
但是，{...x}需要 x是可枚举的，因为它不仅需要值，还需要键。对象是可枚举的主要示例。null是可枚举的。 null有时被视为对象，这就是其中一种情况。对象是可枚举的，因为它们可以具有属性。 for (const p in null)同样会成功，因为 in需要一个可枚举的。