首页 » JavaScript 教程 » JavaScript 箭头函数入门

JavaScript 箭头函数入门

摘要: 本教程将教您如何使用 JavaScript 箭头函数为函数表达式编写更简洁的代码。

JavaScript 箭头函数简介

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

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

let add = function (x, y) {
	return x + y;
};

console.log(add(10, 20)); // 30Code language: JavaScript (javascript)

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

let add = (x, y) => x + y;

console.log(add(10, 20)); // 30;Code language: JavaScript (javascript)

在这个例子中，箭头函数有一个表达式 x + y，所以它返回表达式的结果。

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

let add = (x, y) => { return x + y; };Code language: JavaScript (javascript)

typeof 运算符返回 function，指示箭头函数的类型。

console.log(typeof add); // functionCode language: JavaScript (javascript)

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

console.log(add instanceof Function); // trueCode language: JavaScript (javascript)

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

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

(p1, p2, ..., pn) => expression;Code language: PHP (php)

以下表达式

=> expressionCode language: PHP (php)

等效于以下表达式

=> { return expression; }Code language: PHP (php)

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

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

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

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

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

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

(p1) => { statements }Code language: PHP (php)

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

p => { statements }Code language: PHP (php)

以下示例使用箭头函数作为 map() 方法的参数，该方法将字符串数组转换为字符串长度的数组。

let names = ['John', 'Mac', 'Peter'];
let lengths = names.map(name => name.length);

console.log(lengths);Code language: JavaScript (javascript)

输出

[ 4, 3, 5 ]Code language: JSON / JSON with Comments (json)

没有参数的 JavaScript 箭头函数

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

() => { statements }Code language: PHP (php)

例如

let logDoc = () => console.log(window.document);
logDoc();Code language: JavaScript (javascript)

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

JavaScript 不允许您在参数定义和箭头 (=>) 之间使用换行符。

例如，以下代码会导致 SyntaxError

let multiply = (x,y) 
=> x * y; 
Code language: JavaScript (javascript)

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

let multiply = (x,y) => 
x * y;Code language: JavaScript (javascript)

JavaScript 允许您在参数之间使用换行符，如下面的示例所示

let multiply = (
  x,
  y
) => 
x * y;Code language: JavaScript (javascript)

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

在 JavaScript 中，表达式求值为一个值，如下面的示例所示。

10 + 20;

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

if (x === y) {
    console.log('x equals y');
}Code language: JavaScript (javascript)

如果您在箭头函数体中使用表达式，则无需使用花括号。

let square = x => x * x;Code language: JavaScript (javascript)

但是，如果您使用语句，则必须将它包裹在花括号中，如下面的示例所示

let except = msg => {
    throw msg;
};Code language: JavaScript (javascript)

JavaScript 箭头函数和对象字面量

考虑以下示例

let setColor = function (color) {
    return {value: color}
};

let backgroundColor = setColor('Red');
console.log(backgroundColor.value); // "Red"Code language: JavaScript (javascript)

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

如果您使用以下语法从箭头函数返回对象字面量，您将收到错误。

p => {object:literal}Code language: PHP (php)

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

let setColor = color => {value: color };Code language: JavaScript (javascript)

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

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

let setColor = color => ({value: color });Code language: JavaScript (javascript)

箭头函数与普通函数

箭头函数和普通函数之间有两个主要区别。

  1. 首先，在箭头函数中，this、arguments、super、new.target 是词法作用域的。这意味着箭头函数使用来自封闭词法作用域的这些变量（或结构）。
  2. 其次，箭头函数不能用作函数构造函数。如果您使用 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);Code language: JavaScript (javascript)

在 setTimeout() 函数的匿名函数内部，this.speed 为 undefined。原因是 匿名函数 的 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;Code language: JavaScript (javascript)

与匿名函数不同，箭头函数捕获封闭上下文的 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;
Code language: JavaScript (javascript)

JavaScript 箭头函数和 arguments 对象

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

function show() {
    return x => x + arguments[0];
}

let display = show(10, 20);
let result = display(5);
console.log(result); // 15Code language: JavaScript (javascript)

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

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

JavaScript 箭头函数和 prototype 属性

当您使用 function 关键字定义 函数 时，该函数具有一个名为 prototype 的属性

function dump( message ) {
    console.log(message);
}
console.log(dump.hasOwnProperty('prototype')); // trueCode language: JavaScript (javascript)

但是，箭头函数没有 prototype 属性

let dump = message => console.log(message);
console.log(dump.hasOwnProperty('prototype')); // falseCode language: JavaScript (javascript)

建议将箭头函数用于 回调 和 闭包，因为箭头函数的语法更简洁。

总结

  • 使用 (...args) => expression; 定义箭头函数。
  • 使用 (...args) => { statements } 定义具有多个语句的箭头函数。
  • 箭头函数没有对 this 或 super 的绑定。
  • 箭头函数没有 arguments 对象、new.target 关键字和 prototype 属性。
本教程对您有帮助吗？
Returning Multiple Values from a Function
先前
从函数返回多个值
接下来
何时不应使用箭头函数
When You Should Not Use Arrow Functions