ES6這些就夠了

2021-08-20 20:39:23 字數 2345 閱讀 8742

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

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

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

function

aa() else

}

以上的**實際上是:

function

aa() else

//此處訪問test 值為undefined

}

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

接下來es6主角登場:

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

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

看以下**:

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 定義常量 常量不...