ES6基础2（块级作用域、数组对象解构）-学习笔记

墨蓝 2022-10-19 00:56 111阅读 0赞

### 文章目录 ###

*   *  ES6基础2（块级作用域、数组对象解构）-学习笔记
     *   *  块级作用域
         *  数组解构
         *  对象解构
         *  字符串解构
         *  函数的参数解构

## ES6基础2（块级作用域、数组对象解构）-学习笔记 ##

### 块级作用域 ###

//let const 块级作用域 var 函数作用域
         var a = 100;
         if(true) { 
             var a = 1000;  //块级作用域
         };
    
         var a = 100;
         function f(){ 
             console.log(a);
             if(true){ 
                let a = 1000;
             }
             console.log(a);
         };
    
         //循环 i成为全局变量
         for(var i=0; i<5; i++){ 
         };
         console.log(i);  //结果 5
    
         for(let i=0; i<5; i++){ };
        console.log(i);   //i is not defined
    
        //小实例
        var arr = [];
        for(let i=0; i<5; i++){ 
            arr[i] = function(){ 
                console.log(i)
            }
        };
        arr[4]();   //var 结果 5 let 结果 4
    
    
    	//暂时性死区
        var x = 1;
        function f(){ 
            if(true){ 
                x = 100;
                console.log(x);
                let x;  //只要在同一个作用域下 不能声明同样的名称
            }
        };
        f(); //报错
    
    	function f(i){ 
            let i;   //error 只要在同一个作用域下 不能声明同样的名称
            //console.log(i)
            if(true){ 
                let i = 100;  //OK
            }
        };
        f(10)
    
        let x = y,y = 1;
        function f(){ 
            console.log(x,y)
        };
        f(); //报错

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]

### 数组解构 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]

//解构 从数组和对象中提取值，对变量进行赋值，这被称为解构。
         //ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
         let [a,b,c] = [1,2,3];
    
         //es5
         var a = 1;
         var b = 2;
         var c = 3;
         //简写
         var a = 1,b = 2,c = 3;
         // ES6 数组解构
         let [a,b,c] = [1,2,3];   //模式匹配 只要两边模式相同，左边的变量 右边对应要赋的值
         //对象解构
         let { x,y,z} = { x:1,y:2,z:3};
         //es5
         var obj = { 
            x:1,
            y:2,
            z:3
         };
         x = obj.x;
         y = obj.y;
         z = obj.z;
    
         //1)
         var [a,b,x] = ['b','a',[1,2]];
         //左边是变量 = 右边对应要赋的值
         var arr2 = ['red',{ id:2},123];
         let [x,y,z] = arr2;
         console.log(y) 
    
         //不是一一对应
         var [x,y,z] = [1,2];
         console.log(z);
         //var x = 1,y = 2,z;
    
         //默认值 备胎
         var arr3 = [10,20];
         var [x=1,y=2] = arr3;
         //es5
        // if(arr3[0]){ 
        // x = arr3[0];
        // }else { 
        // x = 1;
        // };
         //三目运算
        // arr3[0] ? x = arr3[0]:x = 1;
        //简写
        // x = arr3[0] || 1;
        // y = arr3[1] || 2;
    
    
        //DEMO
        var [x =1,y=2] = ['x','y'];
        console.log(x);
    
        //默认值发挥作用
        var [x =1,y=2] = ['x'];
        console.log(y);
    
        var [x=1,y=2] =[]; //x,y 1 2
        var [x,y='y'] = ['x',0]  //x,y 'x' 0
        var [x=1,y] = [10]; //x,y 10 undefined
        var [x=1,y=2] = [10,null]   // 10 null
        var [x,y=2] = [10,undefined]  //10 2
    
        //重要 成员等于undefined 默认值会生效
         var [x=1] = [undefined];
         var [x,y=2] = [10,undefined]
    
         //如果默认值是一个表达式 ,表达式是默认值 这个惰性求值 只要用到它的时候才会调用，默认值不会优化处理
         function f(){ 
             return 100;
         };
         var [x=f()] = [10];  //10
         var [x=f()] = [undefined];  //100

### 对象解构 ###

//对象解构 匹配不是按次序，由变量名来决定
         var { x,y} = { y:'x',x:'y'};   
    
         //JSON
         var obj ={ 
             name:'abc',
             age:18,
             id:1,
             friends:['a','x','u'],
             flag:{ x:1,y:2}
         };
         var { name,age,id,friends,flag} = obj;
    
    	 //没有匹配成功 undefined
         var { x,y,z} = { y:'x',x:'y'};  
     
         //别名 x:a x是匹配模式 a才是变量
         var { x:a,y} = { x:1,y:2};
         //var a = obj.x;
    
         var { x:name,y:id} = { x:1,y:2};
    
         //默认值
         var { x=3} = { x:10};
         var { x,y:a=5} = { x:10};
    
         //默认值生效的条件 undefined
         var { x:a=10} ={ x:undefined};
         var { x:a=10} ={ };
    
         //demo
         var { x=3} ={ };
         var { x,y=5} = { x:1};
         var { x:a=10,y=20} = { y:10};
         var { message:msg="hello world"} ={ };
         var { x:a=10} ={ x:null};
    
         var obj ={ 
            name:'abc',
            age:18,
            id:1,
            friends:['a','x','u'],
            flag:{ x:1,y:2}
        };
        var { name,age,id,friends:f,flag:fl} = obj;
        f[0];

### 字符串解构 ###

//字符串解构
    var [a,b,c,d,e] = 'hello';

### 函数的参数解构 ###

//函数的参数解构
        function fun(x,y){     //x,y 变量 参数才是值
            var x = x || 0;
            var y = y || 0;
            return x+y;
        };
        fun();
        //没有参数
        function fun([x=0,y=0]){    // [x=0,y=0] = []
            return x+y;
        };
        fun([]); //0
        //有参数
        function fun([x=0,y=0]){   //[x=0,y=0] = [1,2]
            return x+y;
        };
        fun([1,2]); //3
        //参数为空
        function fun([x=0,y=0]){   //[x=0,y=0] = [,2]
            return x+y;
        };
        fun([,2]); //2
    
        //对象
        function fun({ x=0,y=0}){    // {x=0,y=0} = {}
            return x+y;
        };
        fun({ x:10,y:10});
        function fun({ x=0,y=0}){    // {x=0,y=0} = {}
            return x+y;
        };
        fun({ y:10});
    
        //函数参数解构也有默认值
        //1)demo
        function fun({ x=0,y=0}={ }){       //{x=0,y=0} ?{x:10,y:8}:{}
            return [x,y];
        };
        fun({ x:10,y:8});  // [10,8]
        fun({ x:3});  // [3,0]
        fun({ });   // [0,0]
        fun();    // [0,0]
    
        //2)demo
        function fun({ x,y}={ x:0,y:0}){     //{x,y}?{x:10,y:8}:{x:0,y:0}
            return [x,y];   
        };
        fun({ x:10,y:8});  // [10,8]
        fun({ x:3});  // {x,y} = {x:3} [3,undefined]
        fun({ });   // {x,y} = {} [undefined, undefined]
        fun();    // {x,y}={x:0,y:0} [0,0]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/0555c3239f1f45eab3623133e9280331.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/460d4d5b5bb3402da79bcb65d2e7da55.png