ES6教程

ES6 箭头函数

ES6 箭头函数

箭头函数是在 ES6 中引入的,它为您提供一种更准确的方法来编写 JavaScript 中的函数。它们允许我们编写更小的函数语法。箭头函数使您的代码更具可读性和结构化。
箭头函数是匿名函数(没有名称且未绑定标识符的函数)。它们不返回任何值并且可以在没有 function 关键字的情况下进行声明。箭头函数不能用作构造函数。箭头函数内的上下文是词法或静态定义的。它们在不同语言中也称为Lambda 函数。
箭头函数不包含任何原型属性,并且不能与 new 关键字一起使用。
定义箭头函数的语法
const functionName = (arg1, arg2, ?..) => {
    //body of the function
}
箭头函数或 Lambda 函数由三部分组成:
参数: 任何函数都可以选择有参数。 粗箭头表示法/lambda 表示法: 这是箭头(=>) 的表示法。 语句: 表示函数的指令集。
让我们试着用一个例子来理解它。
在下面的例子中,我们定义了三个函数,分别显示函数表达式、匿名函数和箭头函数。
// function expression
var myfun1 = function show() {
 console.log("It is a Function Expression");   
}
// Anonymous function
var myfun2 = function () {
    console.log("It is an Anonymous Function");   
   }
   
//Arrow function
var 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

Syntactic Variations

箭头函数有一些语法变化,如下所示:
单个参数的可选括号
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 参数充当相同类型的多个参数的占位符。
为了声明 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 语句和Functional 大括号对于单行函数是可选的: 在ES5 中,我们需要在函数中定义return 语句,但在ES6 中,我们不需要为单行函数定义return 语句。函数大括号对于单行函数也是可选的。
例如
在 ES5 中
function show(value){
return value/2;
}
在 ES6 中
var show = value => value/2;
console.log(show(100));
注意: 如果你不是在单条语句上使用大括号,那么你不需要使用return,但是如果你甚至在单条语句上使用大括号,那么你必须使用 return 关键字。
你可以在下面的例子中理解:
没有 Return Keyword
var show = value => {
    value/2;
}
console.log(show(50));
输出
undefined
带返回关键字
var show = value => {
   return value/2;
}
console.log(show(50));
输出
25
3.词法绑定上下文: 箭头函数词法或静态绑定上下文。与常规函数相比,箭头函数中 this 的处理是不同的。在箭头函数中,没有任何this绑定。在常规函数中,this关键字用于表示调用该函数的对象,可以是一个窗口、按钮、文档或任何东西。
但是对于箭头函数,这个关键字总是代表定义箭头函数的对象。
让我们试着用下面的一段代码来理解它:
例如
考虑一个类有一个数字数组,如果数字小于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); 
});
所以,通过使用箭头函数,我们不需要隐式绑定它,因为它是由箭头函数自动执行的。
正如我们所见,箭头函数使得函数的编写更少复杂,同时也减少了行数。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4