菜鸟教程个人学习心得04_JavaScript let 和 const的使用

JavaScript let 和 const的使用

两个基本概念：

1. let的使用：let声明的变量只能够在let命令所在的代码块有效
   示例代码：
2. const:const声明一个制度的常量，一旦声明，常量的值就不能够改变

示例代码1：var定义的全局变量，任何地方都能够使用：

    <p>全局变量使用样例</p>
    在全局中使用全局变量x：<input type="text" id="id1">
    在函数中使用全局变量x：<input type="text" id="id2">
    <script>
        var x = 1;
        document.getElementById("id1").value = x;
        function showNumber(){
            document.getElementById("id2").value = x;
        }
        showNumber();
    </script>

运行结果：

示例代码2：
局部定义的局部变量不能在全局使用：

    在全局中使用局部变量：<input type="text" id="id3">
    在局部中使用局部变量：<input type="text" id="id4">
    <script>
        //document.getElementById("id3").value = y;
        function showNumber1() {
            var y = 2;
            document.getElementById("id4").value = y;
        }
        showNumber1();
    </script>

运行结果：

当在全局使用局部变量时：

提示y未定义，因为y是在函数中定义的，所以他是局部变量，只能在局部使用。
示例代码3：
let声明从变量只在let命令所在的代码块{}内有效，在{}之外不能访问，在块级作用域外使用提示未定义：

    在块级作用域内使用：<input type="text" id="id1" style="width: 200px;"><br>
    在块级作用域外使用：<input type="text" id="id2" style="width: 200px;">
    <script>
        {
            let x = 7;
            document.getElementById("id1").value = x;
        }
        try {
            document.getElementById("id1").value = x;
        } catch (error) {
            document.getElementById("id2").value = error;
        }
    </script>

运行结果：

重新定义变量，在块级作用域中，使用var也会改变变量的值，使用let定义变量就能有效就觉这种问题：
利用var在块级作用域内重新定义变量，也会改变变量的值：

    <script>
        var x = 10 ; 
        console.log("原始变量值：" + x)
        {
            var x = 6
            console.log("块级作用域内的变量值：" + x)
        }
        console.log("经过块级区域重新定义变量后的值：" + x)
    </script>

运行结果：x的值已经被块级作用域的var重新定义：

利用let重新定义变量，不改变全局变量的值。

    <script>
        var  y = 3;
        console.log("全局变量var定义y的值：" + y)
        {
            let y = 4;
            console.log("块级作用域内定义y的值：" + y)
        }
        console.log("通过let在块级作用域内改变y的值后：" + y)
    </script>

运行结果：y的值不发生改变，因为let的作用域只在let所在的{}内生效

同理的，在循环中利用var和let重新定义变量，变量值改变的情况也不同：
利用var在循环中重新定义变量的值，变量值发生改变：

    <script>
        var i = 6;
        for (var i = 0; i < 10; i++) {

        }
        document.writeln("在循环中利用var重新定义变量i:" + i + "<br>")
    </script>

运行结果：

利用let在循环中重新定义变量的值，变量值不变：

    <script>
        let a = 9;
        for (let a = 0; a < 6; a++) {

        }
        document.writeln("在循环中利用let重新定义变量a:" + a + "<br>")
    </script>

运行结果：

使用var定义的全局变量属于window对象，使用let定义的全局变量不属于window对象：

    使用var定义的变量能被window访问到：<p id="p1"></p>
    <script>
        var str = "Hello World!!"
        document.getElementById("p1").innerHTML  = window.str;
    </script>
    使用let定义的变量不能被window访问到：<p id="p2"></p>
    <script>
        let newStr = "Hello new World!!"
        document.getElementById("p2").innerHTML  = window.newStr;
    </script>

运行结果：

在相同的作用域或者块级作用域中，不能够使用let来重新定义var所定义的变量，也不能够使用let来重新定义let所定义的变量；
在相同的作用域或者块级作用域中，不能够使用var来重新定义let所定义的变量；
let声明的变量，在不同作用域或者块级作用域内可以重新声明；
var定义的变量可以先使用，后声明，let定义的变量必须先声明，再使用；

const声明一个或者多个常量，声明时必须进行初始化，并且初始化后值不可再修改:
const定义的并非真正的常量，它定义了一个常量引用一个值，使用const定义的对象或者数组，其实是可变的：

    <script>
        var student = {
            name: "张三",
            sex: "男",
            age: 17
        }
        document.writeln("原始数据：");
        for (x in student) {
            document.writeln(student[x] + "  ")
        }
        document.writeln("<br>改变后数据：")
        student.name = "李四"
        student.age = "18"
        for (x in student) {
            document.writeln(student[x] + "  ")
        }
    </script>

运行结果：

const创建数组常量，元素的改变和增加：

    <script>
        // 创建常量数组
        const arrays =  ["张三","李四","王五" ]
        // 更改常量数组
        arrays[0] = "赵六";
        for(let i = 0; i<arrays.length;i++){
            document.writeln(arrays[i])
        }
        document.writeln("<br>")
        // 添加常量数组
        arrays[3] = "马七"
        for(let i = 0; i<arrays.length;i++){
            document.writeln(arrays[i])
        }
    </script>

运行结果：

在相同的作用域或者块级作用域中，不能使用const关键字来重置var或者let声明的变量，也不能重置const关键字声明的变量；
在不同的作用域或者块级作用域中，const时可以重新声明变量并且赋值的