【JS】解构在函数中的使用

什么是解构？

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

案例：

// 赋值
let {x}={x:1}    // x的值为1

// 赋值对象
let {x}={x:{y:1}}    // x的值{y: 1}

// 按照模式赋值
let {x:z}={x:2}    // x is not defined ；z的值为2
let {x:{y}}={x:{y:1}}    //x is not defined ；y的值为1；

解构在函数中主要应用

1.取出函数（对象）中的方法或者值:

function School(){
        this.address="山东"
        this.show=()=>{
            console.log(this.address,'学汽修那家强？')
        }
    }

    let {show,address}=new School();

    show();    // 山东 学汽修那家强？ 
    console.log(address)    // 山东

2.作为函数的默认值:

    // 方式1
    function f1({x,y=3}){
        console.log(x,y);
    }

    f1() // 报错 相当于 let {x,y=3}=undefined
    f1({x:2}) // 2 3  相当于 let {x,y=3}={x:2}
    f1({})  //undefined 3  相当于 let {x,y=3}={}



    // 方式2 相当于给了解构一个默认值{}
    function f2({x,y=3}={}){
        console.log(x,y);
    }

    f2(); // undefined 3 相当于 let {x,y=3}={}
    f2({x:2}) // 2 3 相当于 let {x,y=3}={x:2}


    //方式3
    function f3({x,y}={x,y:3}){
        console.log(x,y);
    }

    f3(); // 报错 相当于 let {x,y}={x,y:3} x不存在报错
    f3({x:2}) //2 undefined let {x,y}={x:2}
    f3({}) // undefined undefined let {x,y}={}

3.多个返回值

    function f1(){
        return [1,2,3];
    }

    let [x,y,z]=f1(); // x=1;y=2;z=3;