你看懂 “箭头函数” 了么?

4,470 阅读2分钟
原文链接: blog.720ui.com

ES6 允许使用“箭头”(=>)定义函数。如果了解 Java 的 Lambda 表达式,回过头来理解 ES6 的箭头函数,就非常好理解了。

参考之前分享的《Java8 特性详解(一) Lambda》的讲解流程,我们在看下 ES6 的内容吧。

从改造开始

首先,我们从一个例子开始,在 ES5 中,我们一般是这么书写的。


var sum1 = function(num1, num2) {
    return num1 + num2;
};

那么,改造成箭头函数,它是什么样子呢?


var sum2 = (num1, num2) => { return num1 + num2;};

小括号内的参数列表和花括号内的代码被 => 分隔开了。这个就是箭头函数的魅力,箭头函数使得表达更加简洁,从而简化了我们的代码。

如果一个表达式的代码块, 只是 return 后面跟一个表达式,那么还可以进一步简化。


var sum3 = (num1, num2) => num1 + num2;

如果某个方法只含有一个参数。


console.info("=> ES5 写法");
var curf1 = function(v) {
    return v;
};

我们甚至可以省略小括号。


console.info("=> ES6 写法");
var curf2 = v => v;

如果某个方法没有参数。


console.info("=> ES5 写法");
var f1 = function() {
    return "梁桂钊";
};

我们仍可以提供一对空的小括号,如同不含参数的方法。


console.info("=> ES6 写法");
var f2 = () => "梁桂钊";

这里,补充一个例外,如果箭头函数直接返回一个对象,必须在对象外面加上括号。


console.info("=> ES5 写法");
var f3 = function() {
    return {
        real_name: "梁桂钊",
        nick_name: "LiangGzone"
    }
};
console.log(f3());

console.info("=> ES6 写法");
var f4 = () => ({real_name: "梁桂钊",nick_name: "LiangGzone"});
console.log(f4());

关于解构

我们还可以使用到 ES6 解构赋值特性。ES5 写法,之前是这样的。


var f5 = function(person) {
    return person.first + ' ' + person.last;
}

使用到 ES6 解构赋值特性后,就更加好理解了。


const f6 = ({ first, last }) => first + ' ' + last;

说说案例

列举两个摘自阮一峰的《ECMAScript 6 入门》的案例。

回调函数

我们经常使用回调函数,之前的常规的做法。


console.info("=> ES5 写法");
var x1 = [1,2,3].map(function (x) {
    return x * x;
});
console.info(x1);

那么,现在我们可以进行改造。


console.info("=> ES6 写法");
var x2 = [1,2,3].map(x => x * x);
console.info(x2);

rest参数结合

没有使用箭头函数,之前,我们的代码可能长这样子。


console.info("=> ES5 写法");
var x3 = function(...nums){
    return nums;
}
console.info(x3(512, 1024));

那么,现在我们可以进行改造。


console.info("=> ES6 写法");
var x4 = (...nums) => nums;
console.info(x4(512, 1024));