【译】如何使用ES6箭头函数使JavaScript代码更易读

原文:https://medium.freecodecamp.org/arrow-functions-in-javascript-2f8bf7df5077 箭头函数是搭建现代 Web 应用程序中一种新的基础构件。在本文中,你将会学习箭头函数如何使代码更简洁、使“this”关键字更易于管理;还将学习隐式返回、使用箭头函数记录日志以及隐式返回结合对象一起使用的方法。 如果你喜欢通过视频而不是文本学习,这是视频链接:https://youtu.be/dB1KA-yz65s 。 与常规函数相比,使用箭头函数有两个优点。首先,箭头函数使代码更简洁。其次,使用箭头函数使得管理“this”关键字更容易。 我见过那些初次学习箭头函数的开发者,对于他们来说箭头函数本身的概念并不是很难理解。你可能已经熟悉函数、函数特性、函数用例等内容,但是当你第一次接触箭头函数语法时还是比较容易困惑的。因此,我们要慢慢来,首先介绍一下与常用函数相比,箭头函数的语法是怎样的。 下面是一个基本函数声明和函数表达式的范例:

现在,如果我们想要将函数表达式改为一个箭头函数,我们可以这样做:

使用箭头函数最难的是习惯它的语法形式,一旦你适应了并坚持下去,相信你将会深入的理解并掌握它。 现在,你可能想知道使用箭头函数带来的所有好处。其实,上面的例子并没有充分显示出箭头函数的优势,我发现当使用匿名函数时,箭头函数的优势发挥的最为明显。通过查看另一个使用 .map  的基本例子,可以让我们对箭头函数的语法更为熟悉。

好了,熟悉的差不多了,接下来让我们进行深入的学习。 假设我们有一个函数:getTweets ,该函数接收用户 id 作为入参,通过访问一个简单的 API 接口后,返回所有星数和转发次数超过 50 的 Twitter 用户。 使用 promise 构造函数定义,这个函数看起来是这样的:

是的,功能虽然实现了,但是这个函数还不是最完美的。尽管具体的实现步骤是紧凑的,但是想法有点过于平常了。根据上述对箭头函数的理解,我们来看一下可以怎样改进 getTweets 函数。

好的,酷极了。但是除了不需要写 function 之外,和上面的写法几乎是一致的。虽然这种写法是有益的,却没有什么值得炫耀的。还是让我们来看一下使用箭头函数带来的下一个优点:“隐式返回”。 使用箭头函数时,如果你的函数是一个“简单的函数体”(对于单行函数的称呼),那么你可以省略“return”关键字,该值会自动(隐式)返回。 所以,前面的 add 示例修改后如下:

更重要的是,修改后的 getTweets 函数示例如下:

该代码不仅容易编写,更重要的是,它更容易阅读。 如果箭头函数只有一个入参,那么我们可以做的进一步的修改是省略该参数周围的 ()。考虑到这一点, getTweets 函数可以这样写:

总的来说,我认为上面做的每一种改变都是巨大的进步。 箭头函数的另一个优点就是如何管理“this”关键字。如果你对“this […]

智慧出行—班车项目羁绊点剖析

“小张,角门西地铁站附近有咱们公司班车吗?早上几点啊?”“有吧,具体时间不知道,你要不打师傅电话问问?”“电话多少?”“额,你找找看……”咳咳,还记得那些与班车纠结的日子吗?哈哈,不怕不怕,智慧班车 APP 的诞生已将那种生活停留在过去啦~现在,请拿起手机打开京东 ME –应用—智慧班车 点击进入,即可定制属于自己的班车旅行,班车路线、发车时间、站点查询…一起来体验下吧! 1、 打开 APP — 搜索班车 — 选择班车,查看班车详情,点击关注;    2、回退至首页可以看到已关注班车,通过下方的推拉按钮查看更加详细信息(包含班车路线、师傅个人信息、班车余位等,可以直接点击联系按钮拨打师傅电话);点击 home icon 添加家庭位置;       3、点击首页搜索按钮,进入搜索页面(搜索内容包含班车线、站点、地铁);点击首页右侧展开按钮滑出侧边栏,查看更多类目信息(再次点击或者点击左侧白色区域可关闭侧边栏); 4、 点击我的班车,可以看到家庭信息(可以删除家庭信息),已关注的班车路线(可以修改默认路线、删除路线);班车路线部分可以选择班车出发地,目前包含总部、朝林广场、北辰、成都、东北、宿迁,班车类型多样(通勤车、摆渡车、加班线班车、培训日班车),是不是很丰富呀,点击感兴趣的路线尽情查看吧~    5、站点地图模块显示所选地点通往四面八方的班车,一片京东红有木有~ 6、 总部很大,迷路的小伙伴们有福啦,快点击总部停车场找班车吧! 以上是简单介绍下智慧班车的使用方法,更多用法等待你去开启。接下来跟大家分享下在项目前端开发过程中遇到的坑点: 公共头部 因为智慧班车 APP 是内嵌到京 ME 中,而且不使用京 ME 的公共头部,所以需要开发一套兼容 Android 、 iOS 手机的头部,效果如下(图 1-1)所示: 该头部分为两个部分:状态栏、导航栏/动作栏。状态栏是指高度为 20 个点,显示电池、时间的最顶部的一个窄条;导航栏(/动作栏)是紧接着状态栏的横条,高度为 44 个点,一般用于显示 APP 标题,返回按钮等操作按钮。( PS:  iOS 中高度为 44 点的横条称为导航栏,而 Android 中称为动作栏)。 […]

© 2017 JDC. All Rights Reserved.