卡卡网

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

箭头函数有多参数、单参数和无参数几种写法，本文将通过具体实例演示箭头函数的无参数、单参数、多参数用法。

无参数的箭头函数

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

() => {  }

例如：

logTest = () => { console.log("OK"); }
logTest();

输出：

OK

该箭头函数等同于传统函数：

function logTest(){
    console.log("OK");
}

该箭头函数体可以去掉大括号，直接写成这样：

logTest = () => console.log("OK");

单参数的箭头函数

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

(para) => { }

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

para => { }

下面的示例使用箭头函数将map()字符串数组转换为字符串长度数组。

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

console.log(lengths);

输出：

[ 4, 3, 5 ]

多参数的箭头函数

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

(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]

对比上面两个传统函数和箭头函数，可以清楚的看到，如下传统函数：

function(a,b){
     return b - a;
}

等同于如下箭头函数：

(a,b) => b - a

这正是多参数箭头函数的语法特征。

更多箭头函数实例介绍

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

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

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运算符返回指示箭头函数的function类型。

console.log(typeof add);

输出：

function

总结

本文通过多个具体实例，演示了无参数、单参数、多参数的箭头函数用法，可以概况为：

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

相关文章

• 实例详解JS箭头函数=>与传统匿名函数处理this的不同方法

标签: 箭头函数