本文概述
- 带参数的箭头函数
- 带有默认参数的箭头函数
- 带有Rest参数的箭头函数
- 无括号的箭头函数
- 箭头函数的优点
箭头函数是匿名函数(没有名称且未与标识符绑定的函数)。它们不返回任何值, 并且可以在不使用function关键字的情况下进行声明。箭头函数不能用作构造函数。箭头函数中的上下文是按词汇或静态方式定义的。它们在不同语言中也称为Lambda函数。
箭头函数不包含任何原型属性, 并且不能与new关键字一起使用。
定义箭头函数的语法
const functionName = (arg1, arg2, ?..) =>
{
//body of the function
}箭头函数或Lambda函数由三部分组成：
- 参数：任何函数都可以选择具有参数。
- 粗箭头符号/ lambda符号：这是箭头(=> )的符号。
- 语句：它表示函数的指令集。
在下面的示例中, 我们定义了三个函数, 分别显示函数表达式, 匿名函数和箭头函数。
// function expressionvar myfun1 = function show() {
console.log("It is a Function Expression");
}// Anonymous functionvar myfun2 = function () {
console.log("It is an Anonymous Function");
}//Arrow functionvar myfun3 = () =>
{
console.log("It is an Arrow Function");
};
myfun1();
myfun2();
myfun3();
输出如下
It is a Function Expression
It is an Anonymous Function
It is an Arrow Function句法变化
箭头函数有一些语法变化, 如下所示：
- 单个参数的可选括号
var num = x =>
{
console.log(x);
}
num(140);
输出如下
140- 单条语句的可选括号, 如果不需要任何参数, 则为空括号。
var show = () =>
console.log("Hello World");
show();
输出如下
Hello World带参数的箭头函数 如果需要使用箭头函数传递多个参数, 则必须在括号内传递它们。
例如
var show = (a, b, c) =>
{
console.log(a + " " + b + " " + c );
}
show(100, 200, 300);
输出如下
100 200 300带有默认参数的箭头函数 在ES6中, 如果没有传递给它的值或未定义, 则该函数允许使用默认值初始化参数。你可以在以下代码中看到相同的插图：
例如
var show = (a, b=200) =>
{
console.log(a + " " + b);
}
show(100);
在上述函数中, b的值默认设置为200。如果未显式传递b的值, 则该函数将始终将200视为b的值。
输出如下
100 200如果函数显式传递其值, 则参数” b” 的默认值将被覆盖。你可以在以下示例中看到它：
例如
var show = (a, b=200) =>
{
console.log(a + " " + b);
}
show(100, 500);
输出如下
100 500带有Rest参数的箭头函数 其余参数不限制你传递函数中值的数量, 但所有传递的值必须具有相同的类型。我们也可以说rest参数充当相同类型的多个参数的占位符。
为了声明rest参数, 参数名称应以具有三个句点(不超过三个或不小于三个)的扩展运算符为前缀。
在以下示例中, 你可以看到相同的插图：
var show = (a, ...args) =>
{
console.log(a + " " + args);
}
show(100, 200, 300, 400, 500, 600, 700, 800);
输出如下
100 200, 300, 400, 500, 600, 700, 800无括号的箭头函数 如果你要传递单个参数, 则括号是可选的。
例如
var show = x =>
{
console.log(x);
}
show("Hello World");
输出如下
Hello World箭头函数的优点 下图显示了使用箭头函数的一些优点：
1.减少代码大小：当我们使用箭头函数的语法时, 代码的大小会减少。通过使用箭头函数, 我们可以编写更少的代码。
2. return语句和函数括号对于单行函数是可选的：在ES5中, 我们需要在函数中定义return语句, 但是在ES6中, 我们不需要为单行函数定义return语句。对于单行函数, 函数括号也是可选的。
例如
在ES5中
function show(value){
return value/2;
}在ES6中
var show = value =http://www.srcmini.com/>
value/2;
console.log(show(100));
注意：如果未在单个语句上使用花括号, 则不需要使用return, 但是, 即使在单个语句上也使用花括号, 则必须使用return关键字。 你可以在以下示例中理解它：
没有返回关键字
var show = value =http://www.srcmini.com/>
{
value/2;
}
console.log(show(50));
输出如下
undefined带返回关键字
var show = value =http://www.srcmini.com/>
{
return value/2;
}
console.log(show(50));
输出如下
253.用词法绑定上下文：Arrow函数以词法或静态方式绑定上下文。与常规函数相比, 箭头函数的处理方式有所不同。在箭头函数中, 没有任何绑定。在常规函数中, 此关键字用于表示调用该函数的对象, 该对象可以是窗口, 按钮, 文档或其他任何东西。
但是对于箭头函数, 此关键字始终代表定义箭头函数的对象。
【ES6箭头函数介绍和用法示例】让我们尝试使用以下代码来理解它：
例如
考虑一个具有数字数组的类, 如果数字小于30, 则将其推入子队列。
在ES5中, 可以按以下步骤完成
this.num.forEach(function(num) {
if (num <
30)
this.child.push(num);
}.bind(this));
在ES6中, 可以通过使用箭头函数来完成
this.num.forEach((num) =>
{
if (num <
30)
this.child.push(num);
});
因此, 通过使用arrow函数, 我们不需要隐式绑定它, 因为它由arrow函数自动执行。
如我们所见, 箭头函数使函数的编写变得不那么复杂, 并且还减少了行数。
推荐阅读
- ES6类介绍和用法详解
- ES6 boolean介绍和用法示例
- ES6数组介绍和用法
- ES6数组解构详细用法解析
- ES6数组方法介绍和示例
- ES6动画介绍和用法示例
- ES5和ES6之间的详细比较
- Android-自定义进度条
- Hbuilder打包app