为什么 {。 . . .0} 评估为 {}？

Question

我刚刚在朋友的代码中找到了{....0}。在控制台中评估它会返回{}（空对象）。

这是为什么呢？ JavaScript中的4个点是什么意思？

Answer 1

扩展运算符{...} 允许扩展可迭代对象。这意味着可以扩展那些可以以key-value 对形式定义的数据类型。在Object 方面，我们将键值对称为对象属性，它是值，而在arrays 方面，我们可以将索引视为键，将数组中的元素视为值。

let obj = { a: 4, b: 1};
let obj2 = { ...obj, c: 2, d: 4}; // {a: 4, b: 1, c: 2, d: 4}

let arr1 = ['1', '2'];
let obj3 = { ...arr1, ...['3']}; // {0: "3", 1: "2"}

在数组方面，由于它以索引为键，所以这里它将arr1的元素'1'替换为'3'，因为它们在不同的数组中具有相同的索引。

字符串过于展开运算符返回非空对象。由于字符串是一个字符数组，所以它将字符串视为一个数组。

let obj4 = {...'hi',...'hello'}   // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
let obj5 = {...'y',...'x'}   // {0: "x" }

但是对于其他原始数据类型，它返回空对象

有数字

let obj6 = { ...0.0, ...55} // {}

带布尔值

let obj7 = { ...true, ...false} // {}

总之，当与扩展运算符{...} 一起使用时，可以以键值对形式处理的那些数据类型返回非空对象，否则返回空对象{}

Answer 2

对象字面量中的三个点是一个扩展属性，例如：

  const a = { b: 1, c: 1 };
  const d = { ...a, e: 1 }; // { b: 1, c: 1, e: 1 }

最后一个带 0 的点是数字文字 .0 与 0.0 相同。因此：

 { ...(0.0) }

将数字对象的所有属性传播到对象中，但是由于数字没有任何（自己的）属性，您会得到一个空对象。

Answer 3

简而言之，javascript 中的 {...} 扩展运算符用另一个对象/数组扩展了一个对象/数组。

因此，当 babelifier 尝试与另一个扩展时，它必须识别它是在尝试扩展数组还是对象。

对于array，它会遍历元素。

对于object，它会遍历键。

在这种情况下，babelyfier 正在尝试通过检查对象的 own property call 来提取 number 的键，而 number 缺少该 number，因此它返回空对象。

Answer 4

四个点实际上没有任何意义。 ... 是 spread operator，.0 是 0.0 的缩写。

将 0（或任何数字）传播到对象中会产生一个空对象，因此是 {}。