vue 之 let 和const


瀏覽目錄

 

let

es6新增了let命令,用來聲明變量。它的用法類似於var,但是所聲明的變量,只在let命令所在的代碼塊內有效。

 

上面代碼在代碼塊之中,分別用letvar聲明了兩個變量。然后在代碼塊之外調用這兩個變量,結果let聲明的變量報錯,var聲明的變量返回了正確的值。這表明,let聲明的變量只在它所在的代碼塊有效

for循環相信大家都玩過。下面這種現象扭曲了我們塊級作用域的思想!如果將var改成let就可以了!

   

 再看一個例子:

var a = [];
for (var i = 0; i < 10; i++) {
   a[i] = function () {
     console.log(i);
   };
 }
 a[6]();

上面代碼中,變量ivar命令聲明的,在全局范圍內都有效,所以全局只有一個變量i。每一次循環,變量i的值都會發生改變,而循環內被賦給數組a的函數內部的console.log(i),里面的i指向的就是全局的i。也就是說,所有數組a的成員里面的i,指向的都是同一個i,導致運行時輸出的是最后一輪的i的值,也就是 10

如果使用let,聲明的變量僅在塊級作用域內有效,最后輸出的是 6。

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

上面代碼中,變量ilet聲明的,當前的i只在本輪循環有效,所以每一次循環的i其實都是一個新的變量,所以最后輸出的是6。你可能會問,如果每一輪循環的變量i都是重新聲明的,那它怎么知道上一輪循環的值,從而計算出本輪循環的值?這是因為 JavaScript 引擎內部會記住上一輪循環的值,初始化本輪的變量i時,就在上一輪循環的基礎上進行計算  

不存在變量提升 

var命令會發生”變量提升“現象,即變量可以在聲明之前使用,值為undefined。這種現象多多少少是有些奇怪的,按照一般的邏輯,變量應該在聲明語句之后才可以使用。

為了糾正這種現象,let命令改變了語法行為,它所聲明的變量一定要在聲明后使用,否則報錯。

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;

上面代碼中,變量foovar命令聲明,會發生變量提升,即腳本開始運行時,變量foo已經存在了,但是沒有值,所以會輸出undefined。變量barlet命令聲明,不會發生變量提升。這表示在聲明它之前,變量bar是不存在的,這時如果用到它,就會拋出一個錯誤。

不允許重復聲明  

let不允許在相同作用域內,重復聲明同一個變量。

// 報錯
function func() {
  let a = 10;
  var a = 1;
}

// 報錯
function func() {
  let a = 10;
  let a = 1;
}

因此,不能在函數內部重新聲明參數

function func(arg) {
  let arg; // 報錯
}

function func(arg) {
  {
    let arg; // 不報錯
  }
}

為什么需要塊級作用域?

ES5 只有全局作用域和函數作用域,沒有塊級作用域,這帶來很多不合理的場景。

 第一種場景,內層變量可能會覆蓋外層變量。

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

上面代碼的原意是,if代碼塊的外部使用外層的tmp變量,內部使用內層的tmp變量。但是,函數f執行后,輸出結果為undefined,原因在於變量提升,導致內層的tmp變量覆蓋了外層的tmp變量。

第二種場景,用來計數的循環變量泄露為全局變量。

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

上面代碼中,變量i只用來控制循環,但是循環結束后,它並沒有消失,泄露成了全局變量。

const 

基本語法

const聲明一個只讀的常量。一旦聲明,常量的值就不能改變。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代碼表明改變常量的值會報錯

const聲明的變量不得改變值,這意味着,const一旦聲明變量,就必須立即初始化,不能留到以后賦值

const foo;
// SyntaxError: Missing initializer in const declaration

上面代碼表示,對於const來說,只聲明不賦值,就會報錯

  

const的作用域與let命令相同:只在聲明所在的塊級作用域內有效。

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM