服务粉丝

我们一直在努力
当前位置：首页 > 财经 >

【ES6 教程】第五章 JavaScript 箭头函数简介

日期： 来源：web前端开发收集编辑：

英文 | https://www.javascripttutorial.net
翻译 | 杨小爱


在今天的教程中，我们将一起来学习如何使用 JavaScript 箭头函数为函数表达式编写更简洁的代码。

JavaScript 箭头函数简介

与函数表达式相比，ES6 箭头函数为我们提供了一种编写更短语法的替代方法。

下面的例子定义了一个函数表达式，它返回两个数字的和：

let add = function (x, y) {  return x + y;};
console.log(add(10, 20)); // 30

以下示例等效于上述 add() 函数表达式，但使用了箭头函数：

let add = (x, y) => x + y;
console.log(add(10, 20)); // 30;

在本例中，箭头函数有一个表达式 x + y，因此，它返回表达式的结果。

但是，如果使用块语法，则需要指定 return 关键字：

let add = (x, y) => { return x + y; };
typeof 运算符返回一个指示箭头函数类型的函数。
console.log(typeof add); // function

箭头函数也是 Function 类型的一个实例，如下例所示：

console.log(add instanceof Function); // true

带有多个参数的 JavaScript 箭头函数

如果箭头函数有两个或更多参数，则使用以下语法：

(p1, p2, ..., pn) => expression;

以下表达式：

=> expression

等价于以下表达式：

=> { return expression; }

例如，要按降序对数字数组进行排序，可以使用数组对象的 sort() 方法，如下所示：

let numbers = [4,2,6];numbers.sort(function(a,b){     return b - a; });console.log(numbers); // [6,4,2]

代码使用箭头函数语法更简洁：

let numbers = [4,2,6];numbers.sort((a,b) => b - a);console.log(numbers); // [6,4,2]

带有单个参数的 JavaScript 箭头函数

如果箭头函数采用单个参数，则使用以下语法：

(p1) => { statements }

请注意，您可以省略括号，如下所示：

p => { statements }
下面的示例使用箭头函数作为 map() 方法的参数，该方法将字符串数组转换为字符串长度数组。
let names = ['John', 'Mac', 'Peter'];let lengths = names.map(name => name.length);
console.log(lengths);

输出：

[ 4, 3, 5 ]

没有参数的 JavaScript 箭头函数

如果箭头函数没有参数，则需要使用括号，如下所示：

() => { statements }

例如：

let logDoc = () => console.log(window.document);logDoc();

参数定义和箭头之间的换行符

JavaScript 不允许在参数定义和箭头函数中的箭头 (=>) 之间有换行符。

例如，以下代码会导致 SyntaxError：

let multiply = (x,y) => x * y;

但是，以下代码可以正常工作：

let multiply = (x,y) => x * y;

JavaScript 允许我们在参数之间使用换行符，如下例所示：

let multiply = (  x,  y) => x * y;

箭头函数体中的语句和表达式

在 JavaScript 中，表达式的计算结果如下例所示。

10 + 20;

语句执行特定任务，例如：

if (x === y) {    console.log('x equals y');}

如果在箭头函数的主体中使用表达式，则不需要使用花括号。

let square = x => x * x;

但是，如果使用语句，则必须将其包裹在一对花括号中，如下例所示：

let except = msg => {    throw msg;};

JavaScript 箭头函数和对象字面量

考虑以下示例：

let setColor = function (color) {    return {value: color}};
let backgroundColor = setColor('Red');console.log(backgroundColor.value); // "Red"

setColor() 函数表达式返回一个将 value 属性设置为 color 参数的对象。

如果使用以下语法从箭头函数返回对象字面量，则会出现错误。

p => {object:literal}

例如，以下代码会导致错误。

let setColor = color => {value: color };

由于块字面量和对象字面量都使用大括号，因此 JavaScript 引擎无法区分块和对象。

要解决此问题，需要将对象字面量括在括号中，如下所示：

