ES6 let語(yǔ)法和const語(yǔ)法

let語(yǔ)法的第一個(gè)特點(diǎn):

let變量用來聲明變量(var命令也是),需要注意的是,let聲明的變量只有在代碼塊內(nèi)才有效。也就是說代碼塊之外不能調(diào)用代碼塊(”{}“)內(nèi)用let聲明的變量,而var就可以調(diào)用,并且例如在for循環(huán)代碼塊內(nèi):函數(shù)內(nèi)部的變量i與循環(huán)變量i不在同一個(gè)作用域,有各自單獨(dú)的作用域。

例如:(在for中用let來聲明變量)
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); //打印結(jié)果:6

上面是使用了let來聲明變量i,如果是使用var來聲明的話,那么結(jié)果就會(huì)變成:10。

解析: 變量i用let來聲明的話,當(dāng)前的i只在本輪循環(huán)有效,所以對(duì)于上面的for{}中的i每一次循環(huán)都是一個(gè)新的值:1。

a[i]中的i調(diào)用不了let聲明的i變量值,固a6,console.log(i)輸出:6。

針對(duì)這一特點(diǎn),代碼塊中l(wèi)et聲明的變量不受其他代碼塊作用域的影響。

let語(yǔ)法的第二個(gè)特點(diǎn):

let聲明的變量一定要在聲明后才能使用,而var聲明的變量可以在還沒聲明之前使用,值為undefined。

var tmp = 123;
 
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

解析:var定義了全局變量tmp,而在塊作用域中l(wèi)et聲明了一個(gè)局部變量tmp,同名的tmp,會(huì)使后者的這個(gè)tmp綁定死在if{}代碼塊中,所以回到上面的這一個(gè)特點(diǎn),let聲明的變量一定要在聲明后才能使用。所以會(huì)報(bào)錯(cuò):ReferenceError。

名稱介紹:暫時(shí)性死區(qū)(在代碼塊內(nèi),使用let命令聲明變量之前,該變量都是不可用的)。

變量在使用let聲明之前,去使用了就會(huì)報(bào)錯(cuò)。

就像這樣:
let x = x;
像死區(qū)的還有下面這一種也會(huì)報(bào)錯(cuò):

function bar(x = y, y = 2) {
  return [x, y];
}
bar(); //報(bào)錯(cuò)

改成這樣就不會(huì)報(bào)錯(cuò):

function bar(x = 2, y = x) {
  return [x, y];
}
bar(); // [2, 2]
let語(yǔ)法的第三個(gè)特點(diǎn):

let不允許在相同作用域內(nèi),重復(fù)聲明同一個(gè)變量,所以不能在函數(shù)內(nèi)重新聲明參數(shù)。

列如:
// 報(bào)錯(cuò)
function func() {
  let a = 10;
  var a = 1;
}
// 報(bào)錯(cuò)
function func() {
  let a = 10;
  let a = 1;
}

因此,不能在函數(shù)內(nèi)部重新聲明參數(shù)。

function func(arg) {
  let arg;
}
func() // 報(bào)錯(cuò)

function func(arg) {
  {
    let arg;
  }
}
func() // 不報(bào)錯(cuò)
let語(yǔ)法的第四個(gè)特點(diǎn):塊級(jí)作用域

使用let聲明的變量被限制在了塊中,所以ES6就有了塊級(jí)作用域,在ES5只有全局作用域與函數(shù)作用域。

為什么需要塊級(jí)作用域呢?(來看看沒有塊級(jí)作用的一些不合理場(chǎng)景)

第一種場(chǎng)景,內(nèi)層變量可能會(huì)覆蓋外層變量:

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

對(duì)于上面這段代碼中,if代碼塊的外部使用外層的tmp變量,內(nèi)部使用內(nèi)層的tmp變量,并且內(nèi)層的tmp變量覆蓋了外層的tmp變量。
第二種場(chǎng)景,用來計(jì)數(shù)的循環(huán)變量泄露為全局變量:

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

上面代碼中的i理應(yīng)只作用與for{}代碼塊中,但是循環(huán)結(jié)束后,并沒有消失,而是泄露成了全局的變量。

塊級(jí)作用域演示:

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

如果兩個(gè)變量聲明都換成var來聲明,那么結(jié)果就是10。

ES6允許多層塊級(jí)作用域嵌套,每一層都是一個(gè)單獨(dú)的作用域,各層作用域無法讀取其他層作用域的內(nèi)部變量。

不同層作用域可以定義同名變量。

塊級(jí)作用域的出現(xiàn),實(shí)際上使得獲得廣泛應(yīng)用的匿名立即執(zhí)行函數(shù)表達(dá)式(匿名 IIFE)不再必要了:

// 情況一
if (true) {
  function f() {}
}
 
// 情況二
try {
  function f() {}
} catch(e) {
  // ...
}

但是盡量不要這樣使用,應(yīng)當(dāng)優(yōu)先考慮函數(shù)表達(dá)式,因?yàn)椴淮_定瀏覽器支不支持ES6。

塊作用域需要存在“{}”:

// 第一種寫法,報(bào)錯(cuò)
if (true) let x = 1;
 
// 第二種寫法,不報(bào)錯(cuò)
if (true) {
  let x = 1;
}

上面代碼中,第一種寫法沒有大括號(hào),所以不存在塊級(jí)作用域,let只能出現(xiàn)在當(dāng)前作用域的頂層,所以報(bào)錯(cuò)。第二種寫法有大括號(hào),所以塊級(jí)作用域成立。

