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(); //报错

数组解构

     //解构 从数组和对象中提取值，对变量进行赋值，这被称为解构。
     //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]