20-ES6语法知识一

第二十章.ES6语法知识一

• let

console.log(a); //报错
let a = 10;

/*
* （let const）暂时性死区
*   只要当前作用域中声明过某个变量，那么声明使用该变量会报错
*
* 建议，同个作用域所有的定义全部写在最前面
*/

let x = 10;
function fn() {
 	console.log(x);
	let x = 20;
}
fn(); //报错

• const

const a = 10;
a = 20; //报错

const a = {
	name : "mint"
};

a.age = 18;
console.log(a); //不会报错

• 块级作用域

    /*{}*/

    /*function a(){}

    let b = {};

    if(true){}
    for(;;){}

    let c = ()=>{}

    `aaa${"ddd"}bbb`*/


    /*单独出现的 {} 相当于一个独立的作用域*/

    let a = 10;

    {
      let b = 20;
      console.log(a);
    }

    console.log(b);

• 顶层对象

/*
 * 在全局作用域下用var定义的变量等价于window对象的属性
 * */

    var x = 10;

    console.log(x); //10
    console.log(window.x); //10
    

    /*全局作用域的顶层对象不是window*/
    let x = 10;
    console.log(x); // 10
    console.log(window.x); // undefined

• 不直接定义赋值

  function fn(){
      b = 20;
    }

    fn();

    console.log(b); //20  直接赋值不定义，将会被挂载到全局
    console.log(window.b); //20
    console.log(b === window.b); //true
   

    let b = 0;
    function fn(){
      b = 20;
    }
    fn();

    console.log(b); // 20
    console.log(ww.b); //undefined

//练习

 var a = 10;

 function fn(){
    var a = b = 20;
 }
 fn();

 console.log(a);//10
 console.log(b);//20

• 解构赋值

    let a = 10;
    let b = 20;
    let c = {name:"mint",age:20};
    

    let [a,b] = [10,20];
    //等价于
    let a = 10,b = 20;

    console.log(a); //20
    console.log(b); //30
    

    let [a,b,c] = [20,30];
    console.log(a, b, c); //20 30 undefined

    let [a,b] = [3,4,5];
    console.log(a, b);//3 4

    let [a,b] = [1,[3,5]];
    console.log(a); // 1
    console.log(b); // [3,5]



    let [a,b] = [1,[3,5]] [1];

    console.log(a); // 3
    console.log(b); // 5
    //等价于
    let x = [1,[3,5]];
    let [a,b] =  x[1];
    console.log(a); // 3
    console.log(b); // 5

    let [a,b,[c,d]] = [1,2,[3,4]];
    console.log(a, b, c, d);// 1 2 3 4

    //定义 xxx和yyy 变量
    let {a: yyy, n: xxx} = {n: "mint", a: 20};

    console.log(xxx);//mint
    console.log(yyy);//20

    
    //定义 n和a 变量
    let {n:n, a:a} = {n:"mint", a:17};
    //要定义的变量名和属性名相同的时候，可以简写
    let {n,a} = {n:"mint", a:17};

    console.log(n);//mint
    console.log(a);//17

    !//定义 n变量和age 变量
    let {n, a:age} = {n:"Sherry", a:18};
    console.log(n);
    console.log(age);

    //定义变量 random floor
    // let {random: random, floor: floor} = Math;
    let {random, floor} = Math;

    console.log( random() )
    console.log( floor(2.1) );
    


    function show( obj ){
      let {name,age,sex} = obj;
      console.log( `${name}老师是一位${age}岁的可爱的${sex}同学` );
    }

    show( {name:"阿希",age:21,sex:"男"} );
    show( {name:"阿伟",age:20,sex:"男"} );
    show( {name:"阿远",age:19,sex:"女"} );

• 字符串解构赋–不常用，了解即可

    let [a,b,c,d] = "mint";

    console.log(a, b, c, d,);//m i n t

• 解构赋值的默认值

    let [a,b,c] = [1,2];

    console.log(a, b, c);//1 2 undefined


    let [a,b,c=99] = [1,2];
    console.log(a, b, c); // 1 2 99

    let [a,b,c=99] = [1,2,3];
    console.log(a, b, c); // 1 2 3

    let {n:name, a:age, s:sex="女"} = {n:"M",a:20};

    console.log(name);
    console.log(age);
    console.log(sex);

    let {n, a, s="男"} = {n:"M",a:20};

    console.log(n);
    console.log(a);
    console.log(s);

• 函数参数的结构赋值

 function fn( [a,b] ){
      console.log(a + b);
    }

    fn( [2,3] );
    fn( [2,2] );

    function fn2( {name:aaa, age:bbb} ){
      console.log(`可爱的${aaa}老师今年${bbb}岁`);
    }

    fn2( {name:"Sherry", age:40} );
    fn2( {name:"皮卡", age:20} );

//假若皮卡不是老师
 function fn2( {name, age, job="同学"} ){
      console.log(`可爱的${name}${job}今年${age}岁`);
    }

    fn2( {name:"Sherry", age:40, job:"老师"} );
    fn2( {name:"皮卡", age:20} );

• 函数参数的默认值

    function fn( {a=88,b=99} ){
      console.log(a, b);
    }

    fn( {a:10} ); //10 99
    fn( {} ); // 88 99
    fn(); //报错  结构不对应

    //设置参数默认值 -- 有实参用实参，没有实参用默认参数
    function fn2( {a,b} = {a:55,b:66} ){
      console.log(a, b);
    }

    fn2(); // 55 66
    fn2( {} ); //undefined undefined
    fn2( {a:30} ); //30 undefined


    function fn2( {a=10,b=20} = {a:55,b:66} ){
      console.log(a, b);
    }

    fn2(); // 55 66
    fn2( {} ); //10 20
    fn2( {a:30} ); //30 20

• 默认值基于undefined

   /*
    * 有且仅有 值是undefined的时候，才会用到默认值
    * */

    let [a=10,b=20,c=30] = [99,undefined,88];
    console.log(a, b, c); // 99 20 88

    let [a=10,b=20,c=30] = [99,null,88];
    console.log(a, b, c); // 99 null 88

• …扩展运算符

   /*
    *  ...
    *
    * 拆解 数组(拥有iterator接口的) 数据
    *
    * */

    console.log( Math.max(1, 2, 3) );//3

    console.log(    Math.max( ...[4,5,6] )          );//...可以理解为把两端的方括号溶解了
    console.log(    Math.max( 4,5,6 )               );


    console.log( "Sherry" );
    console.log( ..."Sherry" );
    console.log( "S","h","e","r","r","y" );


    let arr1 = [1,2,3];
    let arr2 = [4,5,6];

    console.log(arr1.concat(arr2));
    console.log( [...arr1  ,  ...arr2] );
    console.log( [1,2,3,4,5,6] );

• 函数reset参数

function sum(){
      let result = 0;
      for (let i=0;i<arguments.length;i++){
        result += arguments[i];
      }
      console.log(result);
    }

    //剩余参数
    function sum( a,b,...c ){
      console.log(a,b,c);
    }
    //1 2 []
    //4 5 [6]
    //3 4 [2,1] 
    //剩余的参数打包带走

    /*function sum( ...c ){
      console.log(arguments.forEach);
      console.log(c.forEach);
    }*/
    
    //reduce求和函数，不香嘛~
    function sum( ...c ){
      console.log( c.reduce((a,b)=>a+b) );
    }

    sum(1,2);
    sum(4,5,6);
    sum(3,4,2,1);
    sum(2,3);