本篇文章是es6学习笔记,将github上的文章翻译并整理一下;
【arrow|arrow function】箭头函数在许多现在语言中都已经支持了,javascript在es6当中也终于支持了
- 下面的代码段,我们用一个参数,返回了一个结果
[1,2,3].map( num=> num * 2 )
// <- [2,4,6]用es5表示[1, 2, 3].map(function (num) { return num * 2 })
// <- [2, 4, 6]
- 如果我们需要用到更多的参数,或者不用参数,那么我们需要圆括号将参数包裹起来.
[1,2,3].map(( num,index ) => num*2+index )
//<-[2,5,8,11]
- 当需要其他代码块,并且只返回一个表达式时我们需要中括号
[1,2,3,4].map(num => {
var multiplier = 2 + num;
return num * multiplier
})
// <- [3, 8, 15, 24]
- 当你运用插入语法时,你也可以添加更多参数
[1, 2, 3, 4].map((num, index) => {
var multiplier = 2 + index
return num * multiplier
})
// <- [2, 6, 12, 20]
- 当我们需要返回一个对象的时候我们需要把表达式包裹在大括号中,只有这样才不会被解析成代码块
[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' }]
*/
- 一个很酷的属性是箭头函数绑定了this上下文的属性
function Timer () {
this.seconds = 0
setInterval(() => this.seconds++, 1000)
}
var timer = new Timer()
setTimeout(() => console.log(timer.seconds), 3100)
// <- 3