ES6 箭头函数理解

青旅半醒 2022-06-15 05:58 251阅读 0赞

# 你看懂“箭头函数”了么？ #

时间 2016-10-24 20:30:00   [梁桂钊的博客][Link 1]

原文   [http://blog.720ui.com/2016/es6\_arrow\_functions/][http_blog.720ui.com_2016_es6_arrow_functions]

主题  [ECMAScript][]

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

参考之前分享的《 [Java8 特性详解（一） Lambda][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));

[Link 1]: http://www.tuicool.com/sites/UzEzYfr
[http_blog.720ui.com_2016_es6_arrow_functions]: http://blog.720ui.com/2016/es6_arrow_functions/?utm_source=tuicool&utm_medium=referral
[ECMAScript]: http://www.tuicool.com/topics/11060047
[Java8 _ Lambda]: http://blog.720ui.com/2016/java_se8_01_lambda/