JavaScript箭头函数

箭头函数（arrow functions），是一个来自ECMAScript 2015（又称ES6）的全新特性。箭头函数有时候也叫“lambda表达式”。箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

箭头函数 - JavaScript | MDN

JavaScript传统函数，基本语法是这样的：

function functionName(arg0, arg1, ... argN) {

statements

}

函数如果有返回值，使用 return 运算符后跟要返回的值即可。函数在执行过 return 语句后立即停止代码。

例如：

function add(a,b)

{

return a + b;

}

//调用add()

alert(add(1,2)); // 结果 3

JavaScript匿名函数：

我们也可以通过指派一个变量名给匿名函数的方式来定义它。

var|let add = function(a,b)

{

return a + b;

}

//调用add()

alert(add(1,2)); // 结果 3

这个代码和前一个例子做了同样的事情。

用JavaScript箭头函数实现上例相同的功能

Var|let add = (a,b) => a+b

//调用

alert(add(1,2)); // 结果 3

JavaScript箭头函数语法

(param1, param2, …, paramN) => { statements }

有多个参数时，参数间逗号间隔，函数体含有多条语句需要用到大括号，函数体含有一条语句，大括号不是必须的,不用{}，return关键字也跟着不用。

(param1, param2, …, paramN) => expression

后者相当于：(param1, param2, …, paramN) =>{ return expression; }

当只有一个参数时，圆括号是可选的：

(singleParam) => { statements } 也可写为：

singleParam => { statements }

没有参数的函数应该写成一对圆括号。

() => { statements }

为什么会这样？因为如果不加 () ，那{ } 就表示的是语法块，不是表示一个对象，而加上()，按照规范来说，() 里面 { } 就会被解析为对象了。

加括号的函数体返回对象字面量表达式：

params => ({foo: bar})

箭头函数的确与传统函数有不同之处：

1、箭头函数没有自己的this。箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值。

2、箭头函数 this 不可变。call()、apply()、bind()、这些方法也无法改变箭头函数 this 的指向。

3、箭头函数不能用 new 关键字来实例化对象，不然会报错。

4、箭头函数没有arguments对象。

但与传统函数仍存在共同的特点，例如：

1.对箭头函数进行typeof操作会返回“function”。

2.箭头函数仍是Function的实例，故而instanceof的执行方式与传统函数一致。

3箭头函数支持普通函数参数的所有功能，包括默认值、解构、rest 参数等。

箭头函数的例

var demo = (a,b) =>{

if(a>b){

return a-b;

} else{

return b-a;

}

相当于：

var demo = function（a,b）{

if(a>b){

return a-b;

} else{

return b-a;

}

写箭头函数要点，按顺序写参数、箭头、函数体

参数在 () 内，没有参数，() 必须写；一个参数，() 可写可不写；多个参数，() 必须写。如果不确定，() {} 写不写，该不该省略，那就写，写了不会错。

1、只有一个参数时，() 可省略

//不简写

var demo = (x) =>{

console.log(x**2); //幂运算符**

}

//简写

var demo = x =>{

console.log(x**2);

}

2、函数体只有一句时， {} 可以省略

//不简写

var demo = (x) =>{

console.log(x**2);

}

//简写

var demo = x => console.log(x**2); *

3、函数体只有一条返回语句时，{} 和 return 都可以省略

//不简写

var demo = (x) => {

return x**2; //幂运算符**;

}

//简写

var demo = (x) => x**2; //幂运算符**

注意，别写成这样 var demo = (x) =>{ x**2 };

或者这样 var demo = (x) => return x**2;

即要省略就都省略，不省略就都不省，别省一半，不然会出错的。

箭头函数的确与传统函数有不同之处,可见https://segmentfault.com/a/1190000012067545

另外，箭头函数，一般完成简短的功能，不太适合需要较多行才能完成的功能.

附录

JavaScript函数JavaScript函数_cnds123的专栏-CSDN博客

JavaScrip的函数知识点总结JavaScrip的函数知识点总结_cnds123的专栏-CSDN博客

JavaScript箭头函数相关推荐

JavaScript 箭头函数
文章目录箭头函数语法示例 1:无参数的箭头函数示例 2:带一个参数的箭头函数示例 3:作为表达式的箭头函数示例 4:多行箭头函数 this 与箭头函数在常规函数中在箭头函数中参数绑定 ...
JavaScript箭头函数中的this
JavaScript箭头函数中的this详解箭头函数极大地简化了this的取值规则. 普通函数与箭头函数普通函数指的是用function定义的函数: var hello = function () ...
JavaScript箭头函数（Arrow Function）
2019独角兽企业重金招聘Python工程师标准>>> ES6标准新增了一种新的函数:Arrow Function(箭头函数). 更简洁的语法我们先来按常规语法定义函数: func ...
javascript箭头函数和this的指向问题
箭头函数下面两代码等价: const fun1 = function(x){return x*x;}const fun = x => x*x; function换成=>,放在参数和函数体 ...
深入理解JavaScript箭头函数
箭头函数就是个简写形式的函数表达式,并且它拥有词法作用域的this值(即不会新产生自己作用域下的this,arguments,super和new.target等对象).此外,箭头函数总是匿名的. 语法 ...
JavaScript—箭头函数
箭头函数表达式的语法比函数表达式短,并且不绑定自己的 this,arguments,super或 new.target.此外,箭头函数总是匿名的.这些函数表达式最适合非方法函数,它们不能用作构造函数. ...
JavaScript箭头函数（Lambda表达式）
箭头函数也叫lambda表达式据说其主要意图是定义轻量级的内联回调函数栗有: 1 var arr = ["wei","ze","yang" ...
JavaScript 学习-8.JavaScript 箭头函数的使用
前言 ES6 中引入了箭头函数() =>.箭头函数不需要使用function关键字,允许我们编写更短的函数. 箭头函数之前使用function 定义函数 fun1 = function() { ...
JavaScript箭头函数的使用和this指向
01-箭头函数的基本使用普通定义函数的方式:function const aaa = function() {} // es6箭头函数 const aaa = () => {} 对象字面量定义 ...

JavaScript箭头函数

JavaScript箭头函数

JavaScript箭头函数相关推荐

最新文章

热门文章