let和const

原先聲明變量的形式

var test = 5; //全局變量 function a() {var cc=3; //局部變量alert(test); } function b(){alert(test);}test = 5;//全局變量 function a() {aa=3; //全局變量alert(test); }

在es6之前，作用域只有全局作用域和函數(shù)作用域，沒(méi)有塊級(jí)作用域，所以考慮如下代碼

{ var a = 6;var a = 8} console.log(a) // 答案是8

我們本來(lái)想著用{}表示一塊作用域，外面應(yīng)該訪問(wèn)不到里面的變量，但是事實(shí)是var聲明的變量泄漏到全局作用域了。所以引出let
let有三個(gè)個(gè)特點(diǎn)：

• 不能重復(fù)賦值
• 作用域是局部作用域
• 不存在變量提升

{let a=10;let a=11} Uncaught SyntaxError: Identifier 'a' has already been declared {let a = 10} a Uncaught ReferenceError: a is not definedat <anonymous>:1:1

作用域是塊級(jí)作用域

var a = []; for (var i = 0; i < 10; i++) {a[i] = function () {console.log(i);}; } a[0](); // 10

因?yàn)関ar定義的是全局，所以在內(nèi)存中只維護(hù)一塊空間，每次+1的時(shí)候這塊空間的值發(fā)生改變，而數(shù)組中的每個(gè)函數(shù)的引用都指向這一塊空間，當(dāng)最后調(diào)用的時(shí)候那塊空間的值就是10了，所以結(jié)果就是10了

var a = []; for (let i = 0; i < 10; i++) {a[i] = function () {console.log(i);}; } a[0](); // 0

let聲明的是塊級(jí)作用域，所以每一次循環(huán)的i其實(shí)都是一個(gè)新的變量，每次循環(huán)都會(huì)創(chuàng)建新的內(nèi)存空間，每個(gè)放到數(shù)組中的函數(shù)都指向?qū)?yīng)的內(nèi)存空間的值，等調(diào)用的時(shí)候就調(diào)用指向的值。那么問(wèn)題來(lái)了，如果每一輪循環(huán)的變量i都是重新聲明的，那它怎么知道上一輪循環(huán)的值，從而計(jì)算出本輪循環(huán)的值？這是因?yàn)?JavaScript 引擎內(nèi)部會(huì)記住上一輪循環(huán)的值，初始化本輪的變量i時(shí)，就在上一輪循環(huán)的基礎(chǔ)上進(jìn)行計(jì)算

變量提升

console.log(foo); // undefined var foo = 2;

在es6之前，變量使用在定義之前得到的結(jié)果是undefiend，這種現(xiàn)象叫做變量提升,這其實(shí)不符合正常的編程邏輯。
js引擎在解釋的時(shí)候從上到下，先找定義的變量，也就是說(shuō)下面代碼其實(shí)是這樣的

var foo; console.log(foo); // undefined foo = 2;

有了let之后

console.log(foo); // 報(bào)錯(cuò) let foo = 2;

塊級(jí)作用域

內(nèi)層變量可能會(huì)覆蓋外層變量

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

至于結(jié)果為啥是undefined參考變量提升的解釋。在內(nèi)部定義的var tmp = 'hello world';的在解釋的時(shí)候在函數(shù)作用域內(nèi)是先var tmp的

用來(lái)計(jì)數(shù)的循環(huán)變量泄露為全局變量

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

變量i只用來(lái)控制循環(huán)，但是循環(huán)結(jié)束后，它并沒(méi)有消失，泄露成了全局變量。

const

const定義的變量有兩點(diǎn)需要注意：

• 不能只用來(lái)聲明，聲明的時(shí)候就必須賦值
• 不能修改

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

模板字符串

在es6之前，我們拼接字符串都有+,這種方式是繁瑣的，可以使用反引號(hào)（`）標(biāo)識(shí)。
反引號(hào)主要有3個(gè)作用：

當(dāng)作普通字符串

定義多行字符串(相當(dāng)于python的三引號(hào))

在字符串中嵌入變量

d 10 `iloce$ze8trgl8bvbq` "iloce10"

箭頭函數(shù)

箭頭函數(shù)就是函數(shù)的一種縮寫(xiě)形式

//無(wú)形參 var f = () => 5; // 等同于 var f = function () { return 5 };//多個(gè)形參 var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) {return num1 + num2; };

箭頭函數(shù)有一點(diǎn)需要注意
在es6之前，函數(shù)體內(nèi)的this對(duì)象，就是使用時(shí)所在的對(duì)象，而不是定義時(shí)所在的對(duì)象

var person = {name:'jack',age:18,　　fav:function(){ console.log(this)}}person.fav();

用了箭頭函數(shù)之后，函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象

var person2 = {name:'jack',age:18,fav: ()=>{// 當(dāng)前this指向了定義時(shí)person2對(duì)象時(shí)所處的對(duì)象（window）console.log(this);}}person2.fav();

為了解決這個(gè)問(wèn)題, 使用對(duì)象的單體模式：

var person2 = {name:'jack',age:18,fav() {// 當(dāng)前this指向了定義時(shí)person2對(duì)象時(shí)所處的對(duì)象（window）console.log(this);}}person2.fav();

生活随笔為你收集整理的es6简单介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。