JS解构复杂语句？

Question

let messages = {
  1: {
    id: '1',
    text: 'Hello World',
    userId: '1',
  },
  2: {
    id: '2',
    text: 'By World',
    userId: '2',
  },
};

// what does this statement do?
const {
  [1]: message,
  ...otherMessages
} = messages;

console.log("other messages: ", otherMessages);

我们没有一个名为otherMessages的变量，那么剩余语法怎样在这个变量上工作？总体上，上述语句是做什么的，它有些复杂？

- Henok Tesfaye

---

这只是普通的对象解构，其中您可以收集otherMessages中其余的属性。 - VLAZ

@CodeManiac，我不认为这是重复的。 - Henok Tesfaye

@CodeManiac 很棒，我正在寻找有关解构的规范，而你已经在一个月前（恰好是今天！）制作了一个。 - VLAZ

@HenokTesfaye 你有检查链接的答案吗？如果你没有找到相关的答案，就让我知道。 - Code Maniac

在JavaScript中，不存在所谓的“扩展运算符”。Spread和rest都是语法，但它们都不是运算符。这是rest语法的一个例子，因为它正在从“messages”中收集逗号分隔的条目，而不像spread语法那样将逗号分隔的条目分配到任何地方。 - Patrick Roberts

Answer 1

这是一种解构赋值。请参阅MDN获取更多信息

在等号=的左侧声明要被解构的变量，在右侧声明要解构的变量。

通过这样做，您声明了两个变量message和otherMessages：

const { [1]: message, ...otherMessages } = messages;

你正在提取键 1 的值到 message 中，messages 对象的其余部分将被解构为 otherMessages。

由于 messages 包含键 1 和 2 两个条目，因此 otherMessages 将是一个包含其余键（仅为键 2）的对象。

- jo_va

Answer 2

尝试分配变量otherMessages时，运行时会检查它的声明位置。如果它向上遍历作用域，达到了顶层（在这种情况下是window对象），则会声明变量并使用解构语法对其进行赋值。

再从另一个角度来考虑：如果您要做类似以下的事情：

otherMessages = [1, 2]

如果没有事先声明otherMessages作为变量，运行时会自动为您声明变量吗？

- Radu Diță

---

“没有事先声明otherMessages变量，运行时会为您声明变量吗？” 不完全是这样。如果找不到变量的绑定，则会沿着作用域链向上查找，它会在全局对象上创建一个名为otherMessages的新属性并将值分配给它。 - VLAZ