Javascript ES6中的对象解构和普通对象分配有什么区别？答案

【问题标题】：What's the difference between object destructuring and normal object assignment in Javascript ES6?Javascript ES6中的对象解构和普通对象分配有什么区别？
【发布时间】：2017-07-08 01:43:51
【问题描述】：

这两个代码示例有什么区别（当然除了语法）？

示例 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

两个示例都分配了相同的值。我不明白使用两者有什么区别或优势/优势。

【问题讨论】：

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

标签： javascript ecmascript-6 javascript-objects

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

【讨论】：

【解决方案2】：

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

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

var {name, age} = user;

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

【讨论】：