六、解构赋值

对象解构赋值

首先看下有个对象如下所示：

const obj = {first: 'Asim', last: 'Hussain', age: 39 };

我们想去获取first和last的值赋值给一个变量，那么在es6之前，我们就得以下这么写

const f = obj.first;
const l = obj.last;
console.log(f); // Asim
console.log(l); // Hussain

但是在es6中我们有很简便的写法

const {first: f, last: l} = obj;
console.log(f); // Asim
console.log(l); // Hussain

{first: f, last: l}描述了一种模式，一套规则，用于我们想要如何去结构一个对象。

==const {first: f} = obj;转化去提取属性first然后赋值给f的变量==

如果我们想去提取属性到同名的变量中，我们会这样写：

const {first: first, last: last} = obj;
console.log(first); // Asim
console.log(last); // Hussain

而同名的话，还可以简化为以下代码

const {first, last} = obj;
console.log(first); // Asim
console.log(last); // Hussain

数组解构赋值

数组的解构赋值和对象差不多，只是数组是根据索引去取值的，如下

const arr = ['a', 'b'];
const [x, y] = arr;
console.log(x); // a
console.log(y); // b

函数参数解构赋值

在函数参数中，一种典型的做法就是，如果想传递多个参数，可能有一些可选的参数，然后我们就会当作对象传入

function f(options) {
  console.log(options.x);
}
f({x:1}); // 1

在上面的例子中，我们可以直接使用变量x，而不用通过对象是属性，像options.x
此外在使用解构赋值的函数参数时，还可以提供默认值，比如：

function f({x=0}) {
  console.log(x);
}
f({}); // 0

在上面的例子中，x现在有一个默认值0，即使它在调用时没有被传递到函数中。

总结

解构赋值在es6开始才有的，有了它我们可以从对象或者数组中取值，通过函数参数解构赋值，我们可以给函数提供可选参数，包括给予他们默认值