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而没有多余地提及属性名称。