JavaScript ES6中，对象解构和普通对象赋值有什么区别？

Question

除了语法之外，这两个代码示例有什么区别吗？

示例1：

var user = {
   name: 'Diego',
   age: 25
}

var {name} = user;

console.log(name); // Diego

例子 2：

var user = {
   name: 'Diego',
   age: 25
}

var name = user.name;

console.log(name); // Diego

这两个示例分配相同的值。我不知道使用哪个有什么不同或优势。

- Diogo Capela

---

解构是一个方便的快捷方式，当你有一个包含许多其他内容的对象时，你想一次性“提取”许多值。 - Carcigenicate

Answer 1

让我们将其扩展到多个属性：

var {foo, bar, baz} = user;

在传统语法中，这样写：

var foo = user.foo,
    bar = user.bar,
    baz = user.baz;

对于每个属性，我们必须重复要访问的对象（user）和属性名foo = ... .foo。新的语法使得你少重复自己更容易。

如果对象还没有存储在变量中，则还有另一个区别：

var {foo, bar, baz} = getUser();

现在我们不能只是这样做

var foo = getUser().foo,
    bar = getUser().bar,
    baz = getUser().baz;

因为每次调用 getUser 可能会引起不同的副作用，或者仅仅是低效（因为我们在重复工作）。我们需要创建一个新的本地变量来存储对象，只是为了初始化我们真正关心的三个变量。

- melpomene

Answer 2

没有实际区别，但解构更加方便：

var user = {
   name: 'Diego',
   age: 25
}

var {name, age} = user;

这句话在一个语句中声明并初始化了name和age，避免了重复提及属性名称。

- Pointy