=>(es6中的箭头函数)

=>是es6中的新函数，箭头函数，具体用的用法如下，

(x )=>x * x;

相当于如下的匿名函数：

function x(){

return x * x;

}；

应用时，如下，

var f = (x) =>x*x;

f(9);

console.log(f); //输出81

但是需要注意的是，多行语句需要用{}括起来，单行表达式不需要{}，并且会作为函数返回值

我们再来看看一些示例，看看在ES5中的函数怎么通过ES6中的箭头函数来替代吧：

// ES5
var selected = allJobs.filter(function (job) {
  return job.isSelected();
});

// ES6
var selected = allJobs.filter(job => job.isSelected());

当然，也可以定义多个参数：

// ES5
var total = values.reduce(function (a, b) {
  return a + b;
}, 0);

// ES6
var total = values.reduce((a, b) => a + b, 0);

当然=>后面也不一定非得接return 之后的语句，看下面：

// ES5
$("#confetti-btn").click(function (event) {
  playTrumpet();
  fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
  playTrumpet();
  fireConfettiCannon();
});

但是需要注意的是，多行语句需要用{}括起来，单行表达式不需要{}，并且会作为函数返回值。

x => { return x * x }; // 函数返回 x * x
x => x * x; // 同上一行
x => return x * x; // SyntaxError 报错，不能省略 {}
x => { x * x }; // 合法，没有定义返回值，返回 undefined

和普通函数一样，箭头函数也可以使用剩余参数和默认参数。

var func1 = (x = 1, y = 2) => x + y;
func1(); // 得到 3

var func2 = (x, ...args) => { console.log(args) };
func2(1,2,3); // 输出 [2, 3]

参考：https://blog.csdn.net/mevicky/article/details/49942559

=>(es6中的箭头函数)

猜你喜欢