理解let並 const在JavaScript ES6中(2)
let
使用相同的名稱
定義多個
變數
雖然您無法
let
在一個塊中多次
定義同一個
變數,但沒有什麼可以阻止您在另一個塊中執行此操作。
要記住的是ES6指令碼將它們視為單獨的變數:
我們已經宣佈
let
mybrother兩次,每個塊一次,這是有效的。
每個
mybrother
變數都與另一個變數不同,它是在其定義的塊中的域之王。如果我們替換
let
了
var
,
console.log()
在兩個例項中都會返回“Jason”,因為第二個
var
宣告在遇到時會用值“Jason”覆蓋第一個。
使用
let
裡面的(...)迴圈
當談到
for(var i;;)
JavaScript中的迴圈時,使用
let
而不是
var
跟蹤迭代提供了獨特的優勢 - 我們不再需要在迴圈內使用IIFE(立即呼叫的函式表示式)來正確捕獲每個迭代變數的值我們應該在以後需要這些值。
考慮以下傳統的for迴圈,它嘗試在迴圈執行時之後呼叫迭代變數的值,
setTimeout
例如:
這失敗了,你得到的只是
i
最後一次迭代
的值
,而不是0,1,2,3,4。問題是
var
變數沒有作用於它所在的塊,因此無處可訪問,無論是在函式是在函式中定義的,或者在函式外部全域性定義的函式。
這意味著
i
在for迴圈期間重複覆蓋
變數
。
當
setTimeout
試圖回憶時
i
,所有它得到的是最後一個值
i
被設定為。
在過去,克服這個麻煩問題的常用方法是在for迴圈中丟擲一個IIFE來建立一個閉包,捕獲
i
每次迭代
的值
:
現在它起作用了,但是,如此醜陋和冗長。
替換
var
為
let
自動解決這個常見問題,因為迭代變數使用
let
範圍
定義
i
了它所在的塊的
每個例項
,建立了與圍繞for迴圈包裝IIFE相同的結果:
i
無論延遲如何,都會返回
正確的
gets
值
。
這在許多場景中都很有用,例如依賴於生成
i
不同請求
的值的迴圈內的Ajax請求
,或者利用值
i
來執行鍼對其繫結的元素定製的操作的
事件處理程式
。
這是後來的一個例子:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69933200/viewspace-2651012/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 理解let並 const在JavaScript ES6中(1)JavaScript
- 理解let並 const在JavaScript ES6中(4)JavaScript
- ES6系列——let和const深入理解
- [譯] 在JavaScript中何時使用var、let及constJavaScript
- 深入理解ES6之var,let,const區別
- ES6中var,let,const的區別
- ES6中let 和 const 的新特性
- ES6中var/let/const的區別
- JavaScript 高階—— ES6新增語法 const(let const var區別)JavaScript
- ES6 let和const命令
- JavaScript中let、const、var 的區別JavaScript
- ES6語法——let和const
- ES6學習let&const
- [ES6深度解析]13:let const
- JavaScript中的var、let 及 const 區別JavaScript
- ES6中let和var和const的區別
- es6學習之let和const
- ES6入門——let和const命令
- es6 let const與var 的區別
- let & const —— ES6基礎總結(二)
- ES6 - let與const,解構賦值賦值
- es6新特性--let,const關鍵字
- var與ES6中const、let宣告的變數的區別變數
- ES6學習筆記一(let和const)筆記
- ES6標準入門之---let與const
- ES6學習筆記(一)————————————–let和const筆記
- ES6 let 與 const的應用介紹
- JavaScript 中的 Var,Let 和 Const 有什麼區別JavaScript
- When to use var vs let vs const in JavaScriptJavaScript
- ES5 和 ES6:let const var 區別
- 每天學習一點ES6(二)let 和 const
- 【ES6】var、let、const三者的區別
- ES6 let和const詳解及使用細節
- 深入理解JS:var、let、const的異同JS
- 現代JavaScript — ES6+中的Imports,Exports,Let,Const和PromiseJavaScriptImportExportPromise
- 現代JavaScript:ES6+ 中的 Imports,Exports,Let,Const 和 PromiseJavaScriptImportExportPromise
- ES6 --- 新的變數宣告方式 let 與 const 解析變數
- ES6系列入門學習記錄:let和const