石川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>