版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dong001687/article/details/81772353
=>是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]