ES6這些就夠了

剛開始用vue或者react，很多時候我們都會把es6這個大兄弟加入我們的技術棧中。但是es6那麼多那麼多特性，我們真的需要全部都掌握嗎？秉著二八原則，掌握好常用的、有用的這個可以讓我們的開發快速起飛。

接下來我們就聊聊es6那些可愛的新特性吧。

在es6之前，我們都是用var關鍵字宣告變數。無論宣告在何處，都會被視為宣告在函式的最頂部(不在函式內即在全域性作用域的最頂部)。這就是函式變數提公升例如:

function
aa() else 
}

以上的**實際上是：

function
aa() else 
//此處訪問test 值為undefined
}

所以不用關心bool是否為trueorfalse。實際上，無論如何test都會被建立宣告。

接下來es6主角登場：

我們通常用let和const來宣告，let表示變數、const表示常量。let和const都是塊級作用域。怎麼理解這個塊級作用域？

說白了{}大括號內的**塊即為let和const的作用域。

看以下**：

function
aa() else 
}

let的作用域是在它所在當前**塊，但不會被提公升到當前函式的最頂部。

再來說說const

const宣告的變數都會被認為是常量，意思就是它的值被設定完成後就不能再修改了。

const name = 'lux'
name = 'joe'
//再次賦值此時會報錯

還有，如果const的是乙個物件，物件所包含的值是可以被修改的。抽象一點兒說，就是物件所指向的位址沒有變就行。

const student = 
// 沒毛病
student.name = 'yy'
// 如果這樣子就會報錯了
student =

說一道面試題

var funcs = 
for (var i = 0; i < 10; i++) )
}funcs.foreach(function(func) )

這樣的面試題是大家常見，很多同學一看就知道輸出 10 十次

但是如果我們想依次輸出0到9呢？

有兩種解決方法。直接看一下**。

// es5告訴我們可以利用閉包解決這個問題
var funcs = 
for (var i = 0; i < 10; i++) 
})(i))}
funcs.foreach(function(func) )

// 再來看看es6怎麼處理的
const funcs = 
for (let i = 0; i < 10; i++) )
}funcs.foreach(func => func())

達到相同的效果，es6簡潔的解決方案是不是更讓你心動！！！

es6模板字元簡直是開發者的福音啊，解決了es5在字串功能上的痛點。

第乙個用途，基本的字串格式化。將表示式嵌入字串中進行拼接。用${}來界定。

//es5 
var name = 'lux'
console.log('hello' + name)
//es6
const name = 'lux'
console.log(`hello $`) //hello lux

第二個用途，在es5時我們通過反斜槓(\)來做多行字串或者字串一行行拼接。es6反引號(``)直接搞定。

// es5
var msg = "hi \
man!
"// es6
const template = `hello world
`

對於字串es6當然也提供了很多厲害也很有意思的方法

ES6這些就夠了

剛開始用vue或者react，很多時候我們都會把es6這個大兄弟加入我們的技術棧中。但是es6那麼多那麼多特性，我們真的需要全部都掌握嗎？秉著二八原則，掌握好常用的有用的這個可以讓我們的開發快速起飛。接下來我們就聊聊es6那些可愛的新特性吧。在es6之前，我們都是用var關鍵字宣告變數。無論宣告在...

ES6入門，看這篇就夠了

2.traceur google出的編譯器，把es6編譯成es5 traceur 編譯 bootsrap 引導程式，和我們理解的bootstrap css那個框架沒有半毛錢關係。1.定義變數 let 替代var 擁有塊級作用域。2.const 定義常量常量不可以修改，如果修改會報錯 3.字串連線 ...

ES6入門，看這篇就夠了

2.在瀏覽器中如何使用？2.traceur google出的編譯器，把es6編譯成es5 traceur 編譯 bootsrap 引導程式，和我們理解的bootstrap css那個框架沒有半毛錢關係。3.es6新功能 1.定義變數 let 替代var 擁有塊級作用域。2const 定義常量常量不...

ES6這些就夠了

ES6這些就夠了

ES6入門，看這篇就夠了

ES6入門，看這篇就夠了

相關推薦