1、箭头函数简介
- 用 => 来标识
- 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。
2、通常函数的定义方法
var fn1 = function(a, b){
console.log(a + b);
};
fn1(1, 2); // 3
function fn2(a, b){
console.log(a - b);
}
fn2(2, 1);//1
3、简写写法
对应上面两个
//删掉了function
var fn11 = (a, b)=>{
console.log(a+b);
};
fn11(1, 2); // 3
//删掉了function和函数名,无意义
(a,b)=>{
console.log(a-b)
}
4、基础语法
附加规则
- 当函数参数只有一个时,可省略小括号,但没有时,不能省略。
- 函数体(中括号)中有且只有一行return语句时,中括号和return关键字可以省略。
- 函数返回json对象,且只有一行return语句时,返回的简写要加小括号;如let add = a =>({"a":2})
(参数1, 参数2, …, 参数N) => { 函数声明 }
//相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }
(参数1, 参数2, …, 参数N) => 表达式(单一)
// 当只有一个参数时,圆括号是可选的:
(单一参数) => {函数声明}
单一参数 => {函数声明}
// 没有参数的函数应该写成一对圆括号。
() => {函数声明}
var add = function(a,b){
return a+b;
};
// 即:
var add = (a,b)=>{
return a+b
};
// 即:
var add = (a,b)=>a+b;
---------------------------------------------------------------------------------------
var ret = function(a){
return a+1;
};
// 即:
var ret = a=>a+1;
---------------------------------------------------------------------------------------
var non = function(){
return 2+1;
};
// 即
var non = ()=>2+1;
函数体代码多于一行
let fun1 = function(){
console.log('1');
console.log('2');
return 1+2;
}
fun1();
// 简写为
let fun2 = ()=>{
console.log('1');
console.log('2');
return 1+2
}
fun2();
函数返回json对象时
let f1 = function(){
return {"a":2};
}
let f2 = ()=>{"a":2} // 错误
let f2 = ()=>({"a":2})
如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错:
x => { foo: x }
因为和函数体的{ ... }有语法冲突,所以要改为:
// ok:
x => ({ foo: x })
实例
let arr1 = [9,6,1,7];
let arr11 = arr1.sort(
function(a,b){
return a-b;
}
)
console.log(arr11);
let arr3= [2,3,9,5];
let arr33 = arr3.sort((a,b)=>a-b)
console.log(arr33)
5、总结
- 箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。
- 箭头函数写代码拥有更加简洁的语法。
- 不会绑定this,或者说箭头函数中 不会改变this本来的绑定。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。