本篇文章是es6學(xué)習(xí)筆記踢关,將github上的文章翻譯并整理一下;
箭頭函數(shù)在許多現(xiàn)在語言中都已經(jīng)支持了,javascript在es6當(dāng)中也終于支持了
- 下面的代碼段伞鲫,我們用一個(gè)參數(shù),返回了一個(gè)結(jié)果
[1,2,3].map( num=> num * 2 )
// <- [2,4,6]
用es5表示
[1, 2, 3].map(function (num) { return num * 2 })
// <- [2, 4, 6]
- 如果我們需要用到更多的參數(shù)签舞,或者不用參數(shù)榔昔,那么我們需要圓括號(hào)將參數(shù)包裹起來.
[1,2,3].map(( num,index ) => num*2+index )
//<-[2,5,8,11]
- 當(dāng)需要其他代碼塊驹闰,并且只返回一個(gè)表達(dá)式時(shí)我們需要中括號(hào)
[1,2,3,4].map(num => {
var multiplier = 2 + num;
return num * multiplier
})
// <- [3, 8, 15, 24]
- 當(dāng)你運(yùn)用插入語法時(shí),你也可以添加更多參數(shù)
[1, 2, 3, 4].map((num, index) => {
var multiplier = 2 + index
return num * multiplier
})
// <- [2, 6, 12, 20]
- 當(dāng)我們需要返回一個(gè)對象的時(shí)候我們需要把表達(dá)式包裹在大括號(hào)中,只有這樣才不會(huì)被解析成代碼塊
[1, 2, 3].map(n => { number: n })
// [undefined, undefined, undefined]
[1, 2, 3].map(n => { number: n, something: 'else' })
// <- SyntaxError
[1, 2, 3].map(n => ({ number: n }))
// <- [{ number: 1 }, { number: 2 }, { number: 3 }]
[1, 2, 3].map(n => ({ number: n, something: 'else' }))
/* <- [
{ number: 1, something: 'else' },
{ number: 2, something: 'else' },
{ number: 3, something: 'else' }]
*/
- 一個(gè)很酷的屬性是箭頭函數(shù)綁定了this上下文的屬性
function Timer () {
this.seconds = 0
setInterval(() => this.seconds++, 1000)
}
var timer = new Timer()
setTimeout(() => console.log(timer.seconds), 3100)
// <- 3