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