ES6箭头函数介绍和用法示例 _ES6函数

本文概述

带参数的箭头函数
带有默认参数的箭头函数
带有Rest参数的箭头函数
无括号的箭头函数
箭头函数的优点

ES6中引入了Arrow函数, 它为你提供了一种更准确的JavaScript编写方法。它们使我们能够编写较小的函数语法。箭头函数使你的代码更具可读性和结构性。
箭头函数是匿名函数(没有名称且未与标识符绑定的函数)。它们不返回任何值, 并且可以在不使用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));

输出如下

25

3.用词法绑定上下文：Arrow函数以词法或静态方式绑定上下文。与常规函数相比, 箭头函数的处理方式有所不同。在箭头函数中, 没有任何绑定。在常规函数中, 此关键字用于表示调用该函数的对象, 该对象可以是窗口, 按钮, 文档或其他任何东西。
但是对于箭头函数, 此关键字始终代表定义箭头函数的对象。
【ES6箭头函数介绍和用法示例】让我们尝试使用以下代码来理解它：
例如
考虑一个具有数字数组的类, 如果数字小于30, 则将其推入子队列。
在ES5中, 可以按以下步骤完成