ES6-解构

引子
不知道你是否有过这样的经历，在使用 ajax 请求数据后，数据对象中的每个属性都需要单独进行提取或使用 data.xxx 的方式来使用，或是需要对数组中的一些成员单独提取赋值给变量方便使用，在 ES6 前，这些操作过于繁琐且没有好的解决方式，而在 ES6 中，解构可以完美的解决这个问题

简介
解构是 ES6 中最灵活、强大的特性之一，通过它可以快速将可遍历对象（对象、数组、类数组等）中的属性或成员值绑定到任意数量的变量，极大的简化了数据的提取

对象解构
首先我们来模拟一个典型的 json 数据：

var data = {
    error: 0,
    data: {
        title: '冬天',
        describe: '很冷'
    }
}

其中包含了错误代码、数据对象，对象内部定义了标题和描述，以前我们想要提取数据，往往会这样书写代码：

var title = data.data.title;
var dascribe = data.data.describe;

但是我们使用 ES6 的话，通过解构语法，可以这样写：

var { title, describe } = data.data;

打印一下输出：

console.log(title, describe)
// => 冬天 很冷

事实上，以上两种写法是等价的，我们可以感受到后一种写法语义更加清晰，结构也更加简洁，在数据量更大时，会更加明显。
需要注意的是，由于对象中的属性不会保证顺序，所以为了保证解构的正确，变量名需要与属性名相同，即 title 会对应 data.data.title，如果写成对象中不存在的变量，会得到 undefined
但是在开发过程中，我们也许并不总希望使用数据对象中的属性名称，这时就可以解构别名语法，来自定义想要使用的名称：

var { title, describe: intro } = data.data;

此刻，describe 变量就会失效了，因为如果指定了别名，则冒号前的变量名就只起到定位的作用，如果我们仍然尝试打印它，会得到错误：Uncaught ReferenceError: describe is not defined
以上是对象解构的简单用法，其实，解构语法支持嵌套形式，允许我们快速的提取不同层级的多个属性，仍以上面的数据对象为例，但是我们需要额外提取错误代码：

var {error, data: { title, describe: intro }} = data;

输出结果如下：

console.log(error, title, intro);
// => 0 "冬天" "很冷"

可以看到，我们通过 : 语法定位到了 data.data 这个数据对象，提取了其中的属性并为 describe 设置了别名
开发过程中，另一种常见的情况是 我们希望获取指定属性，但是数据对象中不能保证会包含该属性，这时可以通过为解构变量设置默认值的方式来避免在未得到预期数据时抛出错误：

var { year = 2019, title, describe } = data.data;

结果如下：

console.log(year, title, describe);
// => 2019 "冬天" "很冷"

最后需要注意的一点就是：在同时使用默认值与别名语法时，需要将别名放在前面，默认值放在后面：

var { title, describe: intro ='描述'  } = data.data;

数组解构
数组解构与对象解构非常相似，先来看一下示例：

var arr = ['零', '一', '二', '三'];
var [zero, one, two] = arr;

打印输出：

console.log(zero, one, two);
// => 零 一 二

可以看到，数组的解构与对象最大的不同就是使用中括号替代了大括号，并且由于数组内的成员是可以保证顺序的，所以我们只要在其索引对应的位置书写变量名就可以保证变量与值正确对应了
解构数组时支持跳过不需要的成员值，留空即可，例：

var [zero, one, , three] = arr;

输出如下：

console.log(zero, one, three);
// => 零 一 三

与对象解构相似，数组解构时也允许设置默认值：

var [zero, one, , , four = '四'] = arr;

让我们打印一下输出：

console.log(zero, one, four);
// => 零 一 四

数组解构也支持嵌套语法，但是使用较少，来看一下示例：

var arr = [1, [[2], 3]];
var [a, [[b], c]] = arr;

这里我们声明了一个嵌套的数组，索引为 0 的成员是值为 1 的数字，索引值为 1 的成员则是一个嵌套数组，其中包含了仅有一个成员数字 2 的数组与数字 3，第二行代码中，我们用完全相同的结构进行解构，打印输出：

console.log(a, b, c);
// => 1 2 3

函数参数解构
ES6 中提供了为函数参数设置默认值，并且支持在参数集合中直接进行对象的解构操作：

// 声明函数
function fn({zero, one, two}) {
    console.log(zero, one, two);
}
// 声明数据对象
let num = {
    zero: 0,
    one: 1,
    two: 2
}
// 执行函数并传递数据对象
fn(num);

输出：

// => 0 1 2

通过这些新特性我们可以很轻松的实现函数参数的动态设置：传递对象作为参数，通过解构语法提取必要的属性，并为非必需属性设置默认值，示例：

/**
 * 发送 ajax 请求
 * @url        必需，地址
 * @method    可选，请求方式，默认值为 get
 * @query    可选，query 数据
 * @data    可选，携带数据，仅 post 方式支持发送请求正文
 * */
function ajax({url, method = 'get', query = {}, data = {}}) {
    console.log(url, method, query, data);
}

ajax({
    url: 'http://www.baidu.com',
    query:{
        wd: 'query'
    }
})

输出如下：

http://www.baidu.com get {wd: "query"} {}

这个例子中，我们简单模拟了 jquery 中 ajax 方法的参数设置，通过解构语法快速提取属性，并为非必需属性设置默认值，非常灵活、简洁
结语
解构到这里就告一段落了，后边会写一下 ES6 中新增的扩展、剩余运算符