JS中let和var的區別

wenshi11019 發布于2019-08-23 14:20 / 2978人閱讀

摘要：打印錯誤配合循環的獨特應用非常適合用于循環內部的塊級作用域。看一個常見的面試題目同步注冊回調函數到異步的宏任務隊列。是循環體內局部作用域，不受外界影響。

1. 定義變量

聲明語法

var upperA = "A";
let upperB = "B";
const upperC = "C";

只聲明不初始化的結果，【const定義的常量不可以修改，而且必須初始化。】

// var 聲明變量
var upperA;
console.log("打印大寫的A：%s", upperA);
// 結果：打印大寫的A：undefined

// let 聲明變量
var upperB;
console.log("打印大寫的B：%s", upperB);
// 結果：打印大寫的B：undefined

// const 聲明常量
const upperC;
console.log("打印大寫的C：%s", upperC);
// 錯誤：SyntaxError: Missing initializer in const declaration

聲明后值是否可修改，【const定義的常量不可以修改，而且必須初始化。】

// var 聲明變量初始化并修改值
var upperA = "A";
console.log("打印upperA：%s", upperA);
// 結果：打印upperA：A
upperA = "LetterA";
console.log("打印upperA：%s", upperA);
// 結果：打印upperA：LetterA

// let 聲明變量初始化并修改值
var upperB = "B";
console.log("打印大寫的B：%s", upperB);
// 結果：打印upperB：B
upperB = "LetterB";
console.log("打印大寫的B：%s", upperB);
// 結果：打印upperB：LetterB

// const 聲明常量初始化并修改值
const upperC = "C";
console.log("打印upperC：%s", upperC);
// 結果：打印upperC：C
upperC = "LetterC";
console.log("打印upperC：%s", upperC);
// 錯誤：TypeError: Assignment to constant variable.

2. 變量提升

瀏覽器在運行代碼之前會進行預解析，首先解析函數聲明，定義變量，解析完之后再對函數、變量進行運行、賦值等
不論var聲明的變量處于當前作用域的第幾行，都會提升到作用域的頭部。 
var 聲明的變量會被提升到作用域的頂部并初始化為undefined，而let聲明的變量不會被提升到作用域的頂部。

console.log("打印upperA：%s", upperA);
// 結果：打印upperA：undefined
console.log("打印upperB：%s", upperB);
// 錯誤：ReferenceError: upperB is not defined
var upperA = "A";
let upperB = "B";

3. 是否允許重復聲明同一個變量

** var允許在相同作用域內，重復聲明同一個變量，后面聲明的變量會覆蓋前面聲明的變量。
** let不允許在相同作用域內，重復聲明同一個變量。

var upperA = "A";
let upperB = "B";
// 重復聲明
var upperA = "LetterA";
let upperB = "LetterB";
console.log("打印upperA：%s", upperA);
console.log("打印upperB：%s", upperB)
// 錯誤：SyntaxError: Identifier "upperB" has already been declared

4. 作用域

在ES6之前，我們都是用var來聲明變量，而且JS只有函數作用域和全局作用域，沒有塊級作用域，所以{}限定不了var聲明變量的訪問范圍。

// ---------- 例如： ----------
{
    var upperA = "A";
}
console.log("打印upperA：%s", upperA);
# 結果： 打印upperA：A

// ---------- ES6新增的let，可以聲明塊級作用域的變量。----------
{
    let upperB = "B";
}
console.log("打印upperB：%s", upperB);
// 錯誤： ReferenceError: upperB is not defined

5. let配合for循環的獨特應用

let非常適合用于 for循環內部的塊級作用域。
** JS中的for循環體比較特殊，每次執行都是一個全新的獨立的塊作用域，用let聲明的變量傳入到 for循環體的作用域后，不會發生改變，不受外界的影響。

