1. 程式人生 > >ES6語法:var、let、const的區別詳解

ES6語法:var、let、const的區別詳解

今天來說說es6的語法,最基礎的也就是var,let,const 的用法與區別了,我們來看看他們之間的恩怨情仇。
首先來說說var,這個只要是學過js的都知道,它是用來宣告一個變數的,但是它在開發中也會遇到一些問題,比較難解決。先來看看下面的程式碼:

 

var str="hello world";
​
function testVar(){
  var str="hello";
}
testVar();
console.log(str);

這段程式碼的結果是 "hello world",這說明在var 申明的變數,即使是同樣的名字,在不同的塊中,在外層塊中的變數優先順序更高,也就是說,在外層優先使用並且只能使用當前塊中的變數;而在他的內部塊中的變數,比如說這個函式裡面的str,他其實也是優先使用塊內的str變數,會遮蔽掉外面的str變數,這是一點。再來看看下面一段程式碼

function variableHoisting(){
  if(condition){
    var test="hello javaScript";
  }else{
    console.log(test)
    //這裡可以訪問到test,但是它是undefined,因為初始化為它賦值成了undefined
  }
  //這裡也可以訪問到test
}

可能你會感到奇怪,我的var 申明的變數在if 程式碼塊裡面,為什麼我的else裡面也能訪問呢,其實上面這段程式碼相當於下面這段程式碼

 

function variableHoisting(){
  var test;
  if(condition){
    test="hello javaScript";
  }else{
    console.log(test)
    //這裡可以訪問到test,但是它是undefined,因為初始化為它賦值成了undefined
  }
    //這裡也可以訪問到test
}

現在知道了吧?這就是所謂的變數提升,我在if裡面申明的變數,其實瀏覽器在預解析的時候就對var ,以及function關鍵字的變數或者方法進行了處理,處理後的程式碼就是上面這段程式碼(當然,我之前講過一篇函式宣告與函式表示式的區別,你可以看看,你會知道更多。)看到這裡,也許你不會感覺var 有什麼不好的地方,再往下看看:

```javascript

var funcs = [];
for (var i = 0; i < 10; i++) {
  funcs.push(function() {
    console.log(i); 
  });
}
funcs.forEach(function(func) {
  func(); // 輸出數值 "10" 十次
});

可能你想的是輸出0,1,2,3,4,5,6,7,8,9但是這不是正確答案,這隻能輸出10個10,為什麼呢?因為迴圈完成過後,i已經是10了,再次呼叫的時候,這個i值在每次迭代過程中共享了。
下面我們就來引入一下let,以及const。let 也是用來申明變數的,但是他申明的變數是塊級作用域,什麼意思呢,看下面

function testLet(){
  if(condition){
    let str="hello let"
  }else{
    //這裡訪問不到str 
  }
    //這裡也訪問不到str
}

 



看了上面,你也許就知道了什麼是塊級作用域,也就是一個大括號嘛,括號裡面就是一塊。用let申明的變數是沒有之前所說的變數提升這一說的,所以在外部塊裡面是訪問不到let申明的變數的。這樣,之前說var缺陷的哪一塊程式碼經過小小的改變就能正常輸出0..9了,你看看

var funcs = [];
for (let i = 0; i < 10; i++) {
    funcs.push(function () {
        console.log(i);
    });
}
funcs.forEach(function (func) {
    func(); // 輸出數值 0-9
});    

 

這就是let,與var的一個小區別,當然如果說你申明變數的時候不指名是用的var,還是let,編譯的時候會將這個變數解析為var申明的變數。

不管是var,還是let,他們是不能重複申明的,比如像下面這樣

var str="var";
let str="let";

這樣是會報錯的,編譯的時候,不能重複定義。

然後就是const了,這個其實就是常量的單詞的英文縮寫(constant),沒錯,這是用來申明一個常量的。什麼事常量呢,顧名思義,就是一旦賦值就不能再改變了。比如說:

 

const MAX=3.1415926;
MAX=3.14;

 

這樣是不行的,會報錯,常量不能改變的。來看看const的迴圈,在最基礎的for -i的迴圈裡面,他是會報錯的,執行一次過後就會報錯,但是在for-in 迴圈裡面他是不會報錯的,當然在for-of迴圈裡面也不會

 

var funcs = [],
object = {
  a: true,
  b: true,
  c: true
};
// 不會導致錯誤
for (const key in object) {
  funcs.push(function () {
  console.log(key);
  });
}
funcs.forEach(function (func) {
  func(); // 依次輸出 "a"、 "b"、 "c"
});

 

這樣是不會報錯的,來看看究竟是為什麼呢?

上面說了,const申明的變數是不能改變的,但是,我們試試申明一個物件呢,然後改變物件裡面的屬性的值。

 

const object={
name:"學習筆記",
age:18
}
console.log(object.name)
​
object.name="hello world"
console.log(object.name)

 

這段程式碼,第一個會打印出來“學習筆記”,第二個會打印出來“hello world”,為什麼呢?原因在這,其實,這段程式碼改變的不是object這個物件變數,而是這個變數的屬性,知道了這個就不難理解為什麼在for-in ,for-of迴圈裡面,const不會報錯了吧?如果對你有幫助的話,記得點個關注哦,如果你發現文中有錯誤,記得幫我指出來。

微信公眾號