ES6学习笔记之--变量的结构赋值

对于ES6的了解一直停留在几个常用的知识点，没有深入完整的去学习，最近抽空看了一套教程，对ES6有了一个比较全面的理解，记录下来当做复习。

ES6允许按照一定的顺序，从对象和数组中提取值，对变量进行赋值，这被称为解构。这可以大大简化我们的赋值操作，使代码解构更加简洁，清晰。

以前对变量的赋值，只能直接指定值

let a = 1;
let b = 2;
let c = 3;

而现在我们可以通过数组解构来进行赋值

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

从上面的代码可以看出，变量会从数组中提取值，按照对应的顺序进行赋值

本质上，这种写法属于“模式匹配”，即等号左边和右边的模式相同，左边的变量就会被赋予对应的值，来看几个嵌套模式的赋值

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

如果等号两边形式不一样，很可能会获得undefined或者直接报错

解构赋值允许使用默认值

let [a,b=2] = [1];
console.log(a); //1
console.log(b); //2

右边没有赋值时，变量b会直接使用默认值2

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

此时，b的默认值会被新的赋值覆盖

解构同样可以应用于对象

let {name,skill} = {name:'慕城',skill:'web'};
console.log(name); //慕城
console.log(skill); //web

注意：对象的解构和数组有所不同，数组的元素是按次序排列的，变量的取值由它的位置决定，对象的元素没有次序，而是按照属性名确定，属性名相同，才能获取到正确的值。

如果在使用对象解构之前定义了变量，这时候再解构就会出现错误

let status;
{status} = {status:'error'};
console.log(status);

上面这段代码会报错，要解决这个问题，只需要给解构语句外层加上圆括号

let status;
({status} = {status:'error'});
console.log(status); //error

字符串也可以解构，此时字符串被转换成类似数组的对象

let [a,b,c] = 'web';
console.log(a); //w
console.log(b); //a
console.log(c); //b