边城

使用 ES6 箭头函数

边城 · 2017-01-18翻译 · 1440阅读 原文链接

译者注:作者简要介绍了 JavaScript 箭头函数的主要语法和用法,但是对于初学者,请一定要关注箭头函数的 this 问题,尤其是在写 jQuery 回调的时候,因为 jQuery 回调很多时候依赖 this

如果你刚开始接触 ES6,你可能听说过“箭头函数”。它是 ECMAScript 6 标准新增的伟大特性,其来源可能是 CoffeeScript 的函数申明语法。你可以把它们看作是能附加在单击事件或鼠标事件上的一次性函数。下面我们会依次介绍一些使用使用箭头函数的场景。

目录

匿名回调

首先介绍箭头函数最直观的用法,即用作匿名回调函数。箭头函数可以用于按钮的单事件,也可以作为 Array.prototype.map 的回调。 The first and most intuitive use for an arrow function would be as an anonymous callback. You can attach an arrow function to a button's click event as but you can also pass it as a callback to Array.prototype.map.

// click.js
const btn = document.querySelector('button');

btn.addEventListener('click', (event) => {
    console.log('clicked');
});

每次我们点击由 btn 变量标识的按钮都会得到一个日志消息“clicked”。没什么花哨的东西,就是用于事件处理的匿名函数的响应而已。

// map.js
let numbers = [1,2,3,4];
let multipliedBy2 = numbers.map((number) => {
    return number * 2;
});

console.log(multipliedBy2); // [2, 4, 6, 8]

我曾在 深入理解 ES6 箭头函数 中提到,如果箭头函数有 简化函数体 / 块函数体 ,它会隐式返回其逻辑的执行结果。这个特性使箭头函数成为 Array 某些操作的理想回调函数,比如那些返回新数组的操作,像 mapfilter

来看一个箭头函数来简化 map 的例子:

const numbers = [1, 2, 3, 4];
const multipliedBy2 = numbers.map((n) => n * 2);

// 或者不需要参数为参数加上括号
const multipliedBy2WithShorterCallback = numbers.map(n => n * 2);

函数表达式

使用箭头函数作为函数表达式在 React.js 社区很受欢迎。这主要是因为其语义非常简洁。Dan Abramov,Redux 的作用,在其示例和教程中广泛使用了这一特性。

const todos = (state = [], action) => {
    switch(action.type) {
    case ADD_TODO:
        return [..state, action.text];
    default:
        return state;
    }
}

使用 todos 标识,你可以在任何需要匿名函数箭头函数的地方调用它。不过要小心函数表达式的宿主与普通函数不同。函数及其函数体会自动提升到所在作用域的顶部,函数表达式则被当作普通的变量看待,只有 todos 变量会被提升到作用域顶部,它的值,函数体,则不会。这就是为什么你不能在函数表达式定义之前调用它们的原因。

返回数据

看看 map 的例子,你会发现从箭头函数返回数据非常简单。

使用 return 关键字

跟其它函数一样,你可以使用 return 关键字从箭头函数返回数据。

const multiply = (x) => {
    return (y) => {
        return x * y;
    }
};

const multiplyBy3 = multiply(3);
multiplyBy3(2); // 6
multiplyBy3(3); // 9

隐式 return

现在重写刚才的例子,使用箭头函数的隐式返回特性。

const multiply = (x) => (y) => x * y;

const multiplyBy3 = multiply(3);
multiplyBy3(2); // 6
multiplyBy3(3); // 9

如果你需要从箭头函数返回对象,可能会遇到问题。你不能直接使用花括号作为返回值,那会导致错误。

const getInitialData = () => {
    id: 1,
    name: 'Jane Doe'
};

// 这里会抛出错误
let initialData = getInitialData();

JavaScript 引擎在遇到对象的花括号时会把它当作代码块,所以它不认识里面的变量标识、冒号和逗号等。

想直接返回一个对象,你只需要用一对小括号把整个对象包裹起来就好。这样就不会再抛出错误,你的代码会按预期正确执行。

// 这就完全有效
const getInitialData = () => ({
    id: 1,
    name: 'Jane Doe'
});

let initialData = getInitialData();

在最后,我总结了所有已知关于箭头函数在实际生活和应用产品中的应用。如果想更深层次地了解这个主题,请参阅我的文章: 深入理解 ES6 箭头函数。我在这篇文章中更深入的讨论了箭头函数。

相关文章