石川es6课程---3、变量let和常量const

一、总结

一句话总结：

let非常好用，尤其是let的块级作用域可以解决之前要（function(){})()立刻执行函数做的块级作用域

1、js中var声明变量会伴随哪些问题？

- 可以重复声明，没有报错和警告

- 无法限制修改（也就是没有常量的概念）

- 没有块级作用域， { }

2、js中如何实现块级作用域？

函数：普通js只有函数才有作用域（function(){})()立刻执行函数

//普通js只有函数才有作用域（function(){})()立刻执行函数
// for(var i=0;i<aBtn.length;i++){
//     (function(i){
//         aBtn[i].onclick=function(){alert(i)}
//     })(i)
// }

3、let 和 const的优点？

· 不能重复声明

· 都是块级作用域, { } 块内声明的，块外无效

· let 是变量，可以修改，const 是常量，不能修改

4、let块级作用域应用举例？

+ 本来需要（function(){})()立刻执行函数做块级作用域的地方的应用可以轻松被let代替

+ 直接 var 改 let，解决作用域问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload= function () {
            /*
            var aBtn = document.getElementsByTagName('input')
            for (var i=0; i < aBtn.length; i++) {
                aBtn[i].onclick = function () {
                    alert(i)
                }
            }*/
            var aBtn = document.getElementsByTagName('input')
            for (let i = 0; i < aBtn.length; i++) {
                aBtn[i].onclick = function () {
                    alert(i)
                }
            }
            /*
            var aBtn = document.getElementsByTagName('input')
            for (var i = 0; i < aBtn.length; i++) {
                // 封装到函数里，限制作用域
                (function (i) {
                    aBtn[i].onclick = function () {
                        alert(i)
                    }
                })(i)
            }*/
        }
    </script>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
</body>
</html>

二、变量let和常量const

- var 的问题
- 可以重复声明，没有报错和警告
- 无法限制修改
- 没有块级作用域， `{ }`

- let 和 const
- 不能重复声明
- 都是块级作用域, `{ }` 块内声明的，块外无效
- let 是变量，可以修改
- const 是常量，不能修改

- 块级作用域举例
- 原来用 var 的方式，结果弹出的都是 3
- 或者将变量封装到函数里，限制作用域，但比较麻烦
- 用 let 最简单，直接 var 改 let，解决作用域问题

let做块级作用于应用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script>
 9         window.onload= function () {
10             /*
11             var aBtn = document.getElementsByTagName('input')
12             for (var i=0; i < aBtn.length; i++) {
13                 aBtn[i].onclick = function () {
14                     alert(i)
15                 }
16             }*/
17             var aBtn = document.getElementsByTagName('input')
18             for (let i = 0; i < aBtn.length; i++) {
19                 aBtn[i].onclick = function () {
20                     alert(i)
21                 }
22             }
23             /*
24             var aBtn = document.getElementsByTagName('input')
25             for (var i = 0; i < aBtn.length; i++) {
26                 // 封装到函数里，限制作用域
27                 (function (i) {
28                     aBtn[i].onclick = function () {
29                         alert(i)
30                     }
31                 })(i)
32             }*/
33         }
34     </script>
35 </head>
36 <body>
37     <input type="button" value="按钮1">
38     <input type="button" value="按钮2">
39     <input type="button" value="按钮3">
40 </body>
41 </html>

普通js只有函数才有作用域（function(){})()立刻执行函数

块级作用域

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>块级作用域</title>
 8 </head>
 9 <body>
10     <script>
11         {
12             var a=12
13             let b=13
14             b=16
15             const c=16
16             // c=18//报错Uncaught TypeError: Assignment to constant variable.
17             // const c=17//块级作用域内 
18             //报错Uncaught SyntaxError: Identifier 'c' has already been declared
19         }
20         let b=13
21         const c=19
22         alert(a)//正常
23         alert(b)//报错a is not defined
24         alert(c)
25         // let a=19//块级作用域外 
26         //报错Uncaught SyntaxError: Identifier 'a' has already been declared
27     </script>
28 </body>
29 </html>