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关键字最常见的应用
循环给按钮添加点击事件