ES6學(xué)習(xí)筆記之let與const用法實(shí)例分析
本文實(shí)例講述了ES6學(xué)習(xí)筆記之let與const用法。分享給大家供大家參考，具體如下：
在ES6中不是var，而是通過let來聲明變量，用const來聲明常量，有如下一些不同：
1、let與const作用域只限于當(dāng)前代碼塊{}，而var則沒有這種限制。
2、使用let、const申明的變量作用域不會(huì)被提升。例如：
console.log(str); var str="var declare";
控制臺(tái)輸出undefined；因?yàn)樽兞可昝魇窃谌我獯a執(zhí)行前處理的，在代碼區(qū)中任意地方聲明變量和在最開始（最上面）的地方聲明是一樣的。也就是說，看起來一個(gè)變量可以在聲明之前被使用！這種行為就是所謂的“hoisting”，也就是變量提升，看起來就像變量的聲明被自動(dòng)移動(dòng)到了函數(shù)或全局代碼的最頂上。注意：僅僅是聲明提升了，定義并不會(huì)被提升。因此console.log()可以檢測(cè)到str的聲明，但是卻沒有定義，提示undefined。
console.log(str2); let str2="let declare";
控制臺(tái)報(bào)錯(cuò)：can't access lexical declaration `str2' before initialization，let不會(huì)把聲明提升到全局之前，因此在console輸出str2時(shí)會(huì)報(bào)錯(cuò)未聲明。
3、在相同的作用域下不能申明相同的變量，利用var可以聲明兩次同一個(gè)變量，并且后一個(gè)會(huì)覆蓋前面的聲明，而let、const不可以。
4、for循環(huán)體現(xiàn)let的父子作用域
var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){
btns[i].οnclick=function () {
alert("第"+i+"個(gè)按鈕");
}
}
由于var會(huì)提升作用域，當(dāng)btns[i]在本代碼塊{}找不到i時(shí)，會(huì)找到之前的for中的i。在函數(shù)循環(huán)執(zhí)行時(shí)，并沒有觸發(fā)onclick，i一直++到5。當(dāng)任意按鈕點(diǎn)擊的時(shí)侯觸發(fā)onclick，此時(shí)i==5，因此無論按那個(gè)按鈕都會(huì)顯示“第5個(gè)按鈕”。
解決方法一：閉包處理
var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){
(function (i) {//通過參數(shù)傳遞i，在另一個(gè)函數(shù)內(nèi)的i
btns[i++].οnclick=function () {
alert("第"+i+"個(gè)按鈕");
}
})(i);
}
閉包處理：閉包就是一個(gè)函數(shù)引用另外一個(gè)函數(shù)的變量，因?yàn)樽兞勘灰弥圆粫?huì)被回收，因此可以用來封裝一個(gè)私有變量,i是另一個(gè)函數(shù)作用域內(nèi)的變量，不會(huì)隨著外循環(huán)而改變。
方法二：使用let的情況下，會(huì)自己區(qū)分為兩個(gè)作用域，每個(gè)btns[i]內(nèi)的函數(shù)對(duì)應(yīng)不同的變量i
for (let i=0;i<btns.length;i++){//內(nèi)部為新的let作用域
btns[i].οnclick=function (){
alert("第"+i+"個(gè)按鈕");
}
}
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
一次圍繞setTimeout的前端面試經(jīng)驗(yàn)分享
這篇文章主要跟大家分享了一次圍繞setTimeout展開的前端面試經(jīng)驗(yàn)，是一篇有意思的圍繞setTimeout展開的前端開發(fā)考題，考察了for循環(huán)、定時(shí)器setTimeout()、JavaScript閉包、匿名函數(shù)和Promise等，一不小心你可能就會(huì)做錯(cuò)，快來看看你有沒有掌握了上面的知識(shí)。2017-06-06
使用JavaScript實(shí)現(xiàn)一個(gè)交互式音樂播放器
JavaScript,作為前端開發(fā)的重要語言,可以實(shí)現(xiàn)許多復(fù)雜的功能,在這篇文章中,我們將一起創(chuàng)建一個(gè)交互式的音樂播放器,快跟隨小編一起學(xué)習(xí)一下吧2024-01-01
這篇文章主要介紹了ES6 十大特性的相關(guān)資料，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
本篇文章只要是對(duì)js表格字段排序的實(shí)例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
微信小程序中data-key屬性之?dāng)?shù)據(jù)傳輸(經(jīng)驗(yàn)總結(jié))
這篇文章主要介紹了微信小程序中data-key屬性：數(shù)據(jù)傳輸,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
Avalonjs 實(shí)現(xiàn)簡(jiǎn)單購物車功能(實(shí)例代碼)
avalon是國(guó)內(nèi)最強(qiáng)大的MVVM框架，最近小編在高購物車的項(xiàng)目，我們是用avalon來實(shí)現(xiàn)一些模塊的，所以順其自然的用avalon來實(shí)現(xiàn)購物車。接下來通過本文給大家分享Avalonjs 實(shí)現(xiàn)簡(jiǎn)單購物車功能的實(shí)例代碼，需要的的朋友參考下2017-02-02
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕直接打印
很多網(wǎng)站都有此功能，當(dāng)瀏覽到底部時(shí)都會(huì)有一個(gè)打印按鈕，點(diǎn)擊打印按鈕就可以完成打印功能，功能非常不錯(cuò)，人性化，下面通過本文給大家介紹JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕就打印的代碼，需要的朋友參考下2016-01-01
跟我學(xué)Nodejs（三）--- Node.js模塊
這是本系列的第三篇文章了，前面2篇網(wǎng)友們反饋回來不少的消息，加上最近2天比較忙，一直沒來得及整理，周末了，趕緊給大家整理下發(fā)出來，本文講的是node.js模塊2014-05-05
uni.setNavigationBarColor設(shè)置字體顏色及背景色無效的4個(gè)原因及解決
這篇文章主要給大家介紹了關(guān)于uni.setNavigationBarColor設(shè)置字體顏色及背景色無效的4個(gè)原因及正確解決辦法,文中還介紹了uni-app設(shè)置頁面導(dǎo)航條顏色的實(shí)例代碼,需要的朋友可以參考下2024-01-01
Storage、cookie的用途和優(yōu)缺點(diǎn)比較
cookie的大小是受限制的，并且每次請(qǐng)求cookie都會(huì)被發(fā)送，浪費(fèi)寬帶，cookie還需要指定作用域，不可以跨域調(diào)用。cookie的作用是與服務(wù)器進(jìn)行交互，作為http規(guī)范的一部分存在，而webstorage僅僅是為了本地“存儲(chǔ)”數(shù)據(jù)而生。2023-07-07