javascript的let和const命令怎么使用

本篇內容介紹了“javascript的let和const命令怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

let命令

基本用法

我們都知道let命令是用來聲明變量的，類似于var，但是通過let命令聲明的變量只在所在代碼塊內有效。

let a = [];
for (let i = 0;i < 10; i++ ) {
    a[i] = function () {
        console.log(i);
    }
}
a[5](); // 5

如上代碼所示，使用的是let聲明的i，那么這個變量僅在塊級作用域內有效，即只在每輪循環內有效，所以每次循環的i其實都是一個新變量，所以最后輸出了5。

如果使用了var去申明i，那么這個i是在全局范圍內都有效的，函數數組里的i都會指向同一個i，導出最后輸出的是最后一輪循環的i的值。

那就有了一個疑問，使用let聲明的i如果每一輪都是一個新變量，那怎么知道上一輪循環的值然后計算出本輪的值？

這是因為JavaScript引擎內部會記住上一輪循環的值，初始化當次循環的i時，會在上一輪循環的基礎上計算。

for循環還有一個特別的地方，就是設置循環變量的括號內是一個父作用域，而循環體內是一個單獨的子作用域。

特性

不存在變量提升：

不存在變量提升我們應該都知道，在var命令中會發生“變量提升”，就是變量可以在聲明之前使用，而值是undefined。這種是比較奇怪的現象，因為他都還沒聲明怎么就可以使用呢？

所以。let命令改變了這種語法，通過let聲明的變量一定要在變量聲明后才能用，不然就會報錯。

console.log(b) // undefined
console.log(a) // 報錯ReferenceError
let a = 2;
var b = 1;

暫時性死區

只要塊級作用域內存在Let命令，那么這個let聲明的變量就綁定了這個區域，不會受到外部的影響。

var num = 1;
if(true) {
    num = 2; // 報錯，ReferenceError
    let num;
}

如上面代碼所示，if代碼塊內想要修改的是if外部的num，但是if內部通過let聲明了一個num但為賦值，所以導致了通過let聲明的num綁定了這個塊級作用域（即if內部這個塊級作用域），所以不會受到外部的num影響，所以對num賦值會報錯。

ES6明確規定了，如果在區塊內存在let和const命令，那么這個區塊對這些命令聲明的變量從一開始就形成封閉的作用域，只要在聲明之前就使用這些變量，就會報做。也稱暫時性死區（temporal dead zone,簡稱TDZ）

當然，這也造成了typeof變得不安全了，因為如果一個變量沒有聲明就使用typeof不會報錯，會返回一個undefined，但是現在不成立了，因為會報錯ReferenceError。

function bar(x = y, y = 2) {
    return[x,y] 
}
bar() // 報錯

如上代碼所示，調用bar函數會報錯，因為參數x的默認值等于另一個參數y，但是x在聲明的時候y還沒有聲明，屬于死區。

總之，只要進入當前作用域，所要使用的變量就已經存在，但是不可獲取，只有等到聲明變量的那一行代碼出現，才可以獲取和使用該變量。

其實let和const是存在變量提升的，但是由于暫時性死區的關系，變量已經存在了，但是不可獲取，要等到聲明變量的時候才可以獲取和使用。

不允許重復聲明

let不允許在校內共同作用域內重復聲明同一個變量，這個就不用說了大家都知道。

let a = 1;
let a = 2; // 報錯

const

我們都知道const聲明一個只讀的常量。修改這個值就會報錯。但是實際上保證的不是變量的值不能改動，而是變量指向的那個內存地址不能改動。

對于簡單數據類型來說，值就是保存在變量指向的內存地址中，因此等同于常量。

而對于復合類型的數據，變量指向的內存地址保存的是一個指針，const只保證指針是固定，不保證內部的結構是不是可變的。

    // 給對象添加一個屬性
    const foo = {}
    foo.name = 123
    console.log(foo.name) // 123
    // 將foo指向另一個對象，就會報錯
    foo = {} // 報錯。

如果想要將對象凍結，可以使用Object.freeze

const foo = Object.freeze({});

特性

• 只在聲明所在的塊級作用域內有效。

• const聲明的常量不會提升，同樣存在暫時性死區，只能在聲明后使用。

• 不可重復聲明。

補充——塊級作用域

函數能不能在塊級作用域中聲明呢？

ES5中是規定函數只能在頂級作用域和函數作用域之中聲明，不能在塊級作用域聲明。

ES6中引入了塊級作用域，明確允許在塊級作用域之中聲明函數。而且。函數聲明的語句的行為類似于let，在塊級作用域之外不可引用。

function f() {
    console.log('I am outside!')
}
(function() {
    if(false) {
        function f() {
            console.log('I am inside')
        }
    }
}
f();
}())

上面的代碼，在es5中運行時會得到I am inside!，因為if內部的f函數會被提升到函數頭部。

但是在ES6環境則會報錯，為什么呢？

因為游覽器的實現有自己的方式：

• 允許在塊級作用域內聲明函數

• 函數聲明類似于var,會提升到全局作用域或函數作用域的頭部

• 函數聲明還會提升到所在的塊級作用域的頭部

所以上述代碼實際在ES6的游覽器中會生成這樣的代碼：

  function f() {
    console.log("I am outside!");
  }
  (function () {
    var f = undefined;
    if (false) {
      function f() {
        console.log("I am inside");
      }
    }
  })();

因此，應該避免在塊級作用域內聲明函數，如果確定需要寫成函數表達式的形式，而不是函數聲明語句。

“javascript的let和const命令怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！