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

两个示例都指定了相同的值。我不明白使用它们的区别或优势/优势。

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可能会做不同的事情（由于副作用）或只是效率低下（因为我们重复工作）。我们必须创建一个新的局部变量来存储对象，只是为了初始化我们实际关注的三个变量。

Answer 2

没有有效的区别，但解构很方便：

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

var {name, age} = user;

在一个语句中声明并初始化name和age，没有多余的属性名称。