ES6解构赋值

      近期看了自己往期写的东西，发现比较乱，自己写博客，除了巩固自己学的东西以外，也是希望给那些和自己一样还在踩坑的骚年们一些启示，但是web前端毕竟是一个非常庞杂的体系，没有按照一定的体系去梳理自己所学的东西的话，那么确实可能收效甚微，从这周开始，自己也是在学习阮一峰大大的ES6标准入门这本书，结合MDN上面的一些例子，去记录这个学习的过程。

      解构赋值语法是一个 Javascript 表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。这个是MDN中关于解构赋值的一个概述，解构赋值也是比较简单的一个新的语法规范，大家读完这个MDN的内容肯定都是会有一些了解，本篇也是主要说下一些其中比较容易犯错的地方。

     解构赋值总主要有两个部分，即数组的解构，和对象的解构赋值。先说数组的解构赋值，数组的解构赋值就是直接声明并赋值的方法

var [a, b, c] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);
//1,2,3

var [a, b, c] = [1, 2];
console.log(a);
console.log(b);
console.log(c);
//1,2,undefined

这个也是非常容易理解，按顺序将右边的数组的值一一赋给左边的变量，如果出现右边的数组的值不够，解构不成功的话，那么变量的值就等于undefined，另外需要注意的地方，右边如果是不可遍历的解构，或者通俗来说，右边不是数组的话，那么解构失败，是会报错的，这个是比较容易犯错的地方。关于可遍历解构，ES6有一个Iterator接口，后续自己学习到的话再来说。

      另外一个自己觉得可能容易犯错的地方，默认值的运用，即

var [x = 1] = [];
x // 1

var [x = 1] = [undefined];
x // 1

var [x = 1] = [null];
x // null

可以看出来，就是在右边的值严格等于undefined的时候，默认值才会生效，否则的话默认值是不会生效的。下面在说说对象的解构赋值，道理其实都是一样的，但是有一点需要注意的就是如果你是先赋值变量，然后再进行解构赋值操作的话，下面的表达式则会报错。

let foo;
{foo} = {foo: 1};
// syntax error

let foo;
let {foo} = {foo: 1};
// syntax error

第一个例子是因为js引擎会将{}中的内容解释为一个代码块从而发生错误，正确的写法就是在外面加上一个括号（），

let foo;
({foo} = {foo: 1};)

这样就可以避免错误了，第二个例子则是let的特性导致的，let和const都是一样的，不能重新声明变量，一旦赋值的变量以前声明过就会报错。

       另外则是博主觉得可能用的比较多的解构赋值，就是函数参数的解构赋值，

function add([a, b]){
    return a + b;
}
add([1,2]); // 3


function move({a=0,b=0}={}){
    return [a, b];
}
move({a:3,b:5});  //[3,5]
move({a:3});  //[3,0]
move({});  //[0,0]

同样我们也可以给函数参数解构加上默认值，如果右边的值严格等于undefined的话，则采用默认值，这样的一个写法可以避免很多诸如

let a = c + d || '';

这样的一个验证式的写法，有了解构赋值就可以在运行函数的时候就进行判断参数的值了，可以节省很多功夫。纵观解构赋值还是比较简单的，ES6入门这本书还提及到了一些遍历接口等等，此篇也是作为后续学习的一个基础，也是希望带给大家和自己一些启示。