Java教程

JavaScript的箭头函数（lambda表达式）

本文主要是介绍JavaScript的箭头函数（lambda表达式），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaScript的箭头函数（lambda表达式）

Sshm_666

于 2021-11-22 18:31:54 发布

680
收藏
文章标签： javascript 前端
版权
JavaScript的箭头函数相当于其他语言的lambda表达式，是普通函数简化的写法，箭头函数的格式如下：

（参数1，参数2，参数3...）=>{statements}

lambda表达式就是匿名函数

闭包：就是能够访问局部变量的局部函数。

map：对原数组里的每个元素按照map（function（）{}）里的函数逻辑进行处理后，有返回值，形成新数组。

ForEach:对原数组里每个元素按照ForEach(function(){})里的函数进行处理，没有返回值

看如下代码时如何实现箭头函数的：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<script>
var arr = ["jack", "csc", "csaz", 1, 67];
//以map参考箭头函数
var newArr = arr.map(function(ele) {
return ele.length
})
var newArr1 = arr.map((ele) => ele.length) //箭头函数去掉function和return,箭头函数的执行体只能是一条去掉return
var newArr2 = arr.map(ele => ele.length) //箭头函数去掉function和return和小括号
console.log(newArr);
console.log(newArr1);
console.log(newArr2);
//以ForEach参考箭头函数
arr.forEach(function(ele) {
console.log(ele);
})
arr.forEach((ele) => console.log(ele))
arr.forEach(ele => console.log(ele))
</script>
</body>

</html>
运行结果发现他们执行后结果是一样的：

 

注意：

1.省略大括号{}时执行语句只有一个是才可以省略

2.省略小括号（）时括号内参数只有一个的时候才可以省略，没参数或参数大于一个的时候都不行

例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<script>
var test = () => {
console.log("执行箭头函数")
console.log("执行结束")
}
test()
</script>
</body>

</html>


注意2：

1.箭头函数不拥有自己的this关键字，普通函数通过new调用函数创建对象，那该函数的this代表所创建的对象，如果直接调用普通函数，那this代表全局对象window

例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<script>
var age = 0;//window的age

function Person() {
this.age = 0; //person对象的age
setInterval(function() { //计时器
console.log(this === window);
this.age++; //普通方法里拥有自己的this，这个this是window的
}, 1000)
}
var p = new Person();
setInterval(function() {
console.log(age);//打印window的age
console.log(p.age);//打印对象p的age
}, 1000);
</script>
</body>

</html>
结果：

我们发现普通函数写在函数体里的this有它自己的this，是window的

那我们看箭头函数的

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<script>
var age = 0;

function Person() {
this.age = 0;
setInterval(() => {
console.log(this === window);
this.age++;
}, 1000)
}
var p = new Person();
setInterval(function() {
console.log(age);
console.log(p.age);
}, 1000);
</script>
</body>

</html>
结果：

箭头函数里箭头函数age++是给p对象加的，我们就清楚箭头函数的this是这个对象的不会是window的

2、箭头函数并不绑定arguments,箭头函数中的arguments总是引用上下文中的arguments

例：

在普通函数里，它会绑定它本方法里的arguments如下代码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<script>
function foo() {
var f = function(i) {
return 'Hello,' + arguments[i]
}
return f(2, 3, "sdg");
}
console.log(foo("sdf", "sdg", "gs"));
</script>
</body>

</html>
这个代码的也可以写成这样，就比较好理解

 

结果：

而箭头函数不绑定arguments用的是上下文的，我们看代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<script>
function foo() {
var f = (i) => {
return 'Hello,' + arguments[i] //此处额arguments指的是foo函数里的实参列表

}
return f(2, 3, "sdg");
}
console.log(foo("sdf", "sdg", "gs"));
</script>
</body>

</html>
结果：

3.函数返回对象错误

例：

var f=()=>{name:'qwe'}

console.log(f())

上面的写法和普通函数写法输出是一致的，都是undefined，如果想要输出一个object对象，就要在花括号外再添一个小括号。

var f=()=>({name:'qwe'})

console.log(f())

结果：

4.箭头函数换行错误

箭头函数不允许在形参列表和箭头之间包含换行，否则会提示语法错误

var f=()

=>"qwe"//报错

但是允许在箭头和函数执行体之间换行。

5.解析顺序导致错误

虽然箭头函数所包含的箭头不是运算符，但是当箭头函数和其他运算符在一起是，可能会由于解析顺序导致错误，

例：

var f;

f = f || () => 'qwe';

程序员想先运行后面的箭头函数再出来||运算符，但系统并没有这样处理，于是就发生错误

var f;

f = f || （() => 'qwe';)//在这个箭头函数外再写一个（）这样就可以避免这种错误了
————————————————
版权声明：本文为CSDN博主「Sshm_666」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m566666/article/details/121475207

这篇关于JavaScript的箭头函数（lambda表达式）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航