js ES6

let

1.块级作用域

        // if( true ){

        //     let b = 10;

        //     console.log( b );----10

        // }

        // console.log( b );---undefined

   

 2. TDZ( 暂时性死区 ) ;

变量必须先声明再使用

3.应用

        // let lis = document.querySelectorAll("ul li");

        // 这种情况是因为使用了var声明变量, 变量只有一个, 在循环结束之后变量值为循环结束之后的值!

        // 循环结束之后的值为4， 所以所有事件触发得到的结果都为4；

        // for(var i = 0 ; i < lis.length ; i ++){

        //     lis[i].onclick = function(){

        //         console.log( i );

        //     }

        // }

        // 我们把var关键字改成let之后;

        // - 因为我们的写法创建了四个函数, 每个函数对应一个dom对象;

        // - let声明变量之后变量是局部的, 每个函数对应一个i变量;

        // 原理:闭包 ;

        // for(let i = 0 ; i < lis.length ; i ++){

        //     lis[i].onclick = function(){

        //         console.log( i );

        //     }

        // }

const

  // const : 常量声明;

        // - 常量声明关键字也会激活两个机制;

        // - 额外的机制 :

        //   1. 常量不能为空;

        //   2. 常量在创建之后不能再赋值了;

        // 注意 : 常量我们通常用全大写字母来进行表述;

        const GENDER = "男";

        // GENDER = "女";

        console.log( GENDER );

解构赋值-数组解构

 // 数组解构

    let[a,b]=[10,20]

    console.log(a,b);

  //应用: 换位

    [a,b]=[b,a]

    console.log(a,b);

 // 剩余运算

    let arr=[1,2,3,4,5,6,7,8,9,10]

    let[start,...other]=arr

    console.log(start,other);//1 (9) [2, 3, 4, 5, 6, 7, 8, 9, 10]

    // 应用:伪数组变为真

    var lis=document.querySelectorAll("li")

   lis=[...lis]

   console.log(lis);

解构赋值-对象赋值

   let obj = { a: 10, b: 20 }

    // / 取出对象之中某个key对应的value数据 , 并声明一个变量和key同名;

    let { a, b } = obj

    console.log(a, b);

    // 应用:

    let { random } = Math;

    console.log(random, random());

    document.onclick = function (e) {

        e = e || event;

        let { clientX, clientY } = e;

        console.log(clientX, clientY);

    }

    // let {  对象之中的key名 : 新名称 } = 对象

    let {random:r,PI:p}=Math;

    console.log(r(),p)

        let obj2 = { top : 888 }

        let { top : _top  } = obj2;

        console.log( _top );

展开运算

 //...在等号左边叫剩余运算,在等号右边叫展开运算

    // 1.展开对象

    let obj={

        a:10,

        b:20,

        c:30

    }

    let obj2={

        ...obj,

        d:15

    }

    console.log(obj2);

  // 2.展开数组

    let arr1=[1,2,3]

    let arr2=[4,5,6]

    let arr3=[...arr1,...arr2]

    console.log(arr3);

 

 3.函数参数

// 放入无限多个实参, 那么我们的形参怎么编写

function myfunction(...a){

    console.log(a);

}

myfunction(1,2,3,4,5,6,7,8,9)

// 2.默认参数  

// 不传递参数, 形参值即为默认参数

function foo( a , b = "hello world"){

            console.log( a , b );

        }

    foo( 10 );

    foo(20,'你好')