1. 程式人生 > >你真的懂let和const嗎?

你真的懂let和const嗎?

es6語法

塊級作用域

在ES6之前我們腦海裏應該只存在全局作用域和函數級作用域,沒有塊級作用域。那麽為什麽要引入塊級作用域呢?

避免外層變量被覆蓋

var str = "hello";

function d() {

console.log(str);

if (false) {

var str = 'world';

}

}

d();//undefined

相信很多剛入門的同學看到上述代碼會有所不解,其實在全局作用域str變量已經被聲明且復制,為什麽我函數裏面訪問不到呢。這裏就牽扯到變量提升和函數級作用域的概念。上述代碼其實等同於下放代碼,當函數被執行的時候生成了一個新的作用域也就是函數作用域,js引擎會把變量聲明提到方法體的最前面,大家可以看到只是聲明了並沒有賦值。所以就是

undefined。

var str = "hello";

function d() {

var str ;

console.log(str);

if (false) {

str = 'world';

}

}

d();//undefined

循環變量汙染全局變量

var str = 'hello';

for (var i = 0; i < str.length; i++) {

console.log(str[i]);

}

console.log(i); // 5

很多同學面試的時候可能會遇到上面類似的代碼,疑惑點應該在為什麽會打印出來為什麽會是5,同樣的道理代碼如同下方。變量會被提升,所以在循環結束之後i就被累加到了5.

var str = 'hello';

var i;

for ( i = 0; i < str.length; i++) {

console.log(str[i]);

}

console.log(i); // 5

es6的let和const聲明符,是不存在變量提升的;同時也只在塊級作用域生效。

這個答案應該很明顯了吧

var str = "hello";

function d() {

console.log(str);

if (false) {

let str = 'world';

}

}

d();

暫時性死區MDN

什麽是暫時性死區呢?很多人可能很迷惑。那就聽我娓娓道來,如果說我們使用了let和const命令,作用域內會對這些命令聲明的變量,在它的聲明周期內形成一種封閉作用域。這在語法上,稱為“暫時性死區”。代碼展示如下:

if (true) {

tmp = 'abc'; // ReferenceError

console.log(tmp); // ReferenceError

let tmp;

console.log(tmp); // undefined

tmp = 123;

console.log(tmp); // 123

}

因為let和const聲明是不會被提升的,所以為了保障聲明的有效性,js的解釋引擎會對變量所處的塊級作用域形成一種保護,因此在聲明之前使用會有語法錯誤,是不被允許的。

不能重復聲明

function de(){

var a = "1";

var a = "2";

console.log(a);

}

de()//不報錯

function de(){

var a = "1";

let a = "2";

console.log(a);

}

de()//報錯

function de(){

let a = "1";

let a = "2";

console.log(a);

}

de()//報錯

相信大家一般不會聲明重復變量編碼,所以在這裏就不做解釋了。如果大家感興趣可以自己研究或者來現場一起學習。

const常量

const聲明符的大多特性和let相同,這裏就不多做解釋了。大家都知道const是聲明常量的,一但變量被聲明成常量它就不能再被繼續修改了。大家要註意的是這裏變量不可被修改的是存儲的地址值不可被修改,意思就是簡單類型的數據是不能修改的。復合類型的數據(主要是對象和數組)const只能保證這個指針是固定的,而這個具體的對象實例包含的屬性是可以被修改的。看看代碼我們可能會更清楚:

//實例一

const a = "hello";

console.log(a);//"hello"

a = "world";//Assignment to constant variable

//實例二

const obj = {};

obj.name = "jack";

console.log(obj.name);//"jack"

obj = {};//Assignment to constant variable.

//實例三

const a = [];

a.push('Hello');

console.log(a); //[ 'Hello' ]

a.length = 0;

a = ['Dave']; // Assignment to constant variable.

正如大家所看到的字符串a被復制後就不能在修改,而對象和數組是可以改變它裏面的元素的,但是不能給重新復制一個新的對象實例。由此就可以斷定const聲明出來的變量存的是固定的地址值。

關於es6還有更多的知識點,請關註我接下來的文章。如發現不當之處歡迎加微信(xiaoqiang0672)批評。

技術分享圖片技術分享圖片


你真的懂let和const嗎?