ES6学习（二）---变量的解构赋值

1.数组的解构赋值

（1）等式左右两边结构相同，等式右边的值就会被赋值给等式左边的

let [a,b,c] = [1,2,3];
//相当于a =1 ,b =2, c =3
let [head,...tail] = [1,2,3,4];
//tail 4
//head 1

let [a, b ,...c] = ['a'];
//a "a"
//b undefined
//c []

（2）不完全结构的情况

//情况1
let [a,b,c] = [,,1];
//a undefined,b undefined, c 1;

//情况2
let [foo] = [];
//foo undefined

//情况3
let [x,y] = [1,2,3];
//x 1
//y 2

//情况4
let [x,[y],z] = [1,[3,4],5];
//x 1
//y 3
//z 5

（3）默认值的处理。当变量严格上 === undefined时,变量就会变赋于默认值

let [x,y=5] = [1,];
//x 1
//y 5

let [x, y=5] = [1,1];
//x 1
//y 1 

let [x,y=5] = [1,null];
//当赋值为null时，而null === undefined  为false,因此
//x 1
//y null

2、对象的解构赋值

（1）我们先看简单的对象结构赋值

let {a, b} = {a: 1, b: 2};
//a   1
//b   2
//a的值为1，b的值为2

在理解对象的结构赋值时，只需要把左边的等式看做一个模式就可以了，其实上面的等式等价于

let {a: a, b: b} = {a: 1, b: 2};
//a   1
//b   2
//a的值为1，b的值为2

其中a: a和b: b的第一个a和b都可以看成模式，此时它们是不可以被赋值的，理解了这一点，我们看下面的复杂一点的。

let first = {
    name: ['hello',{age: 18}];
};
let {name: [a, {age}]} = first;
// a    'hello'
// age   18
//这是一个数组和对象的嵌套模式，只要弄清楚，这里的name和age只是对象解构赋值中的一种模式就可以了。理解起来就很简单的。。。

下面还有个例子

const x = { a: 
    {
    b: {
        c: 'zhangsan'
        }
    }
};
let {a, a: {b}, a: {b: {c}}} = x;
//a  Object  {b:{c:'zhangsan'}}
//b Object  {c: 'zhangsan'}
//c  'zhangsan'

还有就是不能在已经直接用花括号直接对象的赋值，如下

let x;
{x} = {x: 1}
//这里肯定是会报错的，因为es6语法会默认把首行花括号当成一个作用域解析。


//正确的写法应该是用一个括号包裹起来
let x;
({x} = {x: 1});

（2）对象的赋值也有默认值
实例如下

let {a, b = 3} = {a: 1};
//a   1
// b   3

同样也遵循赋值时完全等于undefined（====）才取默认值。

let {x: 3} = {x: undefined};
// x    3

值得注意的是当子对象的父属性不存在时，这个时候会报错

let {name: { bar } } = {baz: 'baz'}
//这个时候name模式后的属性值是匹配不到的。所以会报错。
其实就相当于
let _obj = { baz: 'baz'};
_obj.name.bar //undefined

3.字符串的解构赋值

(1)在解构赋值的时候，字符串会被转变成类似数组的对象

const [a,b,c,d,e] = 'length';
//a   l
//b   e
//c   n
//d   g
//e   t

（2）字符串类似数组对象一样有length属性

const {lenght: len} = 'abcdef';
//len  6

4.数值和布尔值的解构赋值

let [toString: a] = 123;
let [toString: b] = true
//只要等号右边不是数组和对象，解构赋值时，等号右边就会先转为对象。
//注意： 由于undefined和null不能转为对象，所以他们解构赋值时会报错。
//a [Function: toString]
//b [Function: toString]

5.函数参数的解构赋值

（1）

function sum([a,b]) {
    return a + b;
}
sum([3, 4]);//7
//函数会直接把a和b解构为变量

（2）函数参数的默认值问题

function sum ({a=3,b=3} = {}) {
    return a + b;
}
sum({});//a 3, b 3
sum({a:1,b:2});//a 1,b 2
sum({a:4});// a 4,b 3
sum();//a 3, b 3

6.圆括号的使用

注意：赋值语句下的非模式部分可以使用圆括号。（变量声明，以及函数声明，模式部分是不能使用圆括号的，会报错）