赞
踩
在新的JS版本中,出现了以双箭头 =>表示函数的方式即箭头函数。以下对箭头函数的使用作出说明。
somefun((param1,param2)=> {
});
somefun(function(param1,param2){
});
箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,但它不能用作构造函数。
(param1, param2, …, paramN) => { statements; [return val;] }
箭头函数的函数体用大括号{}包裹,为一个复合语句(函数体),如果箭头函数需要返回值,在大括号里可以用return来返回值。
如果箭头函数的函数体用一条语句就可以表达,则为简单语法
(param1, param2, …, paramN) => expression
js解释器计算 expression 的最终值,并让箭头函数返回该值,与简单表达式语法等价的基本语法如下:
(param1, param2, …, paramN) =>{ return expression; }
(singleParam) => { statements }
singleParam => { statements }
以上只有一个参数,两个表示方法等价。
() => { statements }
如果箭头函数没有参数,则双箭头左侧的圆括号不能省略,否则JS无法解释。
如下表达式,返回一个对象,因为 大括号{}被圆括号包裹了,而圆括号是一个括号运算放,所以 ({}) 不再是一个复合语句,而是 表示取圆括号里的对象。
params => ({foo: bar})
以上 箭头函数返回 对象 {foo: bar}。
-
- 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}) ));
以上代码输出如下:
<code class="language-plaintext hljs">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 }]</code>
如果箭头函数的参数是一个对象,而箭头函数的表达式只用到参数对象的部分属性,可以用解构表达式,示例如下:
-
- var elements = [
- 'Hydrogen',
- 'Helium',
- 'Lithium',
- 'Beryllium'
- ];
-
- elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
在这个例子中,map 传递给箭头回调函数的参数是一个字符串对象,因为我们只需要该字符串的 `length` 属性,所以可以使用参数解构,需要注意的是字符串 `"length"` 是我们想要获得的属性的名称,而 `lengthFooBArX` 则只是个自定义的变量名,可以用任意合法的变量名代替。
以下语法是错误的:
-
- 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;
-
- // 不会有语法错误
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。