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';)//在这个箭头函数外再写一个（）这样就可以避免这种错误了
2271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
