javascript 箭头函数

注意 箭头函数是JavaScript标准中的ES6新增项。

由于JavaScript中会使用大量函数，增加简化创建函数方式的语法十分有意义，也能让我们开发者生活更愉快。在很多方式中，箭头函数是函数表达式的简化版。

var values = [0, 3, 2, 5, 7, 4, 8 , 1];
values.sort(function (value1, value2) {
  return value1 - value2;
});

 

这个例子中，数组对象的排序方法的参数传入了一个回调函数表达式，JavaScript引擎会调用这个回到函数以降序排序数组，现在来看看如何使用箭头函数来做完全相同的功能：

var values = [0, 3, 2, 5, 7, 4, 8 , 1];
values.sort((value1, value2) => value1 - value2);

 

这种写法不会产生任何因为书写function关键字、大括号或者return语句导致的混乱。箭头函数语句有着比函数表达式更为简单的方式：函数传入两个参数并返回其差值。注意这个新操作符——胖箭头符号=>（等号后面跟着大于号）是定义箭头函数的核心。

现在来解析箭头函数的语法。首先看看它的最简形式：

param => expression

这个箭头函数接收一个参数并返回表达式的值。

console.log('-------------------------比较箭头函数和函数表达式--------------------');
//定义箭头函数
var greet = name => 'Greetings ' + name;
if (greet('Oishi') === 'Greetings Oishi') {
  console.log('Oishi is properly greeted.');
}

//定义函数表达式
var anotherGreet = function (name) {
  return 'Greetings ' + name;
}
if (anotherGreet('Oishi') === 'Greetings Oishi') {
  console.log('Again, Oishi is properly greeted!');
}

 

 

一般情况下，箭头函数会被定义成两种方式：

如你所见，箭头函数的定义以一串可选参数名列表开头，参数名以逗号分隔。如果没有参数或者多余一个参数时，参数列表就必须包裹在括号内。但如果只有一个参数时，括号就不是必须的。参数列表之后必须跟着一个胖箭头符号，以此向我们和JavaScript引擎只是当前处理的是箭头函数。

胖箭头函数操作符后面有两种可选方式。如果要创建一个简单的函数，那么可以把表达式放在这里（可以是数学运算、其他的函数调用等），则该函数的返回值即为此表达式的返回值。例如，第一个箭头函数的示例如下：

 

这个箭头函数的返回值是字符串'Greetings'和参数name的结合。在其他案例中，当箭头函数没那么简单从而需要更多代码时，箭头函数操作符后则可以跟一个代码块，例如：

var greet = name => {
  var helloString = 'Greetings';
  return helloString + name;
};

 

这段代码中箭头函数的返回值和普通函数一样。如果没有return语句，返回值是undefined;反之，返回值就是return表达式的值。

参考《JavaScript忍者秘籍》