石川es6课程---3、变量let和常量const
生活随笔
收集整理的這篇文章主要介紹了
石川es6课程---3、变量let和常量const
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
石川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].οnclick=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>?
?
?
?
?
?
轉載于:https://www.cnblogs.com/Renyi-Fan/p/11589900.html
總結
以上是生活随笔為你收集整理的石川es6课程---3、变量let和常量const的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 石川es6课程---1-2、ES6简介
- 下一篇： Zepto.js简介