經(jīng)典面試題之JavaScript?for循環(huán)(var?let)
如果你也在面試找工作，那么也一定遇到過這道for循環(huán)打印結(jié)果的題，下面我們來探討下
var循環(huán)
for(var i = 0; i < 10; i++) {
setTimeout(function(){console.log(i)});
}先把答案寫出來
下面來講一下原因：
劃重點(diǎn)
① var
②setTimeout()
重點(diǎn)1：你需要了解一下變量提升（hoisting）
var變量聲明，無論發(fā)生在何處，都在執(zhí)行任何代碼之前進(jìn)行處理。
用var聲明的變量的作用域是它當(dāng)前的執(zhí)行上下文，它可以是嵌套的函數(shù)，也可以是聲明在任何函數(shù)外的變量。如果你重新聲明一個(gè) JavaScript 變量，它將不會丟失其值。
然后上面的代碼其實(shí)是這樣的
var i = 0;
for (; i < 10; i++) {
setTimeout(function () {
console.log(i)
})
}重點(diǎn)2、setTimeout()
它總是在當(dāng)前的同步代碼執(zhí)行完成后開始運(yùn)行。(出自簡書---一斤代碼)
可以加入log進(jìn)行跟蹤驗(yàn)證：、
var i = 0;
for (; i < 10; i++) {
console.log('+++++', i)
setTimeout(function () {
console.log(i)
})
}執(zhí)行結(jié)果：
+++++ 0
+++++ 1
+++++ 2
+++++ 3
+++++ 4
+++++ 5
+++++ 6
+++++ 7
+++++ 8
+++++ 9
10
10
10
10
10
10
10
10
10
10
由此可見，當(dāng)開始執(zhí)行setTimeout()中的代碼時(shí)for循環(huán)外面的變量i就已經(jīng)變成了10，使用console.log(i)從作用域查找到的i值就是10，然后循環(huán)十次10。
let循環(huán)
ES6的let/const，簡單來說let/const是聲明塊級作用域的變量
for(let i = 0; i < 10; i++) {
setTimeout(function(){console.log(i)});
}下面是打印結(jié)果：
到此這篇關(guān)于經(jīng)典面試題之JavaScript for循環(huán)（var let）的文章就介紹到這了,更多相關(guān)js for循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在服務(wù)器端的單元測試中，都有各種各樣的測試框架，在JavaScript中現(xiàn)在也有一些很優(yōu)秀的框架，但在本文中，我們將自己動手一步步來實(shí)現(xiàn)一個(gè)簡單的單元測試框架2012-04-04
這篇文章主要介紹了Cookies 和 Session的詳解及區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-04-04
JavaScript清空數(shù)組元素的兩種方法簡單比較
這篇文章主要介紹了JavaScript清空數(shù)組元素的兩種方法簡單比較,羅列了幾種常見的情況javascript數(shù)組的方法,并且比較了其中的兩種常見方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了javascript基本算法，包括輸出奇偶數(shù)控制算法、冒泡排序等，感興趣的小伙伴們可以參考一下2016-03-03
javascript中使用replaceAll()函數(shù)實(shí)現(xiàn)字符替換的方法
第一次發(fā)現(xiàn)JavaScript中replace()?方法如果直接用str.replace("-","!")?只會替換第一個(gè)匹配的字符.2010-12-12
使用 JScript 創(chuàng)建 .exe 或 .dll 文件的方法
JScript 是由微軟開發(fā)的活動腳本語言，基于 ECMAScript 規(guī)范實(shí)現(xiàn)。Internet Explorer 中的 JavaScript，實(shí)際上是指 JScript。2011-07-07
微信小程序?qū)崿F(xiàn)富文本圖片寬度自適應(yīng)的方法
小程序里圖片會顯示不全，這時(shí)就應(yīng)該做相應(yīng)的處理，使小程序里圖片顯示正確，這篇文章主要介紹了微信小程序?qū)崿F(xiàn)富文本圖片寬度自適應(yīng)的方法，感興趣的小伙伴們可以參考一下2019-01-01
在JavaScript開發(fā)中,錯(cuò)誤處理是一個(gè)不可忽視的重要環(huán)節(jié),本文將深入探討JavaScript中的錯(cuò)誤處理機(jī)制,包括錯(cuò)誤的類型、捕獲與拋出錯(cuò)誤的方法,需要的可以參考下2024-10-10
詳細(xì)介紹適用于小程序的jsEncrypt.js與jsencrypt.min.js加密庫
jsencrypt.min.js是一個(gè)JavaScript庫,它允許開發(fā)者在前端實(shí)現(xiàn)RSA加密和解密操作,而無需深入理解加密算法的底層實(shí)現(xiàn),這篇文章主要介紹了適用于小程序的jsEncrypt.js與jsencrypt.min.js加密庫的相關(guān)資料,需要的朋友可以參考下2025-10-10
JavaScript實(shí)現(xiàn)PDF加載與顯示的技術(shù)指南
在Web開發(fā)中,利用JavaScript技術(shù)加載和顯示PDF文件是一種常見需求,尤其是在文檔預(yù)覽或在線閱讀器的開發(fā)中,本文詳細(xì)介紹了使用JavaScript庫,特別是PDF.js,來實(shí)現(xiàn)PDF文件在瀏覽器中的加載和顯示,需要的朋友可以參考下2025-08-08