【ES6 教程】第五章 JavaScript 箭头函数简介
在今天的教程中，我们将一起来学习如何使用 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; };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 }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); // 15showMe() 函数内的箭头函数引用 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类05—如何定义一个类的所有实例
【ES6 教程】第四章 ES6类04—如何定义与类关联的方法
【ES6 教程】第四章 ES6类03—学习另一种使用类表达式定义新类的方法
【ES6 教程】第四章 ES6类02—JavaScript Getter 和 Setter
【ES6 教程】第四章 ES6类01—语法以及如何声明一个类
学习更多技能
请点击下方公众号