变量的解构赋值

1. 数组的解构赋值

基本用法:ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

    //以前，为变量赋值，只能直接指定值。

var a = 1; var b = 2; var c = 3;
 
    //ES6允许写成下面这样。
 
var [a, b, c] = [1, 2, 3];
 
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1  bar // 2 baz // 3
 
let [x, , y] = [1, 2, 3];
x // 1 y // 3
 
let [x, y, ...z] = ['a'];
x // "a" y // undefined z // []
 
let [head, ...tail] = [1, 2, 3, 4];
head // 1 tail // [2, 3, 4]

 
 let [ , , third] = ["foo", "bar", "baz"];
third // "baz"    

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

• 数组模式和赋值模式统一
• 解构的默认值：

在解构赋值时，是允许使用默认值的。举例如下：

{
    //一个变量时
    let [foo = true] = [];
    console.log(foo); //输出结果：true
}
{
    //两个变量时
    let [a, b] = ['生命壹号']   //a 赋值为：生命壹号。b没有赋值
    console.log(a + ',' + b); //输出结果：生命壹号,undefined
}
{
    //两个变量时
    let [a, b = 'smyhvae'] = ['生命壹号']   //a 赋值为：生命壹号。b 采用默认值 smyhvae
    console.log(a + ',' + b); //输出结果：生命壹号,smyhvae
}

• undefined和null的区别：

如果我们在赋值时，采用的是 undefined或者null，有什么区别？

{
    let [a, b = 'smyhvae'] = ['生命壹号', undefined]; //b 虽然被赋值为 undefined，但是 b 会采用默认值
    console.log(a + ',' + b); //输出结果：生命壹号,smyhvae
}
{
    let [a, b = 'smyhvae'] = ['生命壹号', null];  //b 被赋值为 null
    console.log(a + ',' + b); //输出结果：生命壹号,null
}

undefined：相当于什么都没有，此时 b 采用默认值。
null：相当于有值，但值为 null。

2. 对象的解构赋值

    let { foo, bar } = { bar: '我是 bar 的值', foo: '我是 foo 的值' };
    console.log(foo + ',' + bar); //输出结果：我是键 foo 的值,我是键 bar 的值

注意：对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

• 圆括号的使用：

如果变量 foo 在解构之前就已经定义了，此时你再去解构，就会出现问题。下面是错误的代码，编译会报错：

    let foo = 'haha';
    { foo } = { foo: 'smyhvae' };
    console.log(foo);

要解决报错，只要在解构的语句外边，加一个圆括号即可：

    let foo = 'haha';
    ({ foo } = { foo: 'smyhvae' });
    console.log(foo); //输出结果：smyhvae

3. 字符串解构

const [a,b,c,d,e,f]="12345";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
//1
//2
...
//undefined