首页 > 编程语言> 文章详细

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

2022-06-17 10:36:06 阅读：168 来源： 互联网

标签：console log age JavaScript 箭头 var 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的

那我们看箭头函数的

箭头函数里箭头函数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

标签：console,log,age,JavaScript,箭头,var,lambda,函数
来源： https://www.cnblogs.com/effortandluck/p/16384790.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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