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