转换为箭头函数 - Javascript

介绍

箭头函数是ES6(ECMAScript 2015)中的一种新语法，它让函数的写法更加简洁，同时避免了传统的函数写法中this的作用域问题。在《JavaScript高级程序设计》中，作者Nicholas C. Zakas也对箭头函数的写法进行了说明，他认为箭头函数的写法在保证代码更好阅读和理解的同时，也更有利于维护和扩展代码。因此，在Javascript开发过程中，箭头函数的应用越来越普遍。

本文主要介绍如何将传统函数的写法转换为箭头函数的写法，并且给出一定的示例进行讲解。

传统函数与箭头函数比较

首先看下面这段传统的函数代码：

function foo(a, b) {
    return a + b;
}
console.log(foo(1, 2));  // 3

然后再看这段代码，它是将传统函数转换为箭头函数的写法：

const foo = (a, b) => a + b;
console.log(foo(1, 2));  // 3

从上面两段代码可以看出，使用箭头函数的写法让代码更加简洁，同时保证了函数的效果不变。

箭头函数语法格式

箭头函数的语法格式如下：

const functionName = (parameter1, parameter2, ..., parameterN) => { function body }

其中：

• functionName是函数名，通常是一个变量。
• parameter1, parameter2, ..., parameterN是函数的参数列表，用逗号隔开。
• function body是函数体，可以是任何Javascript代码，可以是一个表达式也可以是一个语句块。

实现上面的语法格式就可以方便地将传统的函数代码转换为箭头函数的写法。接下来，我们通过实例来详细说明如何将传统函数转换为箭头函数。

实例讲解

实例一：单行代码转换

下面这段代码是一个传统的函数代码：

function multiply(a, b) {
    return a * b;
}

我们要将它转换为箭头函数的写法，只需要将函数名修改为函数变量，然后在其后面增加箭头(=>)符号，最后加上函数体即可。参考下面的转换后代码：

const multiply = (a, b) => a * b;

实例二：函数体为多行代码转换

下面这段代码是一个传统的函数代码：

function calculate(a, b) {
    let sum = a + b;
    let product = a * b;
    return sum - product;
}

我们要将它转换为箭头函数的写法，只需要将函数名修改为函数变量，然后在其后面增加箭头(=>)符号，最后加上相应的函数体即可。参考下面的转换后代码：

const calculate = (a, b) => {
    let sum = a + b;
    let product = a * b;
    return sum - product;
};

实例三：没有参数的函数转换

下面这段代码是一个传统的函数代码：

function getName() {
    return "Tom";
}

我们要将它转换为箭头函数的写法，只需要将函数名修改为函数变量，然后在其后面增加箭头(=>)符号，最后加上相应的函数体即可。参考下面的转换后代码：

const getName = () => "Tom";

注意事项

在编写箭头函数的过程中，需要注意以下两点：

• 如果函数参数只有一个，可以省略括号。例如，(a) => a + 1 可以简写为 a => a + 1。
• 如果函数体只有一句话，可以省略大括号。例如，const getName = () => "Tom"; 等价于 const getName = () => { return "Tom"; };

在开发过程中，如果需要用到箭头函数的写法，需要遵循以上两个规则来写，否则可能会导致代码出错。

总结

箭头函数是ES6(ECMAScript 2015)中的一种新语法，它让函数的写法更加简洁，同时避免了传统的函数写法中this的作用域问题。在编写箭头函数的过程中，需要注意以上几点。通过本文的介绍，相信大家已经掌握了如何将传统函数转换为箭头函数的写法，尽快应用到实际的开发中去吧！

参考资料

• 箭头函数
• JavaScript高级程序设计 （第4版）