let setColor = color => ({value: color });

箭头函数对比常规功能

箭头函数和常规函数之间有两个主要区别。

首先，在箭头函数中，this、arguments、super、new.target 是词法的。这意味着箭头函数使用封闭词法范围中的这些变量（或构造）。

其次，箭头函数不能用作函数构造函数，如果你使用 new 关键字从箭头函数创建一个新对象，你会得到一个错误。

JavaScript 箭头函数和 this 值

在 JavaScript 中，一个新函数定义了它自己的 this 值。但是，箭头函数并非如此。请参见以下示例：

function Car() {    this.speed = 0;
    this.speedUp = function (speed) {        this.speed = speed;        setTimeout(function () {            console.log(this.speed); // undefined        }, 1000);
    };}
let car = new Car();car.speedUp(50);

在 setTimeout() 函数的匿名函数内部， this.speed 是未定义的。原因是匿名函数的 this 隐藏了 speedUp() 方法的 this。

要解决此问题，请将 this 值分配给不会在匿名函数内隐藏的变量，如下所示：

function Car() {    this.speed = 0;
    this.speedUp = function (speed) {        this.speed = speed;        let self = this;        setTimeout(function () {            console.log(self.speed);        }, 1000);
    };}
let car = new Car();car.speedUp(50); // 50;

与匿名函数不同，箭头函数捕获封闭上下文的 this 值，而不是创建自己的 this 上下文。以下代码应按预期工作：

function Car() {    this.speed = 0;
    this.speedUp = function (speed) {        this.speed = speed;        setTimeout(            () => console.log(this.speed),            1000);
    };}
let car = new Car();car.speedUp(50); // 50;

JavaScript 箭头函数和参数对象

箭头函数没有 arguments 对象。例如：

function show() {    return x => x + arguments[0];}
let display = show(10, 20);let result = display(5);console.log(result); // 15

showMe() 函数内的箭头函数引用 arguments 对象。然而，这个 arguments 对象属于 show() 函数，而不是箭头函数。

此外，箭头函数没有 new.target 关键字。

JavaScript 箭头函数和原型属性

当使用 function 关键字定义函数时，该函数有一个称为原型的属性：

function dump( message ) {    console.log(message);}console.log(dump.hasOwnProperty('prototype')); // true

然而，箭头函数没有原型属性：

let dump = message => console.log(message);console.log(dump.hasOwnProperty('prototype')); // false

将箭头函数用于回调和闭包是一种很好的做法，因为箭头函数的语法更简洁。

总结

  • 使用 (...args) => 表达式；定义箭头函数。

  • 使用 (...args) => { statements } 定义具有多个语句的箭头函数。

  • 箭头函数没有绑定到 this 或 super。

  • 箭头函数没有参数对象、new.target 关键字和原型属性。

以上就是今天教程中跟你分享的全部内容，希望今天这篇教程对你有帮助，如果你还想查看更多关于ES6的教程文章，请点击【推荐阅读】里的相关内容。

推荐阅读

【ES6 教程】第四章 ES6类08—JavaScript new.target 元属性介绍

【ES6 教程】第四章 ES6类07—JavaScript继承使用extends & super

【ES6 教程】第四章 ES6类06—计算属性及其实际应用

【ES6 教程】第四章 ES6类05—如何定义一个类的所有实例

【ES6 教程】第四章 ES6类04—如何定义与类关联的方法

【ES6 教程】第四章 ES6类03—学习另一种使用类表达式定义新类的方法

【ES6 教程】第四章 ES6类02—JavaScript Getter 和 Setter

【ES6 教程】第四章 ES6类01—语法以及如何声明一个类


学习更多技能

请点击下方公众号

文章推荐

相关阅读

  • 一文看懂 Linux 性能分析｜perf 源码实现

  • 我们在《一文看懂Linux性能分析｜perf 原理》一文中介绍过，perf 是基于采样来对程序进行分析的。采样的步骤如下：通过设置一个定时器，定时器的触发时间可以由用户设定。定时器被

  • 送你一套，Excel函数卡片，你要不要？

  • 你好朋友，我是小黑课堂Excel职场课主理人刘大侠。函数公式作为Excel的灵魂之一，是我们学习Excel的重点和难点。目前，包括测试版在内的Excel函数已经累计到504个了，有没有被这个

  • 42个激活函数的全面总结

  • 2015 年 11 月，wikipedia的用户 Laughinthestocks 首次引入了“激活函数表”。从那时开始到现在，维基百科页面已经发生了 391 次更改。在本文中，我通过自己写的一个程序来挖掘

  • 【干货】Origin投稿格式以及高级使用技巧

  • 【做计算 找华算】理论计算助攻顶刊，10000+成功案例，全职海归技术团队、正版商业软件版权！经费预存选华算，高至15%预存增值！1Origin 点线图页面转成高清晰 TIF 图全过程很多期刊

  • 【凡泰Blog】手把手第六篇：小程序开发中使用 JS

  • 点击蓝字关注我们在上期文章中，我们主要聊了聊如何写出小程序的样式内容。在本期文章中，我们来看一下如何在小程序中使用 js 的，即在小程序中使用脚本内容处理内容或样式的改变

  • Go版本大于1.13，程序里这样做错误处理才地道

  • 大家好，这里是每周都在陪你进步的网管。之前写过几篇关于 Go 错误处理的文章，发现文章里不少知识点都有点落伍了，比如Go在1.13后对错误处理增加了一些支持，最大的变化就是支持了

  • WordPress 技巧：获取 Term 的分类模式

  • WordPress 竟然没有一个根据 $term_id 获取分类模式 taxonomy 的函数，那就自己写一个：function get_term_taxonomy($id){ $term = get_term($id); return ($term && !is_wp_er

  • PHP 中如何为函数创建别名

  • 我们知道 PHP 有一个为类创建一个别名的函数：class_alias，比如我们有个类名字是 WPJAM_Items，我们希望使用 WPJAM_Item 时候也有同样的效果，可以使用下面的代码为类 WPJAM_Items

聚合标签

中国 自己的 美国 都是 疫情 的人 的是 亿元 三星 手机 华为 这款 车型 万元 企业 小米 日本 俄罗斯 民警 项目

热门文章

  • “复活”半年后　京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后，杀入公益事业，试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日，“益心一益·守护梦想每一步”2018年四

最新文章

  • 【ES6 教程】第五章 JavaScript 箭头函数简介

  • 英文 | https://www.javascripttutorial.net翻译 | 杨小爱在今天的教程中，我们将一起来学习如何使用 JavaScript 箭头函数为函数表达式编写更简洁的代码。JavaScript 箭头函

  • 【每日一练】107—一款好玩的注册登录UI效果

  • 文 | 杨小爱写在前面注册登录的组件，在前面也分享过一些，今天我们再来看一个注册登录的UI样式效果，截图如下：为了能方便看到鼠标效果，我录了一个GIF的动图，如下：看完了实现后的效果

  • 我老板：你根本不懂 React！

  • 英文 | https://javascript.plainenglish.io/my-boss-you-dont-know-react-at-all-f493970f1807翻译 | 杨小爱前言我已经使用 React 多年，我确信我非常了解它，但最近我的老板

  • 8 个实用的 NPM 技术

  • 英文 | https://javascript.plainenglish.io/8-useful-javascript-coding-techniques-that-you-should-use-d5d63f7c7037翻译 | web前端开发（ID：web_qdkf)这篇文章，跟大家分享8

  • 【每日一练】108—一个登录页面的实现

  • 写在前面今天我们来写一个登录页面，这个在很多企业系统上都会用到，当然，一些网站上也用应用到，所以，它的应用场景还是很多的。现在，我们一起来看一下它的最终效果：以下是实现的源码