// ---------- 看一個常見的面試題目： ----------
for (var i = 0; i <10; i++) {  
    setTimeout(function() {    // 同步注冊回調函數到 異步的 宏任務隊列。
        console.log(i);        // 執行此代碼時，同步代碼for循環已經執行完成
    }, 0);
}
// 輸出結果：10   共10個
// 這里面的知識點： JS的事件循環機制，setTimeout的機制等

// ---------- 如果把 var改成 let聲明：----------
// i雖然在全局作用域聲明，但是在for循環體局部作用域中使用的時候，變量會被固定，不受外界干擾。
for (let i = 0; i < 10; i++) { 
    setTimeout(function() {
        console.log(i);    //  i 是循環體內局部作用域，不受外界影響。
    }, 0);
}
// 輸出結果：0  1  2  3  4  5  6  7  8 9

云服務器 GPU云服務器 js 中 let js和javascript的區別 js數據對象和對象的區別嗎 js中數據和對象的關系圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100452.html

總結下var、let 和 const 的區別

摘要：前言和的區別是老生常談，看到網上一些文章的總結，有的不太全面，甚至有的描述不太準確，在這里盡量全面的總結下這三者的區別。最后以上大概是總結后的內容，看來，還是多用吧。前言 var 和 let 的區別是老生常談，看到網上一些文章的總結，有的不太全面，甚至有的描述不太準確，在這里盡量全面的總結下這三者的區別。 let 是 ES6新增的變量類型，用來代替 var 的一些缺陷，跟 var...

pingink 2019-08-26 12:20 評論0 收藏0
js中var、let、const的區別

摘要：中的區別主要內容是中三種定義變量的方式，，的區別。定義的變量可以修改，如果不初始化會輸出，不會報錯。正確錯誤，必須初始化函數外定義有輸出值函數外修改定義無法輸出是常量，不可改變，一般大寫，也是塊級作用域。。。 js中var、let、const的區別主要內容是：js中三種定義變量的方式const， var， let的區別。 var定義的變量可以修改，如果不初始化會輸出undefined...

Yuqi 2019-08-21 11:48 評論0 收藏0
深入理解let和var的區別（暫時性死區）！！！

摘要：會出現這樣的情況是因為擁有暫時性死區。規定暫時性死區和語句不出現變量提升，主要是為了減少運行時錯誤，防止在變量聲明前就使用這個變量，從而導致意料之外的行為。首先我們應該知道js引擎在讀取js代碼時會進行兩個步驟：第一個步驟是解釋。第二個步驟是執行。所謂解釋就是會先通篇掃描所有的Js代碼，然后把所有聲明提升到頂端，第二步是執行，執行就是操作一類的。我們先來看個簡單的變量提升...

tanglijun 2019-08-23 14:01 評論0 收藏0
JS 作用域 var與let 區別

摘要：在入門時，最讓人傻傻分不清楚的就是與帶來的作用域的苦惱。明確循環內部的與中的是在不同的作用域中，它們有各自單獨的作用域。局部使用定義時只在該函數作用域內部有效。在es6入門時，最讓人傻傻分不清楚的就是var與let帶來的作用域的苦惱。最近又一次翻看阮一峰老師的文章，重新有了自己的小結。代碼分析 var a = []; for (var i = 0; i < 10; i++) { ...

antyiwei 2019-08-21 18:30 評論0 收藏0
【面試篇】寒冬求職季之你必須要懂的原生JS(上)

摘要：循環可以使用的范圍包括數組和結構某些類似數組的對象對象，以及字符串。只能遍歷數組，不能中斷，返回值是修改后的數組。除了之外，等，也有同樣的問題。聲明一個只讀的常量。這在語法上，稱為暫時性死區。暫時性死區也意味著不再是一個百分百安全的操作。互聯網寒冬之際，各大公司都縮減了HC，甚至是采取了裁員措施，在這樣的大環境之下，想要獲得一份更好的工作，必然需要付出更多的努力。一年前，也許你搞清楚閉包...

AlphaWatch 2019-05-23 16:25 評論0 收藏0