ES6课程---3、let和const

一、总结

一句话总结：

let关键字是es6中用来定义变量的，const关键字是es6中用来定义常量的，他们都不可以重复声明，他们都是块级作用域，他们就是es6中用来替代var关键字来声明变量和常量的

1、var关键字定义变量的不足？

1、var关键字可以重复声明变量

2、var关键字无法限制修改（var关键字无法定义常量）

3、var关键字没有块级作用域

2、let关键字最常见的应用？

循环给按钮添加点击事件：let是块级作用域，块中回调函数如果用到变量，变量就会随回调加到内存去

var btns = document.getElementsByTagName('button');
for(let i = 0;i<btns.length;i++){
    btns[i].onclick = function () {
        alert(i);
    }
}

二、let和const

博客对应课程的视频位置：3、let和const
https://www.fanrenyi.com/video/24/198

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>let和const关键字</title>
 6 </head>
 7 <body>
 8 <!--
 9 var关键字定义变量的不足
10 1、var关键字可以重复声明变量
11 2、var关键字无法限制修改（var关键字无法定义常量）
12 PI=3.1415926
13 3、var关键字没有块级作用域
14 块级作用域的好处：避免污染全局环境
15 
16 let关键字：不能重复声明，用来声明变量，块级作用域
17 const关键字：不能重复声明，用来定义常量，块级作用域
18 
19 let关键字最常见的应用
20 循环给按钮添加点击事件
21 
22 
23 
24 
25 
26 -->
27 <script>
28     // var a=10;
29     // var a=12;
30     // console.log(a);
31 
32     //用立即执行的匿名函数来模拟块级作用域
33     // (function () {
34     //     //块级作用域
35     // })();
36 
37     // let a=10;
38     // let a=12;
39     // console.log(a);
40 
41     // const aa=11;
42     // const aa=13;
43     // console.log(aa);
44 
45     // let a=10;
46     // a=12;
47     // console.log(a);
48 
49     // const aa=11;
50     // aa=13;
51     // console.log(aa);
52 
53     //什么是代码块
54     {
55         //let a=10;
56         //const aa=11;
57         //var aaa=13;
58         // console.log(a);
59         //console.log(aa);
60     }
61     //console.log(a);
62     //console.log(aa);
63     //console.log(aaa);
64 
65     //选择结构中的代码块
66     // if(true){
67     //     let a=10;
68     //     //console.log(a);
69     // }
70     // console.log(a);
71 
72     //循环结构中的代码块
73     // for(let i=0;i<=5;i++){
74     //     let b=10;
75     //     //console.log(b);
76     //     //console.log('i='+i);
77     // }
78     // //console.log(b);
79     // console.log('i='+i);
80 
81 </script>
82 </body>
83 </html>

let关键字最常见的应用
循环给按钮添加点击事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>let应用小实例</title>
 6 </head>
 7 <body>
 8 
 9 <!--按钮循环遍历加监听实例-->
10 <!--需求：
11 点击按钮0，弹出'按钮0'，
12 点击按钮1，弹出'按钮1'，
13 点击按钮2，弹出'按钮2'
14 -->
15 <button>按钮0</button>
16 <button>按钮1</button>
17 <button>按钮2</button>
18 <script>
19     var btns = document.getElementsByTagName('button');
20     for(let i = 0;i<btns.length;i++){
21         // (function (i) {
22         //     btns[i].onclick = function () {
23         //         alert('按钮'+i);
24         //     };
25         // })(i);
26         btns[i].onclick = function () {
27             alert('按钮'+i);
28         };
29     }
30     console.log(btns[0].onclick);
31     console.log(btns[1].onclick);
32     console.log(btns[2].onclick);
33 </script>
34 </body>
35 </html>

let关键字最常见的应用
循环给按钮添加点击事件