剛開始用vue或者react,很多時候我們都會把es6這個大兄弟加入我們的技術棧中。但是es6那麼多那麼多特性,我們真的需要全部都掌握嗎?秉著二八原則,掌握好常用的、有用的這個可以讓我們的開發快速起飛。
接下來我們就聊聊es6那些可愛的新特性吧。
在es6之前,我們都是用var
關鍵字宣告變數。無論宣告在何處,都會被視為宣告在函式的最頂部(不在函式內即在全域性作用域的最頂部)。這就是函式變數提公升例如:
function
aa() else
}
以上的**實際上是:
function
aa() else
//此處訪問test 值為undefined
}
所以不用關心bool是否為true
orfalse
。實際上,無論如何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 定義常量 常量不...