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

水深无声 2022-11-21 01:05 153阅读 0赞

# 数组对象解构 #

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

--------------------

### 文章目录 ###

*  数组对象解构
 *  前言
 *  一、数组解构
 *  二、对象解构
 *  三、函数参数解构
 *  总结

--------------------

# 前言 #

允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构  
  
解构是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 }

# 总结 #

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