JS 中的=＞箭头函数使用说明

在新的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;

// 不会有语法错误