数组-对象-函数参数解构

数组对象解构

一个正在努力爱好运动的程序猿-
座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。

---

---

前言

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

解构是ES6的新特性, 比ES5代码简洁，清晰，减少代码量

---

一、数组解构

     //数组解构(按顺序匹配)
    //匹配模式 左边是变量 =(匹配) 右边对应的值
    let [a,b,c] =[1,2,3];
    var a = 1;
    var b = 2;
    var c = 3;

    var a = [1,2,3];
    var b = {id:2};
    var c = null;

    let [a,b,c] = [[1,2,3],{id:2},null];

    //匹配不成功   变量的值就等于undefined
    let [a,b] = [1] //a=1  b = undefined

    let [a,b] = [1,2,3]  //不完全解构  a=1 b=2 按顺序匹配

    //扩展
    let [a] = []; //a =undefined
    let [a,b] = [[{id:i},{id:2}],null]; //a = [{id:i},{id:2}] b=null
    let [a,[b],c] = [1,[2],3];

    //默认值 (成员等于undefined 默认值会生效)
    var arr = [10,20];
    let [a=1,b=1] = arr;
    a = arr[0] || 1;
    b = arr[1] || 1;

    let [a=1,b=2] = [10];    //a=10,b = 2;

    let [a=1,b=2] = [10,null];  //a = 10;b = null

    let [a,b=2] = [10];   //a=10,b = 2;
    //例外  成员等于undefined 默认值会生效
    let [a,b=2] = [10,undefined];  //a=10,b=2

二、对象解构

//对象解构(按匹配模式来匹配)
    var {a,b,c} = {a:1,b:2,c:3};
    var obj = {
        a:1,
        b:2,
        c:3
    };
    var a = obj.a;
    var b = obj.b;
    var c = obj.c;
   // var {a,b,c} = obj;

    //作用 例如后端传过来的数据...
    var res = {
        code:200,
        msg:'success',
        result:[1,2,3,4],
        obj:{id:1},
        arr:[{name:1}]
    };
    var code = res.code;
    var result = res.result;
    var obj = res.obj;
    let {code,obj,result} = obj;
    result[2];
    obj.id;

    //扩展题
    function fun(str,res){
        let {code,arr} = res;
        console.log(code)
    };
    fun(1,res) //res为上面的整个对象

    function fun(str,{code,obj}){
        console.log(code)
    };
    fun(1,res)


    //全局引入的变量与组件中的变量重名
    //别名   a:q  a是匹配模式  q才是变量
    var {a:q,b,c} = {a:1,b:2,c:3};

    var {a:a2,b:b2,c:c} = {a:1,b:2,c:3};
    console.log(a2)
    console.log(b2);

    let {a,b:y} = {a:1,y:2};
    //变量是谁  a y 
    //匹配结果 a = 1 , y  = undefined

    //默认值 默认值生效的条件是，对象的属性值严格等于`undefined`
    let {x=3} = {x:10};  //x =10;
    let {x,y = 10} ={x:10}; //x = 10,y=10
    let {x=1,y = 10} ={x:undefined}; //x=1,y = 10

    let {x:n = 1,y:a = 2} = {x:10,y:20};
    //变量 n a
    //匹配结果  n = 10,a = 20;

    let {x:n = 1,y:a = 2} = {x:10,y:undefined}; //n=10,a=2;

三、函数参数解构

 //数组解构
    function add([x, y]){
      return x + y;
    }
    add([1, 2]);   //匹配方式 [x,y] = [1,2];  
   
    
   //对象解构
    function move({x, y}) {
      return x +y;
    }
    move({x: 3, y: 8}); //匹配方式 {x, y} = {x: 3, y: 8};

    //当实参为空时，写入默认值
    function fun([x=0,y=0]) {
            return x+y;
    }; 
    fun([2,4]);//匹配方式 [x=0,y=0] = [2,4];
 
    function move({x = 0, y = 0}) {
        return x +y;
    }
    move({x: 3, y: 5});   //匹配方式 {x = 0, y = 0} = {x: 3, y: 5};

    //扩展题  函数参数的解构也可以使用默认值
    function move({x = 0, y = 0} = {}) {   
            return [x, y];
    }
    move({x: 3, y: 8});   // [3,8]
    //匹配方式 {x = 0, y = 0} = {x: 3, y: 8}
    move({x: 3});    //[3,0]
    //匹配方式 {x = 0, y = 0} = {x: 3}
    move({});   //[0,0]
    //匹配方式 {x = 0, y = 0} = {}
    move();   //[0,0]
    //匹配方式 {x = 0, y = 0} = {}


    function move({x, y} = { x: 0, y: 0 }) {   
            return [x, y];
    }
    move({x: 3, y: 8});  // [3,8]
    //匹配方式 {x, y} = {x: 3, y: 8}
    move({x: 3});   //[3,undefined]
    //匹配方式 {x, y} = {x: 3}
    move({});   //[undefined,undefined]
    //匹配方式 {x, y} = {}
    move();   //[0,0]
     //匹配方式 {x, y} = { x: 0, y: 0 }

总结

越努力越幸运，越运动越健康!!!加油