箭头函数的作用是更简短的函数并且不绑定this。
箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
箭头函数在“=>”的左边是参数,参数可空或多个。
右边的是函数体,有一个“简写体”或“块体”,在一个“简写体”中,只需要一个表达式,并附加一个隐式的返回值。在“块体”中,必须使用明确的return语句。
语法:
//没有参数,使用一对圆括号
() => { statements }
//只有一个参数,圆括号可选
(singleParam) => { statements }
singleParam => { statements }
//多个参数
(param1, param2, …, paramN) => { statements }
//可变参数
(param1, param2, ...rest) => { statements }
//默认参数
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }
//如果只有一个表达式,则可省略{ ... }和return
(param1, param2, …, paramN) => expression
//相当于:
(param1, param2, …, paramN) =>{ return expression; }
//如果函数体返回对象字面量表达式,则函数体需要加括号
params => ({foo: bar})
//参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
例子:
var f1 = x => x * x;
console.log(f1(5));
//结果:25
//可变参数
var f2= (...rest) => {
var sum=0;
for(var i=0;i<rest.length;i++){
sum += rest[i];
}
return sum;
};
console.log(f2(1,2,3,4));
//结果:10
//promise链
function f3(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
console.log('f3');
resolve('f3回调数据');
}, 2000);
});
return p;
}
f3().then(a => {
console.log(a);
})
//输出:
//f3
//f3回调数据
另一个例子,数组排序:
var items = new Array(10,8,2,5);
//sort()会按照字符串排序
//items.sort(); //结果:[10, 2, 5, 8]
//数字排序方法1,升序用a-b,降序用b-a
//items.sort(function(a,b){return a-b});//结果:[2, 5, 8, 10]
//数字排序方法2
items.sort((a,b)=>a-b);//结果:[2, 5, 8, 10]
console.log(items);
浏览器兼容性:IE浏览器不支持。
参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions