總結下var、let 和 const 的區別

pingink 發布于2019-08-26 12:20 / 3425人閱讀

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

前言

var 和 let 的區別是老生常談，看到網上一些文章的總結，有的不太全面，甚至有的描述不太準確，在這里盡量全面的總結下這三者的區別。

let 是 ES6新增的變量類型，用來代替 var 的一些缺陷，跟 var 相比主要有以下區別：

1. let 使用塊級作用域

在 ES6之前，ES5中js只有全局作用域和函數作用域，例如：

if(true) {
   var a = "name"
}
console.log("a",a) // name

作用域是一個獨立的地盤，讓變量不外泄出去，但是上例中的變量就外泄了出去，所以此時 JS 沒有塊級作用域的概念。

var a = 1;
function fn() {
   var a = 2;
   console.log("fn",a);
}
console.log("global",a);
fn();

全局作用域就是最外層的作用域，如果我們寫了很多行 JS 代碼，變量定義都沒有用函數包括，那么它們就全部都在全局作用域中。這樣的壞處就是很容易沖突。
ES6中加入塊級作用域之后：

if(true) {
   let a = "name"
}
console.log("a",a) // Uncaught ReferenceError: a is not defined

塊作用域內用 let 聲明的變量，在塊外是不可見的，如果引用的話就會報錯。

2. let 約束了變量提升而不是沒有變量提升

在 js 中變量和函數都會提升:

function fn() {
   console.log("a",a);
   var a = 1;  // undefind
}
fn()

a其實已經在調用前被聲明了，只是沒有被初始化。JavaScript會把作用域里的所有變量和函數提到函數的頂部聲明,相當于：

function fn() {
   var a;
   console.log("a",a);
   a = 1;  // undefind
}
fn()

JavaScript會使用undefined缺省值創建變量a,事實上瀏覽器并沒有把聲明語句放到作用域的頂部，在編譯階段，控制流進入域，該域所有的變量和函數的聲明先進入內存，文中代碼的相對位置不會變動。

變量提升指的是變量聲明的提升，不會提升變量的初始化和賦值。

并且函數的提升優先級大于變量的提升:

function fn() {
            console.log("a", a);
            var a = 1;
            function a () {
                console.log("I am a function");
            }
        }
        fn() // ? a () {console.log("I am a function");}

在上例中， let 聲明的變量的作用域之外引用該變量會報錯，但是否可理解為 let 沒有變量提升？

let a = "outside";
if(true) {
   console.log(a);//Uncaught ReferenceError: a is not defined
    let a = "inside";
}

報出錯誤 a 沒有被定義，而不是引用了全局作用域里的 a，說明 let 聲明的 a 也被提升了。

原因是 let 設計中的暫時性死區：
當前作用域頂部到該變量聲明位置中間的部分，都是該let變量的死區，在死區中，禁止訪問該變量。由此，我們給出結論，let聲明的變量存在變量提升，但是由于死區我們無法在聲明前訪問這個變量。

3. let 禁止重復聲明變量

使用 var 可以重復聲明變量，但是 let 不允許在同一塊作用域內重復聲明同一個變量：

function fn (){
   var a = 1;
   let a = 2;
   console.log(a); //SyntaxError
}

function fn (){
   let a = 1;
   let a = 2;
   console.log(a); //SyntaxError
}

function fn (a){
   let a = 2;
   console.log(a); //SyntaxError
}

上述代碼會報語法錯誤；

4. let不會成為全局對象的屬性

我們在全局范圍內聲明一個變量時，這個變量自動成為全局對象的屬性（在瀏覽器和Node.js環境下，這個全局對象分別是window和global)，但let是獨立存在的變量，不會成為全局對象的屬性：

var a = 1;
console.log(window.a); //1

let b = 2;
console.log(window.b); // undefined

5. const 聲明的常量

以上 let 的規則同樣適用于 const，但是跟 let 的區別是 const 聲明的變量不能重新賦值，所以 const 聲明的變量必須經過初始化。

const a = 1;

a = 2; // // Uncaught TypeError: Assignment to constant variable
const b; // Uncaught SyntaxError: Missing initializer in const declaration

最后

以上大概是總結后的內容，看來，還是多用 let 、const 吧。

參考資料：http://es6.ruanyifeng.com/#do...

云服務器 GPU云服務器寬帶和專線的區別專線和寬帶的區別空間和域名的區別功能和作用的區別

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

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

var和let/const的區別

showImg(https://segmentfault.com/img/remote/1460000017757580); let和const是 ES6 新增的命令，用于聲明變量，這兩個命令跟 ES5 的var有許多不同，并且let和const也有一些細微的不同，再認真閱讀了阮一峰老師的文檔后，發現還是有一些不知道的細節... 博客、前端積累文檔、公眾號、GitHub 內容： var和let...

SHERlocked93 2019-08-23 14:28 評論0 收藏0
箭頭函數和let、const聲明小總結

摘要：無關緊要的開頭最近因為一些事兒辭了剛剛找到的工作，處在待業狀態，去稍微的面了幾家公司，有大有小，有好有壞，發現大家問起來的一些的問題跟我想的不一樣，下來再去研究發現我說的還是有些缺陷，雖然意思是對的，但是表達的很奇怪，怪不得面試官會誤會，參 /*===無關緊要的開頭start===*/最近因為一些事兒辭了剛剛找到的工作，處在待業狀態，去稍微的面了幾家公司，有大有小，有好有壞，發現大家問...

2i18ns 2019-08-22 18:07 評論0 收藏0
var let const 區別

摘要：區別標簽空格分隔規范新增了兩種變量聲明方式，雖然在項目中也經常用到和但是和到底有什么區別，今天做下總結。不允許重復聲明不允許在相同作用域內，重復聲明同一個變量。 var let const 區別標簽（空格分隔）： ES6 ES6規范新增了let、const兩種變量聲明方式，雖然在項目中也經常用到let和const但是和var到底有什么區別，今天做下總結。 1、let 聲明的變量只在...

Ververica 2019-08-23 11:38 評論0 收藏0
Javascript基礎之-var，let和const深入解析（二）

摘要：規范對其是這樣進行的描述的。聲明定義了在正在運行的執行上下文作用域內的變量環境中的變量。在執行時，由帶有的定義的變量被賦其設定項的的值。由于變量已經被聲明，是可訪問的，因此會打印出正確的結果。你想在在變量聲明之前就使用變量？以后再也別這樣做了。新的聲明方式（let，const）較之之前的聲明方式（var），還有一個區別，就是新的方式不允許在變量聲明之前就使用該變量，但是var是可以...

XiNGRZ 2019-08-23 15:14 評論0 收藏0
ES6精解：let、const、塊級作用域

摘要：命令新增了命令，跟類似，都是用來聲明變量的不允許重復聲明報錯不存在變量提升報錯正確寫法為既要先定義，后面才能有這個值，否則會報錯，如果改成會提示未定義，但是就直接報錯了暫時性死區只要在塊級作用域里面存在則它所聲明的變量就綁定在這個塊級作用域 let命令 ES6新增了let命令，跟var類似，都是用來聲明變量的 1.不允許重復聲明 { let a = 1; let a =...

BWrong 2019-08-22 18:20 評論0 收藏0