經(jīng)典面試題之JavaScript?for循環(huán)(var?let)
如果你也在面試找工作，那么也一定遇到過(guò)這道for循環(huán)打印結(jié)果的題，下面我們來(lái)探討下
var循環(huán)
for(var i = 0; i < 10; i++) {
setTimeout(function(){console.log(i)});
}先把答案寫出來(lái)
下面來(lái)講一下原因：
劃重點(diǎn)
① var
②setTimeout()
重點(diǎn)1：你需要了解一下變量提升（hoisting）
var變量聲明，無(wú)論發(fā)生在何處，都在執(zhí)行任何代碼之前進(jìn)行處理。
用var聲明的變量的作用域是它當(dāng)前的執(zhí)行上下文，它可以是嵌套的函數(shù)，也可以是聲明在任何函數(shù)外的變量。如果你重新聲明一個(gè) JavaScript 變量，它將不會(huì)丟失其值。
然后上面的代碼其實(shí)是這樣的
var i = 0;
for (; i < 10; i++) {
setTimeout(function () {
console.log(i)
})
}重點(diǎn)2、setTimeout()
它總是在當(dāng)前的同步代碼執(zhí)行完成后開(kāi)始運(yùn)行。(出自簡(jiǎ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
由此可見(jiàn)，當(dāng)開(kāi)始執(zhí)行setTimeout()中的代碼時(shí)for循環(huán)外面的變量i就已經(jīng)變成了10，使用console.log(i)從作用域查找到的i值就是10，然后循環(huán)十次10。
let循環(huán)
ES6的let/const，簡(jiǎn)單來(lái)說(shuō)let/const是聲明塊級(jí)作用域的變量
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺析JS刷新框架中的其他頁(yè)面 && JS刷新窗口方法匯總
本篇文章是對(duì)JS刷新框架中的其他頁(yè)面以及JS刷新窗口的方法進(jìn)行了匯總介紹，需要的朋友可以參考下2013-07-07
JavaScript繪制游戲地圖并且操控人物移動(dòng)
JavaScript開(kāi)發(fā)小游戲,目標(biāo)是使用JavaScript繪制簡(jiǎn)單的二維地圖,采用二維數(shù)組存儲(chǔ)地圖信息,使用表格繪制地圖,每個(gè)td單元格存儲(chǔ)數(shù)據(jù),使用JavaScript keyPress鍵盤事件監(jiān)聽(tīng)WASD鍵,按鍵觸發(fā)時(shí)人物做出相應(yīng)操作,人物下一步碰撞到障礙物,終止人物運(yùn)動(dòng)2023-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)預(yù)覽圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
淺談es6 javascript的map數(shù)據(jù)結(jié)構(gòu)
本篇文章主要介紹了淺談es6 javascript的map數(shù)據(jù)結(jié)構(gòu)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
javascript 改變網(wǎng)頁(yè)加載的CSS
javascript 改變網(wǎng)頁(yè)加載的CSS主要通過(guò)動(dòng)態(tài)響應(yīng)select觸發(fā)的選項(xiàng)變化控制link標(biāo)簽加載的css,以實(shí)現(xiàn)不依賴cookie控制的頁(yè)面css樣式動(dòng)態(tài)加載功能,需要的朋友可以參考一下2007-12-12
輕松實(shí)現(xiàn)js選項(xiàng)卡切換效果
這篇文章主要幫助大家輕松實(shí)現(xiàn)js選項(xiàng)卡切換效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
淺談 Webpack 如何處理圖片(開(kāi)發(fā)、打包、優(yōu)化)
這篇文章主要介紹了淺談 Webpack 如何處理圖片(開(kāi)發(fā)、打包、優(yōu)化)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
JS+HTML5 FileReader實(shí)現(xiàn)文件上傳前本地預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了JS+HTML5 FileReader實(shí)現(xiàn)文件上傳前本地預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript超過(guò)Number最大值的解決方案
在JavaScript中,Number類型是基于IEEE754雙精度浮點(diǎn)數(shù)標(biāo)準(zhǔn)表示的,雖然在常見(jiàn)場(chǎng)景下非常高效,但在處理大數(shù)據(jù)時(shí),Number類型存在顯著的精度限制,在這些場(chǎng)景中,如何精確處理大數(shù)據(jù)和超大數(shù)字成為了一個(gè)重要的問(wèn)題,所以本文給大家介紹了JavaScript超過(guò)Number最大值的解決方案2025-01-01
基于JavaScript的操作系統(tǒng)你聽(tīng)說(shuō)過(guò)嗎？
基于JavaScript的操作系統(tǒng)，你聽(tīng)說(shuō)過(guò)嗎？小編也是第一次聽(tīng)說(shuō)，接觸，和大家一起了解一下2016-01-01