解构

主要应用于两种类型，一种是数组，一种是对象。

对象解构

• 看一个例子,如果要取到对象中的某个值，我们需要这样操作

    var expense={
        type:'es6',
        amount:'45'
    };

    var type=expense.type;

    var amount=expense.amount;

    console.log(type,amount); //es6,45

• 使用解构的话，我们可以这么写

    var expense={
        type:'es6',
        amount:'45'
    };

    const {type,amount}=expense;
    console.log(type,amount);//es6,45

• 如果对象中没有该属性，则会返回

    var expense={
        type:'es6',
        amount:'45'
    };

     const {type,amount,abc}=expense;
     console.log(type,amount,abc);//es6 45 undefined

小案例

获取对象中定义的某些值

• ES5实现

    var saveFiled={
        extension:'jpg',
        name:'es6',
        size:'1024'
    };

    function fileSammary(file) {
        return `${file.name}.${file.extension}的大小是${file.size}`
    };

    console.log(fileSammary(saveFiled));//es6.jpg的大小是1024

• ES6实现

    var saveFiled={
        extension:'jpg',
        name:'es6',
        size:'1024'
    };

    function fileSammary({name,extension,size}){
            return `${name}.${extension}的大小是${size}`
    };

    console.log(fileSammary(saveFiled));//es6.jpg的大小是1024

数组的解构

• 直接上例子，获取数组的值

    const names=['tom','bob','nike'];

    const [name1,name2,name3]=names;

    console.log(name1,name2,name3)//tom bob nike

• 如果想要获取数组中的长度，直接在花括号中输入 length；

     const names=['tom','bob','nike'];
    
     const {length}=names;
    
     console.log(length)//3

展开运算符进行解构

    const names=['tom','bob','nike'];

    const [name,...rest]=names;

    console.log(name)  //tom;
    console.log(rest) // ["bob", "nike"]

还可以这么操作

    let a,b;
   
    [a,b]=[100,200];

    console.log(a,b);

对象数组解构

获取对象数组中的某个属性

• ES5

    const people=[
        {names:"tom",age:20},
        {names:"bob",age:10},
        {names:"nike",age:24},
    ];

     var age=people[0].age;
     console.log(age);//20

• ES6

    const people=[
        {names:"tom",age:20},
        {names:"bob",age:10},
        {names:"nike",age:24},
    ];

     //二次解构
     const [{age}]=people;
    
     console.log(age)//20

使用场景

将数组转化为对象

    const point=[
        [4,5],
        [10,1],
        [0,10]
    ];

    //期望数据格式

    // [
    //     {x:4,y:5},
    //     {x:10,y:1},
    //     {x:0,y:10}
    // ]

    let newPoint=point.map(pair=>{
        const x=pair[0];
        const y=pair[1];

        return {x,y}
    })

    console.log(newPoint)

• 还可以进行优化一下

    let newPoint=point.map(pair=>{
       
         const [x,y]=pair;

         return {x,y}
    });

    console.log(newPoint)

• 再一步优化

   let newPoint=point.map(([x,y])=>{
       return {x:x,y:y}
   })

   console.log(newPoint);