JS-解构

1 什么叫解构赋值？
2.数组的解构赋值。
3.对象的解构赋值
4.字符串的解构赋值
5.数值和布尔值的解构赋值
6.函数参数的解构赋值
7.用途

1.什么叫解构赋值

ES6允许按照一定的模式，从数组和对象中取值，对变量进行赋值，这被称为解构(Destructuring) . --阮一峰在ES5中，为变量赋值，只能采用直接指定值的方式。例如

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

在ES6中允许这样写

 let [a,b,c] = [1,2,3];

这样写的意思是，可以从数组中提取值，按照相应的位置，对变量赋值 模式匹配是这种写法的本质：只要等号两边的模式相同，两边对应的值也就相同。

    let [a,[[b],c]] = [1,[[2],3]];

只要两边的模式相同，对应位置的值也是对应变量的值。

    let [head, ...tail] = [1, 2, 3, 4]; 
    head // 1 
    tail // [2, 3, 4]

2.对象的解构赋值

对象的解构和数组的解构不同之处： 数组是按照相对应的次序来排列取值的；数组的取值由它的位置决定；对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

    let {b,a} = {
        a : '111',
        b : '222'
    }
    a // 111   b // 222

变量名要和属性名一致

如果变量名和属性名没有一致，就必须写成下面这样子：

    let {a:foo,b:bar} = {
        a : '111'
        b : '222'
    }
    foo // 111  bar // 222
    let obj = { first: 'hello', last: 'world' }; 
    let { first: f, last: l } = obj; 
    f // 'hello' l // 'world'

这说明了对象的解构赋值是以下形式的缩写：

 let  { a: foo} = { a : '111'}

3.字符串的解构赋值

    const [a,b,c,d,e] = 'hello';
    a//h
    b//e
    c//l
    d//l
    e//o

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

用处不大。

5.函数参数的解构赋值

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

6.用途

（1）交换变量的值

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

(2) 函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

    function demo(){
        return [1,2,3];
    }  
    //返回三个，就用三个值接收 
    let [a,b,c] = demo();
    function demo2(){
        return {
            foo:1,
            bar:3
        }
    }
    //返回一个对象，用一个对象来接收
    let {foo,bar} = demo2();

（3）提取JSON数据解构对json对象中的数据，特别有用。

//解构赋值对JSON对象，提取数据特别有用。
    let jsonData = {
        id:42,
        status:'ok',
        data:[874,234]
    }
    let {id,status,data:number} = jsonData;
    console.log(id,status,number);
    // 42,ok [874,234],
    //使用解构赋值可以快速的提取JSON数据的值

ES6学习笔记--解构