第二讲 let和const命令

前人栽树后人乘凉，前人挖坑后人遭殃！！！

JS是弱类型语言，当初设计者为了使用的便捷，开发人员开心，留下了不少坑。请看JS系列坑之技术细节：

var关键字挖的坑

1.可以重复声明变量

        var a=88;
        var a="张老师";
        console.log(a);

填坑：

ES，let关键字

        let a=88;
        let a="张老师";
        console.log(a);

image-20201123234511508

let用来修饰变量，const用来修饰常量

2.没有常量

//PI:不可变的量
        var PI=3.14;
        PI=5.78999;
        console.log(PI);

//使用的另外const
         const PI=3.14;
        //PI=5.78999;
        console.log(PI);

3.变量提升问题

 //3.坑3变量提升问题
        console.log(c);

image-20201126002226387

继续

        console.log(c);
        var c=10;

image-20201126002305796

但是在js编译可以

原理：

var c;
console.log(c);
c=10;

使用let

       console.log(c);
        let c=10;

效果：

image-20201126002459142

关于函数的代码

console.log(d);
d();

image-20201126002618217

继续：

console.log(d);
d(); //函数
//上面都是报错;
var d=function () {
    console.log(222);
}

image-20201126002747658

也是一种变量提升

var d;
console.log(d);
d();

使用let关键字

console.log(d);
d(); //函数
//上面都是报错;
let d=function () {
    console.log(222);
}

image-20201126002907431

总结：js编译器会在编译js之前，首先对这些代码找到声明，并用合适的作用域将他们关联起来。

4.const常量

4.1 常量名要大写(潜规则)

const PI=3.14; //const a=3.14;不太好

4.2 常量要赋值,使用之前赋初始值

 //2.赋值
        const PI=3.14;  //???
        console.log(PI);

4.3 常量具有块级作用域

 if(true){
            const MN=4.00;
            console.log(MN);
        } //MN到}，块级生命周期已经结束了.
        console.log("..."+MN);

4.4 常量声明之后，不能更改

		// const HEI=8848;
        //HEI=8899; //HEI:readonly,只读，不能更改
        const stus=["张晨","李晨","王晨"];
        stus.push("尤晨光");
        console.log(stus);
        //常量是stus,代表是一个数组，数组指向一个地址，这个地址是一个常量,地址是不可以更改的，里面的内容可以更改。
        // stus=["aaa","bbb"]; 更改地址，不可以。

5.let经典案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let案例</title>
    <script>
        //单击复选框的时候，测试里面i值--》复选框的值;
        window.onload=function () {
            var chboxs=document.getElementsByTagName("input");
            for(let i=0;i<chboxs.length;i++){
                //重点观察;
                //2.使用了js的闭包机制，
                //闭包：内部函数可以访问其所在外部函数种的变量和参数；
                // (function (i) {
                //     chboxs[i].onclick=function () {
                //         alert(i);//猜测i值；
                //     }
                // })(i);
                //3.使用let关键字
                chboxs[i].onclick=function () {
                    alert(i);//猜测i值；
                    alert("-->"+ chboxs[i].value);
                }
            }
        }
    </script>
</head>
<body>
<!--    html内容-->
    AAAIT学院课程：
<input type="checkbox" value="JAVA">JAVA
<input type="checkbox" value="前端">前端
<input type="checkbox" value="AI">AI
<input type="checkbox" value="PYTHON">PYTHON
</body>
</html>