es6学习过程（二）

1.解构赋值

什么是解构赋值呢？
官方的解释：ES6允许按照一定模式，从数据和对象中提取值，对变量进行赋值，这被称为解构。

单纯的文字上来看，可能不太好理解。但是呢，其实通过例子来学习的话还是比较简单的。下面来看看例子：

let arr = [4,5,6];//如果呢，按照以前的写法，我们可能会这样写// let a = arr[0];// let b = arr[1];// let c = arr[2];//如果数组特别长的话，我们这样写就会相当的麻烦//但是如果我们使用es6的话就会简单很多、let [a,b,c] = arr;console.log(a)console.log(b)console.log(c)

通过上述ES6的写法，是不是变得简单了很多呀。这样的写法结构看起来清晰易懂，而且还省去了麻烦的变量声明和赋值，这种叫做数组的解构赋值。

关于数据的解构赋值，需要注意以下几点:
1.解构赋值是可以嵌套的
简单的说呢，就是数组里面还可以是数组或者是其他对象什么的。就像上面我们举的栗子，只是一个简单的一维数组。下面的这个栗子就是多维的数组，但是解构赋值的方式也还是可用的。

let arr = [4,5,[8,9]];let [a,b,[e,d]] = arr;console.log(a)  //4console.log(b)  //5console.log(e)  //8console.log(d)  //9

2.数组的不完全解构
简单的说，就是等号两边的数组的长度是不一样的。那么在这种情况中，匹配的变量就会赋值成功。没有对应上的变量的值就是undefined。举个栗子来解释会更简单一些。

var [a,b,c] = [4,6];console.log(a) //4console.log(b) //6console.log(c) //undefined//如果是这样呢，又会是什么样的结果呢var [g,h] = [4,6,3];console.log(g) //4console.log(h) //6//当然，并没有什么特别的结果 --

3.允许设置默认值
解构赋值中是可以设置默认值的。当变量没有赋值成功的时候，变量的值就是默认值，当赋值成功的时候，变量的值等于数组对应位置的值。

let [a,b = 20] = [5];console.log(a) //5console.log(b) //20  这里使用的就是默认值噢let [a,b = 20] = [5,35];console.log(a) //5console.log(b) //35

前面讲的都是数组的解构赋值，接下来说一下对象的解构赋值
其实，对象的解构赋值和数组的解构赋值比较相似的。但是还是有一些区别的。接下来看看下面的两段代码：

    var { a,b,c} = {"a":1,"b":2,"c":3};    console.log(a);//结果：a的值为1        console.log(b);//结果：b的值为2    console.log(c);//结果：c的值为3

    var { a,b,c } = {"a":1,"c":3,"b":2};    console.log(a);//结果：a的值为1    console.log(b);//结果：b的值为2    console.log(c);//结果：c的值为3

有没有发现有什么不同的地方呢？ 没错！b和c的位置交换了一下，但是上面两段代码中b和c的值还是一样的。这说明了什么问题。在对象的解构赋值中，左边变量的名字和右边属性的名字能一一对应，即使位置不一样，解构赋值还是可以成功的。如果变量找不到与其名字相同的属性，就会赋值不成功。下面就是一个不成功的栗子：

var { a } = {"b":2};    console.log(a);//结果：a的值为undefined

下面说说对象解构赋值需要注意的几点：
1.对象的解构赋值也是可以嵌套的
这就是对象解构赋值最简单的栗子：

let obj = {a:{b:100}};let {a:{b}} = obj;console.log(b) //100

字符串的解构赋值
下面就是解构赋值中比较基础的用法:

    var [a,b,c,d,e,f] = "我就是老司机";    console.log(a);//我    console.log(b);//就    console.log(c);//是    console.log(d);//老    console.log(e);//司    console.log(f);//机

上面说了这么多解构赋值的用法，下面看看实际中我们是如何使用的。
1.交换变量的值
以前我们的写法都是通过第三个变量来实现两个变量的值进行互换，就像下面这个栗子

    var x = 1;    var y = 2;    var z = x;//第三个变量临时存放x的值    x = y;  //把y的值赋给x；    y = z;  //把z的值赋值给y；    console.log(x); //结果：x为2    console.log(y); //结果：y为1

上面是我们常规的写法，下面是我们ES6的写法

    var x = 1;    var y = 2;    [x,y] = [y,x];

通过ES6的写法，代码是不是简单了很多，而且结构更加的清晰明了。

2.提取函数的多个返回值
这个作用在日常的开发中用的还是比较多的，而且真的很方便。

let JSON = {    name:'小白',    id:131106015,    city:'青岛',    chengji:[{        math:100,        English:50    }]};//在平常的开发中，ajax请求是非常的常见的,这是我们以前的写法getStudentScout().then(res =>{    name:res.body.JSON.name;    id:res.body.JSON.id;    city:res.body.JSON.city;    chengji:res.body.JSON.chengji;})//但是使用解构赋值的方式，会简单很多getStudentScout().then(({body:{JSON:{name,id,city,chengji}}}) =>{    name:name;    id:id;    city:city;    chengji:chengji;})

3.定义函数的参数

    function demo({a,b,c}){        console.log("姓名："+ a);        console.log("身高："+ b);        console.log("体重："+ c);    }    demo({a:"张三",b:"1.72m",c:"50kg",d:"8000"});

通过这种写法， 很方便就能提取JSON对象中想要的参数，例如案例中，我们只需要获取实参中的：a，b，c，而不需要关其他的参数，比如：d或者其他更多的参数。

4.函数参数的默认值
传统的参数默认值的实现方式是，先判断该参数是否为undefined，如果是代表没传，需要手动给它赋一个值，如：

function demo(a){        var name;        if(a === undefined){//判断参数书否是否传值       name= "张三"; //没传，赋默认值     }else{            name= a;        }        console.log(name);    }

但是有解构赋值就会简单很多。

    function demo({name="张三"}){        console.log("姓名："+name);//结果：姓名：张三    }    demo({});

通过设置函数参数的默认值，将代码简化了很多。

总结
解构赋值给我们一种新的变量赋值方式，主要可以利用数组解构赋值和对象解构赋值。它的用途包括：交换变量值，提取函数返回值，函数参数定义，默认值设定等等，都给我们编程带来便利，在未来的代码中会见到越来越多人使用这个新特性。

本文参考了微信公众号‘web前端教程’，喜欢的同学可以关注一下。里面的ES6和VUE的教程 都讲的通俗易懂。