1. 程式人生 > >ES6中let 和 const 的新特性

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年經驗的前端開發人員
//幫助突破技術瓶頸,提升思維能力。