引言

在 ES6中,JavaScript 有很多更新,包括 spread 操作符、对象析构化、新类型的变量等等。 最显著的变化之一是箭头函数,这是一种新的简洁的函数编写方式。 使用箭头函数,您可以在一行中定义一个可读和简洁的函数。 在本文中,我们将介绍箭头函数的基础知识,并讨论它们的优点。

Es5的功能

首先让我们看看如何使用 ES5 JavaScript 定义函数。 要定义一个函数,需要使用 function 关键字。 例如,如果我们想定义一个将一个数字乘以2的函数,它看起来就像这样。

function multiplyByTwo(num){
    return num * 2;
}

我们也可以定义这个函数,如果我们愿意的话,我们可以把它赋给一个变量。

const multiplyByTwo = function(num){
    return num * 2;
}

不管你用哪种方式,关键字函数都必须包含在内。

第一个 ES6箭头函数

要创建箭头函数,不需要关键字函数。 事实上,你基本上删除了这个关键字,并添加了一个箭头右后的参数,但前面的开放式花括号。 它看起来是这样的:

const multiplyByTwo = (num) => {
    return num * 2;
}

此时,它看起来与旧的方法没有实质上的不同,但是我们可以做一些改进。

删除不必要的括号

如果没有参数或多个参数,则需要在参数周围加上括号。 但是,如果你的箭头函数只有一个参数,你可以省略括号来简化它,像这样:

const multiplyByTwo = num => {
    return num * 2;
}

隐式返回

通常情况下,我们编写的函数只在一行代码之后返回。 使用旧的函数编写方式,函数中的行数不会影响定义函数的方式。 使用箭头函数,它可以。

如果您只想在函数中执行一行返回,那么可以使用隐式返回来简化函数。 使用隐式 return 时,不需要大括号或 return 关键字。 它看起来是这样的:

const multiplyByTwo = num => num * 2;

您仍然可以使用隐式返回语法,即使不一定需要返回任何内容。 换句话说,如果函数的调用者并不期望它返回任何内容,那么让它返回某些内容并不重要。

例如,如果你想在控制台上打印一些东西,你可以使用隐式返回缩短函数的长度:

const printName = (first, last) => console.log(`${first} ${last}`);

在映射和过滤器中使用箭头函数

使用箭头函数最常见的地方之一是 JavaScript Array 方法,如 map、 reduce、 filter 等。 通过在这些方法中使用箭头函数,可以在一行中完成完整的数组转换。

让我们来看两个例子,一个使用 map,另一个使用 filter。 对于映射版本,假设我们想通过将每个数字乘以2来转换一个数组。 它看起来是这样的:

const twodArray = [1,2,3,4].map( num => num * 2);

注意,使用这个箭头函数时,省略了括号(因为只有一个参数) ,并使用了隐式返回。 这使得整个转换保持在一行。

现在,让我们做另一个过滤器。 假设我们想过滤所有不是偶数的数字。 我们可以这样做:

const filteredArray = [1,2,3,4].filter( num => num % 2 == 0);

同样,没有括号和隐含的返回。

使用箭头函数绑定

让我们从一个在 person 对象中使用 ES5函数定义的例子开始:

const person = {
    first: "James",
    last: "Quick",
    getName: function() {
        this.first + " " + this.last
    }
}

在这种情况下,我们创建了一个带有姓和名的 person 对象,以及一个返回人的全名的 getName ()函数。 在函数内部,我们试图通过调用 this.first 和 this.last 来引用第一个和最后一个属性。

我们能够通过 this 关键字访问这些属性的原因是,当这些函数在对象内部定义时,它会自动绑定到对象本身。 因此,使用 ES5函数,我们仍然可以通过使用。

但是,当您使用箭头函数时,情况会发生一些变化。 箭头函数不对关键字 this 做任何绑定。 因此,如果我们将函数定义更改为箭头函数,事情就不会正常工作。

const person = {
    first: "James",
    last: "Quick",
    getName: () => {
        return this.first + " " + this.last
    }
}

在这种情况下,undefined 将同时为第一个和最后一个属性打印,因为关键字 this 没有绑定到 person 对象,也没有第一个和最后一个变量可以引用。

总结

箭头函数是 ES6 JavaScript 的众多新特性之一。 您将看到它们在示例和文档中的使用越来越多,因此值得学习它们是如何工作的。 它们还可以显著提高代码的简洁性和可读性。