函數(shù)聲明也是如此,嚴(yán)格模式下,函數(shù)只能聲明在當(dāng)前作用域的頂層:

// 不報(bào)錯(cuò)
'use strict';
if (true) {
  function f() {}
}
 
// 報(bào)錯(cuò)
'use strict';
if (true)
  function f() {}

以上是let語(yǔ)法的用法,下面我們看下const語(yǔ)法。

const語(yǔ)法

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

const PI = 3.1415;
PI // 3.1415

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

上面代碼表明改變常量的值會(huì)報(bào)錯(cuò)。

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

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

上面代碼表示,對(duì)于const來說,只聲明不賦值,就會(huì)報(bào)錯(cuò)。

const的作用域與let命令相同:只在聲明所在的塊級(jí)作用域內(nèi)有效。

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

const命令聲明的常量也是不提升,同樣存在暫時(shí)性死區(qū),只能在聲明的位置后面使用。

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

上面代碼在常量MAX聲明之前就調(diào)用,結(jié)果報(bào)錯(cuò)。

const聲明的常量,也與let一樣不可重復(fù)聲明。

var message = "Hello!";
let age = 25;

// 以下兩行都會(huì)報(bào)錯(cuò)
const message = "Goodbye!";
const age = 30;

對(duì)于復(fù)合類型的變量,變量名不指向數(shù)據(jù),而是指向數(shù)據(jù)所在的地址。const命令只是保證變量名指向的地址不變,并不保證該地址的數(shù)據(jù)不變,所以將一個(gè)對(duì)象聲明為常量必須非常小心。

const foo = {};
foo.prop = 123;

foo.prop
// 123

foo = {}; // TypeError: "foo" is read-only

上面代碼中,常量foo儲(chǔ)存的是一個(gè)地址,這個(gè)地址指向一個(gè)對(duì)象。不可變的只是這個(gè)地址,即不能把foo指向另一個(gè)地址,但對(duì)象本身是可變的,所以依然可以為其添加新屬性。

下面是另一個(gè)例子。

const a = [];
a.push('Hello'); // 可執(zhí)行
a.length = 0;    // 可執(zhí)行
a = ['Dave'];    // 報(bào)錯(cuò)

上面代碼中,常量a是一個(gè)數(shù)組,這個(gè)數(shù)組本身是可寫的,但是如果將另一個(gè)數(shù)組賦值給a,就會(huì)報(bào)錯(cuò)。

如果真的想將對(duì)象凍結(jié),應(yīng)該使用Object.freeze方法。
const foo = Object.freeze({});
// 常規(guī)模式時(shí),下面一行不起作用;
// 嚴(yán)格模式時(shí),該行會(huì)報(bào)錯(cuò)
foo.prop = 123;
上面代碼中,常量foo指向一個(gè)凍結(jié)的對(duì)象,所以添加新屬性不起作用,嚴(yán)格模式時(shí)還會(huì)報(bào)錯(cuò)。

除了將對(duì)象本身凍結(jié),對(duì)象的屬性也應(yīng)該凍結(jié)。下面是一個(gè)將對(duì)象徹底凍結(jié)的函數(shù)。

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, value) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

ES5只有兩種聲明變量的方法:var命令和function命令。ES6除了添加let和const命令,后面章節(jié)還會(huì)提到,另外兩種聲明變量的方法:import命令和class命令。所以,ES6一共有6種聲明變量的方法。

全局對(duì)象的屬性

全局對(duì)象是最頂層的對(duì)象,在瀏覽器環(huán)境指的是window對(duì)象,在Node.js指的是global對(duì)象。ES5之中,全局對(duì)象的屬性與全局變量是等價(jià)的。

window.a = 1;
a // 1

a = 2;
window.a // 2

上面代碼中,全局對(duì)象的屬性賦值與全局變量的賦值,是同一件事。(對(duì)于Node來說,這一條只對(duì)REPL環(huán)境適用,模塊環(huán)境之中,全局變量必須顯式聲明成global對(duì)象的屬性。)

未聲明的全局變量,自動(dòng)成為全局對(duì)象window的屬性,這被認(rèn)為是JavaScript語(yǔ)言最大的設(shè)計(jì)敗筆之一。這樣的設(shè)計(jì)帶來了兩個(gè)很大的問題,首先是沒法在編譯時(shí)就報(bào)出變量未聲明的錯(cuò)誤,只有運(yùn)行時(shí)才能知道,其次程序員很容易不知不覺地就創(chuàng)建了全局變量(比如打字出錯(cuò))。另一方面,從語(yǔ)義上講,語(yǔ)言的頂層對(duì)象是一個(gè)有實(shí)體含義的對(duì)象,也是不合適的。

ES6為了改變這一點(diǎn),一方面規(guī)定,為了保持兼容性,var命令和function命令聲明的全局變量,依舊是全局對(duì)象的屬性;另一方面規(guī)定,let命令、const命令、class命令聲明的全局變量,不屬于全局對(duì)象的屬性。也就是說,從ES6開始,全局變量將逐步與全局對(duì)象的屬性脫鉤。

var a = 1;
// 如果在Node的REPL環(huán)境,可以寫成global.a
// 或者采用通用方法,寫成this.a
window.a // 1

let b = 1;
window.b // undefined

上面代碼中,全局變量a由var命令聲明,所以它是全局對(duì)象的屬性;全局變量b由let命令聲明,所以它不是全局對(duì)象的屬性,返回undefined。
轉(zhuǎn)自:http://es6.ruanyifeng.com/#docs/let

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容