Open YBFACC opened 4 years ago
箭头函数是es6的新特性。它对函数表达式进行缩写,可以使我们更优雅的使用函数进行编程。
以下是我们不使用箭头函数的例子:
let arr = [2, 3, 4, 1, 8] arr.sort(function (a, b) { return a - b })
下面我们将它改写:
let arr = [2, 3, 4, 1, 8] arr.sort((a, b) => a - b)
代码不仅短了,而且行数也减少了。🚀
如果使用一个剪头函数时,你不需要参数,可以使用 () 代替。
()
let f = () => console.log(1) f()
使用单个参数时,可以省略括号。
let a = 1 let f = a => console.log(a) f(a)
使用多个参数,参数需要在在括号内。
let a = 1, b = 2 let f = (a, b) => console.log(a + b) f(a, b)
在函数体中只有一条语句时,隐式的使用return:
let a = 1, b = 2 let f = (a, b) => a + b //等价于以下代码 let g = (a, b) =>{return a + b} console.log(g(a, b)) console.log(f(a, b))
如果你不需要隐式的使用return,可以使用void返回undefeated。
let a = 1, b = 2 let g = (a, b) => void (a + b) let f = (a, b) => a + b console.log(g(a, b), f(a, b))
需要你显式的调用return,不然返回的就是undefined。
let a = 1, b = 2 let g = (a, b) => { let c = 4 return a + b + c } console.log(g(a, b))
箭头函数的this与声明所在的上下文相同。
在浏览器环境下执行以下代码:
var id = 'apple' var obj = { id: 'obj', a: function () { console.log(this.id) }, b: () => { console.log(this.id) return } } obj.a() obj.b()
在箭头函数声明时,上下文环境是window。(用字面量创建的对象,环境参考上一级)
此代码在node环境下,表现不同。无法打印'apple'。
'apple'
原因:node当前文件的环境是 exports,需要微调下代码。
exports.id = 'apple' var obj = { id: 'obj', a: function () { console.log(this.id) }, b: () => { console.log(this.id) return } } obj.a() obj.b()
这样就显示正确了。
箭头函数本事就依靠声明时的this,还怎么new一个对象。😢
可以使用rest参数(...变量名)
ECMAScript 6 入门
《JavaScript忍者秘籍(第2版)》
箭头函数
箭头函数的介绍
箭头函数是es6的新特性。它对函数表达式进行缩写,可以使我们更优雅的使用函数进行编程。
以下是我们不使用箭头函数的例子:
下面我们将它改写:
代码不仅短了,而且行数也减少了。🚀
使用箭头函数
不需要参数
如果使用一个剪头函数时,你不需要参数,可以使用
()
代替。使用单个参数
使用单个参数时,可以省略括号。
使用多参数
使用多个参数,参数需要在在括号内。
单条语句
在函数体中只有一条语句时,隐式的使用return:
如果你不需要隐式的使用return,可以使用void返回undefeated。
多条语句
需要你显式的调用return,不然返回的就是undefined。
注意事项
this的指向
箭头函数的this与声明所在的上下文相同。
在浏览器环境下执行以下代码:
在箭头函数声明时,上下文环境是window。(用字面量创建的对象,环境参考上一级)
此代码在node环境下,表现不同。无法打印
'apple'
。原因:node当前文件的环境是 exports,需要微调下代码。
这样就显示正确了。
不可以使用new构造对象
箭头函数本事就依靠声明时的this,还怎么new一个对象。😢
不可以使用arguments类数组
可以使用rest参数(...变量名)
不可以当作Generator函数
参考
ECMAScript 6 入门
《JavaScript忍者秘籍(第2版)》