es6等号箭头指的是什么

(function(){
"usestrict";
//usearrowfunctionshere
}());

幸运的是后面会有越来越多的浏览器支持ES6特性. 现在你完成了所有准备工作, 让我们继续深入它吧!

=>

param=>expression

新增的语法是作用在变量上, 可以在表达式中申明多个变量, 下面是箭头函数的使用模式:

//一个参数对应一个表达式
param=>expression;//例如x=>x+2;

//多个参数对应一个表达式
(param[,param])=>expression;//例如(x,y)=>(x+y);

//一个参数对应多个表示式
param=>{statements;}//例如x=>{x++;returnx;};

//多个参数对应多个表达式
([param][,param])=>{statements}//例如(x,y)=>{x++;y++;returnx*y;};

//表达式里没有参数
()=>expression;//例如varflag=(()=>2)();flag等于2
()=>{statements;}//例如varflag=(()=>{return1;})();flag就等于1

//传入一个表达式，返回一个对象
([param])=>({key:value});
//例如varfuc=(x)=>({key:x})
varobject=fuc(1);
alert(object);//{key:1}

//当前函数
varfunc=function(param){
returnparam.split("");
}
//利用箭头函数实现
varfunc=param=>param.split("");

从上面的例子中我们可以看出箭头函数的语法实际上是返回了一个新的函数, 这个函数有函数体和参数。

func("FelipeMoura");//returns["Felipe","Moura"]

(x=>x*2)(3);//6

这行代码产生了一个临时函数，这个函数有一个形参x，函数的返回值为x*2,之后系统会马上执行这个临时函数, 将3赋值给形参x.

((x,y)=>{
x=x*2;
returnx+y;
})(3,"A");//"6A"

varfunc=x=>{
returnx++;
};

我们列出了一些常见的问题：

console.log(arguments);//notdefined

typeof和instanceof函数也能正常检查临时函数:

funcinstanceofFunction;//true
typeoffunc;//function
func.constructor==Function;//true

把箭头函数放在括号内是无效的:

//有效的常规语法
(function(x,y){
x=x*2;
returnx+y;
}(3,"B"));
//无效的箭头函数语法
((x,y)=>{
x=x*2;
returnx+y;
}(3,"A"));
//但是可以这样写就是有效的了：
((x,y)=>{
x=x*2;returnx+y;
})(3,"A");//立即执行函数

尽管箭头函数会产生一个临时函数，但是这个临时函数不是一个构造函数:

varinstance=newfunc();//TypeError:funcisnotaconstructor

同样也没有原型对象:

func.prototype;//undefined

document.body.addEventListener('click',function(evt){
console.log(this);//theHTMLBodyElementitself
});

在构造函数里：

functionPerson(){
letfullName=null;
this.getName=function(){
returnfullName;
};
this.setName=function(name){
fullName=name;
returnthis;
};
}
letjon=newPerson();
jon.setName("JonDoe");
console.log(jon.getName());//"JonDoe"
//注：this关键字这里就不解释了，大家自己google,baidu吧。

在这个例子中，如果我们让Person.setName函数返回Person对象本身，我们就可以这样用：

jon.setName("JonDoe")
.getName();//"JonDoe"

在一个对象里:

letobj={
foo:"bar",
getIt:function(){
returnthis.foo;
}
};
console.log(obj.getIt());//"bar"

但是当执行流(比如使用了setTimeout)和作用域变了的时候，this也会变。

functionStudent(data){
this.name=data.name||"JonDoe";
this.age=data.age>=0?data.age:-1;
this.getInfo=function(){
returnthis.name+","+this.age;
};
this.sayHi=function(){
window.setTimeout(function(){
console.log(this);
},100);
}
}

letmary=newStudent({
name:"MaryLou",
age:13
});
console.log(mary.getInfo());//"MaryLou,13"
mary.sayHi();
//window

当setTimeout函数改变了执行流的情况时，this的指向会变成全局对象,或者是在严格模式下就是undefine,这样在setTimeout函数里面我们使用其他的变量去指向this对象，比如self，that,当然不管你用什么变量，你首先应该在setTimeout访问之前，给self，that赋值，或者使用bind方法不然这些变量就是undefined。

functionStudent(data){
this.name=data.name||"JonDoe";
this.age=data.age>=0?data.age:-1;
this.getInfo=function(){
returnthis.name+","+this.age;
};
this.sayHi=function(){
window.setTimeout(()=>{
//theonlydifferenceishere
console.log(this);
},100);
}
}

letmary=newStudent({
name:"MaryLou",
age:13
});
console.log(mary.getInfo());//"MaryLou,13"
mary.sayHi();
//Object{name:"MaryLou",age:13,...}

vararr=['a','e','i','o','u'];
arr.forEach(vowel=>{
console.log(vowel);
});

//在Array.map里使用箭头函数，这里我就不分析函数执行过程了。。。。

vararr=['a','e','i','o','u'];
arr.map(vowel=>{
returnvowel.toUpperCase();
});
//["A","E","I","O","U"]

费布拉奇数列

varfactorial=(n)=>{
if(n==0){
return1;
}
return(n*factorial(n-1));
}
factorial(6);//720

我们也可以用在Array.sort方法里：

letarr=['a','e','i','o','u'];
arr.sort((a,b)=>a
也可以在事件监听函数里使用：

//EventObject,BodyElement
docume免费云主机、域名nt.body.addEventListener('click',event=>console.log(event,this));