在新的JS版本中,出现了以双箭头 =>表示函数的方式即箭头函数。以下对箭头函数的使用作出说明。
一、箭头函数与普通函数(function)的区别:
1.1 箭头函数形式如下:
somefun((param1,param2)=> {
});
1.2 普通函数形式如下:
somefun(function(param1,param2){
});
1.3 箭头函数与普通函数的区别
箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
二、箭头函数的语法
2.1 基本语法
(param1, param2, …, paramN) => { statements; [return val;] }
箭头函数的函数体用大括号{}包裹,为一个复合语句(函数体),如果箭头函数需要返回值,在大括号里可以用return来返回值。
2.2 简单表达式语法
如果箭头函数的函数体用一条语句就可以表达,则为简单语法
(param1, param2, …, paramN) => expression
js解释器计算 expression 的最终值,并让箭头函数返回该值,与简单表达式语法等价的基本语法如下:
(param1, param2, …, paramN) =>{ return expression; }
2.3 当只有一个参数时,圆括号是可选的:
(singleParam) => { statements }
singleParam => { statements }
以上只有一个参数,两个表示方法等价。
2.4 如果箭头函数没有参数的函数应该保留圆括号
() => { statements }
如果箭头函数没有参数,则双箭头左侧的圆括号不能省略,否则JS无法解释。
2.5 加括号的函数体返回对象
如下表达式,返回一个对象,因为 大括号{}被圆括号包裹了,而圆括号是一个括号运算放,所以 ({}) 不再是一个复合语句,而是 表示取圆括号里的对象。
params => ({foo: bar})
以上 箭头函数返回 对象 {foo: bar}。
2.6 示例说明
const materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
//基本表达式
console.log(materials.map(material => { const a = material.length; return a + 2;}));
//简单表达式语法
console.log(materials.map((material)=> material.length));
//当只有一个参数时,圆括号是可选的
console.log(materials.map(material=>{ return material.length;} ));
//加括号的函数体返回对象
console.log(materials.map((material)=>({ len: material.length}) ));
以上代码输出如下:
Array [10, 8, 9, 11]
Array [8, 6, 7, 9]
Array [8, 6, 7, 9]
Array [Object { len: 8 }, Object { len: 6 }, Object { len: 7 }, Object { len: 9 }]
2.7 参数解构
如果箭头函数的参数是一个对象,而箭头函数的表达式只用到参数对象的部分属性,可以用解构表达式,示例如下:
var elements = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
在这个例子中,map 传递给箭头回调函数的参数是一个字符串对象,因为我们只需要该字符串的 `length` 属性,所以可以使用参数解构,需要注意的是字符串 `"length"` 是我们想要获得的属性的名称,而 `lengthFooBArX` 则只是个自定义的变量名,可以用任意合法的变量名代替。
2.8 箭头函数在参数和箭头之间不能换行
以下语法是错误的:
var func = ()
=> 1;
// SyntaxError: expected expression, got '=>'
可以通过在‘=>’之后换行,或者用‘( )’、'{ }'来实现换行,如下以下语法是正确的:
var func = (a, b, c) =>
1;
var func = (a, b, c) => (
1
);
var func = (a, b, c) => {
return 1
};
var func = (
a,
b,
c
) => 1;
// 不会有语法错误