ES6中let 和 const 的新特性

wait.發表於2018-11-18

在javascript中，我們都知道使用var來宣告變數。javascript是函式級作用域，函式內可以訪問函式外的變數，函式外不能訪問函式內的變數。

ECMAScript 6 是 JavaScript 語言教程，全面介紹 ECMAScript 6 新引入的語法特性。

ES6 與上一個版本 ES5 的所有不同之處，對涉及的語法知識給予詳細介紹，並給出大量簡潔易懂的示例程式碼。

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在2015年6月正式釋出了。它的目標，是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

那今天就讓我們來詳細瞭解一下let 和 const .

let的特性：

  • 不存在變數提升現象：即宣告前使用，報ReferenceError。適用於for迴圈計數器。

var命令會發生”變數提升“現象，即變數可以在宣告之前使用，值為undefinedlet命令改變了語法行為，它所宣告的變數一定要在宣告後使用，否則報錯。

// var 的情況console.log(foo);
 // 輸出undefinedvar foo = 2;
// let 的情況console.log(bar);
 // 報錯ReferenceErrorlet bar = 2;
//前端全棧學習交流圈：866109386//面向1-3年經驗的前端開發人員//幫助突破技術瓶頸，提升思維能力。複製程式碼
  • 暫時性死區：即在塊級作用域內使用let宣告變數，該變數只能在該作用域內使用。

如果區塊中存在let和const命令，這個區塊對這些命令宣告的變數，從一開始就形成了封閉作用域。凡是在宣告之前就使用這些變數，就會報錯*總之，在程式碼塊內，使用let命令宣告變數之前，該變數都是不可用的。這在語法上，稱為“暫時性死區”（temporal dead zone，簡稱 TDZ）。

if (true) {// TDZ開始tmp = 'abc';
 // ReferenceErrorconsole.log(tmp);
 // ReferenceErrorlet tmp;
 // TDZ結束console.log(tmp);
 // undefinedtmp = 123;
console.log(tmp);
 // 123
  } 複製程式碼

  • 不允許重複宣告：let宣告過的變數不能再次宣告，否則報錯。

    let不允許在相同作用域內，重複宣告同一個變數。

// 報錯Uncaught SyntaxError: Identifier 'a' has already been declared 未捕獲的SyntaxError:識別符號a'a已經宣告瞭if(true) {let a = 10;
var a = 1;

  }// 報錯if(true) {let a = 10;
let a = 1;

  }//因此，不能在函式內部重新宣告引數。function func(arg) {let arg;
 // 報錯 
  }function func(arg) {{let arg;
 // 不報錯
  }
  }//前端全棧學習交流圈：866109386//面向1-3年經驗的前端開發人員//幫助突破技術瓶頸，提升思維能力。複製程式碼

const的特性：

  • 不存在變數提升現象。const宣告一個只讀的常量。一旦宣告，常量的值就不能改變。

const宣告的變數不得改變值，這意味著，const一旦宣告變數，就必須立即初始化，不能留到以後賦值。

const PI = 3.1415;
PI // 3.1415PI = 3;
// TypeError: Assignment to constant variable.分配常數變數複製程式碼
  • 暫時性死區。const的作用域與let命令相同：只在宣告所在的塊級作用域內有效。
   if (true) { 
const MAX = 5;

  }    MAX // Uncaught ReferenceError: MAX is not defined複製程式碼
  • 宣告的是隻讀常量， 不可重複宣告。

const宣告的常量，也與let一樣不可重複宣告。

var message = "Hello!";
let age = 25;
 // 以下兩行都會報錯const message = "Goodbye!";
const age = 30;
複製程式碼
  • 本質儲存的是記憶體地址，簡單型別資料的值就儲存在這個地址中，複合型別資料在這個地址中儲存的是一個指標，這個指標指向的物件可以改變，單指標不可改變。
cost foo = {
  };
 // 可以改變foo的屬性foo.prop = 123;
foo.prop //123 // 不可以使foo指向別的物件foo = {
  };
 //TypeError: "foo" is read-only複製程式碼

凍結物件：

// 徹底凍結var constantize = (obj) =>
 { 
  Object.freeze(obj);
    Object.keys(obj).forEach( (key, i) =>
 { 
    if( typeof obj[key] === 'object' ){ 
     constantize( obj[key] );
     
  }   
  });
 
  }//前端全棧學習交流圈：866109386//面向1-3年經驗的前端開發人員//幫助突破技術瓶頸，提升思維能力。複製程式碼

來源：https://juejin.im/post/5bf16e6fe51d455f0d301226

相關文章