ES6之命令妙用
很多人都聽說過ES6(也就是ECMAScript的新一代標準)并且對她充滿了向往,下面通過一個ES6中小知識點——let命令,來解開她的神秘面紗,讓大家初步認識一下ES6的語法規范。
??????? let命令屬于ES6中的一個基本語法,與原有Javascript中的var的功能一樣,都是用來聲明一個變量。但是,他擁有了一些新的特性和使用規范:
?
?????? 在花括號中用var聲明了一個a變量,用let聲明了一個b變量。在花括號之外訪問時,a可以正常訪問到1,但是b卻不能。原因是let聲明的變量超出{}之后,就訪問不到了。
?
?
???????? 在這個例子中,點擊這3個按鈕打印的都是:3,原因就是此時的i是一個全局變量i,按鈕只是拿到了i的引用。也就是說按鈕的i指向的同一個對象i,那么i的變化會同時影響到這三個按鈕。i進過訓話后變成了3,所以點擊按鈕打印出來的就都是3了。
但是我們想要的結果是:依次打印0、1、2怎么辦?此時就是可以使用let命令,修改一下代碼看一下:
?
???????
??????? 在代碼中只用把 var i 改成 let i 即可,現在在for循環外打印i已經獲取不到了,i已經不再是全局變量。此時點擊按鈕看到打印的結果為:0 1 2 ,達到了我們的預期。
??????? 這就是ES6中的let命令大家學會了嗎?當然let只是ES6語法規范中的冰山一角,上海尚學堂web前端培訓將為您奉獻更多的精彩實用的前端相關知識!
更多專業前端知識,請上 【猿2048】www.mk2048.com
??????? let命令屬于ES6中的一個基本語法,與原有Javascript中的var的功能一樣,都是用來聲明一個變量。但是,他擁有了一些新的特性和使用規范:
- 塊級作用域有效
- 不允許重復聲明
- 不存在變量作用域提升
1、塊級作用域有效
??????? 使用let聲明的變量作用域范圍只在花括號{}內有效,而使用var聲明的變量則在花括號之外也可以使用。?
?????? 在花括號中用var聲明了一個a變量,用let聲明了一個b變量。在花括號之外訪問時,a可以正常訪問到1,但是b卻不能。原因是let聲明的變量超出{}之后,就訪問不到了。
2、不允許重復聲明
?????? 使用let聲明的變量不允許出現同名,同名就報錯。使用var的話就沒有這個限制。3、不存在變量作用域提升
使用let時,必須先聲明再使用,如果在聲明之前使用就會報錯,用var時則會顯示undefined。?
4、實例
???? 下面是一道非常經典的面試題,問點擊按鈕打印出來的結果是什么:?
???????? 在這個例子中,點擊這3個按鈕打印的都是:3,原因就是此時的i是一個全局變量i,按鈕只是拿到了i的引用。也就是說按鈕的i指向的同一個對象i,那么i的變化會同時影響到這三個按鈕。i進過訓話后變成了3,所以點擊按鈕打印出來的就都是3了。
但是我們想要的結果是:依次打印0、1、2怎么辦?此時就是可以使用let命令,修改一下代碼看一下:
?
???????
??????? 在代碼中只用把 var i 改成 let i 即可,現在在for循環外打印i已經獲取不到了,i已經不再是全局變量。此時點擊按鈕看到打印的結果為:0 1 2 ,達到了我們的預期。
??????? 這就是ES6中的let命令大家學會了嗎?當然let只是ES6語法規范中的冰山一角,上海尚學堂web前端培訓將為您奉獻更多的精彩實用的前端相關知識!
更多專業前端知識,請上 【猿2048】www.mk2048.com
總結
- 上一篇: 深入浅出React Native 1:
- 下一篇: VUE-搜索过滤器