ES6中let 和 const 的新特性

在javascript中，咱們都知道使用var來聲明變量。javascript是函數級做用域，函數內能夠訪問函數外的變量，函數外不能訪問函數內的變量。

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

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

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

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

let的特性：

• 不存在變量提高現象： 即聲明前使用，報ReferenceError。適用於for循環計數器。

var命令會發生」變量提高「現象，即變量能夠在聲明以前使用，值爲undefined let命令改變了語法行爲，它所聲明的變量必定要在聲明後使用，不然報錯。

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

// let 的狀況
console.log(bar); // 報錯ReferenceError
let bar = 2;
//前端全棧學習交流圈：866109386
//面向1-3年經驗的前端開發人員
//幫助突破技術瓶頸，提高思惟能力。
複製代碼

• 暫時性死區： 即在塊級做用域內使用let聲明變量，該變量只能在該做用域內使用。

若是區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就造成了封閉做用域。凡是在聲明以前就使用這些變量，就會報錯 *總之，在代碼塊內，使用let命令聲明變量以前，該變量都是不可用的。這在語法上，稱爲「暫時性死區」（temporal dead zone，簡稱 TDZ）。

if (true) {
// TDZ開始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError

let tmp; // TDZ結束
console.log(tmp); // undefined

tmp = 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.1415

PI = 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年經驗的前端開發人員
//幫助突破技術瓶頸，提高思惟能力。
複製代碼