分享更有价值
被信任是一种快乐

es6等号箭头指的是什么

文章页正文上

本文小编为大家详细介绍“es6等号箭头指的是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“es6等号箭头指的是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 es6的等号箭头“=>”是指箭头函数,是一种函数的简写方式,语法为(参数)=>{函数体};”。箭头函数表达式的语法比函数表达式更简洁,没有this、super、arguments和new.target绑定,不能通过new关键字调用,不可以改变this的绑定。=>是箭头函数,是ES6标准中新增的一种新的函数。顾名思义,箭头函数是一种使用箭头(=>)定义函数的新语法,箭头函数表达式的语法比函数表达式更简洁,但是它与传统的JavaScript函数有些许不同,主要集中在以下方面:没有this、super、arguments和new.target绑定,其值由外围最近一层非箭头函数决定不能通过new关键字调用没有原型不可以改变this的绑定不支持arguments对象不支持重复的命名参数函数体内的this的指向始终是指向定义它所在的对象,而不会指向调用它的对象,我们知道es5中的函数是谁执行它,它就指向谁。你可以自己去学习和尝试下, 你可以简单的把示例程序代码复制到你的浏览器控制台下. 现在, 推荐使用Firefox(22+)开发者工具, Firefox(22+)开发者工具现在支持箭头函数,你也可以使用谷歌浏览器. 如果你使用谷歌浏览器, 你必须要做下列两件事:在谷歌浏览器中地址栏中输入:about:flags, 找到 “使用体验性JavaScript”选项,开启使用。在函数的开头加上use strict,然后再在你的谷歌浏览中测试箭头函数吧(提示:请用谷歌浏览器v38,我当时就是被浏览器版本坑了):

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

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

幸运的是后面会有越来越多的浏览器支持ES6特性. 现在你完成了所有准备工作, 让我们继续深入它吧!
最近大家在讨论关于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,函数的返回值为x*2,之后系统会马上执行这个临时函数, 将3赋值给形参x.
下面的例子描述了临时函数体里有多行代码的情况:

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

思考下面的函数:

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

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

我们列出了一些常见的问题:
箭头函数创建的临时函数的arguments它不会被置:

console.log(arguments);//notdefined

typeofinstanceof函数也能正常检查临时函数:

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

typeofinstanceof函数也能正常检查临时函数:
把箭头函数放在括号内是无效的:
尽管箭头函数会产生一个临时函数,但是这个临时函数不是一个构造函数:
同样也没有原型对象:
这个箭头函数的作用域和其他函数有一些不同,如果不是严格模式,this关键字就是指向window,严格模式就是undefined,在构造函数里的this指向的是当前对象实例,如果this在一个对象的函数内则this指向的是这个对象,this有可能指向的是一个DOM元素,例如当我们添加事件监听函数时,可能这个this的指向不是很直接,其实this(不止是this变量)变量的指向是根据一个规则来判断的:作用域流。下面我将演示this在事件监听函数和在对象函数内出现的情况:在事件监听函数中:

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。

在构造函数里:
在这个例子中,如果我们让Person.setName函数返回Person对象本身,我们就可以这样用:
在一个对象里:
但是当执行流(比如使用了setTimeout)和作用域变了的时候,this也会变。
当setTimeout函数改变了执行流的情况时,this的指向会变成全局对象,或者是在严格模式下就是undefine,这样在setTimeout函数里面我们使用其他的变量去指向this对象,比如self,that,当然不管你用什么变量,你首先应该在setTimeout访问之前,给self,that赋值,或者使用bind方法不然这些变量就是undefined。
这是后就是箭头函数登场的时候了,它可以保持作用域,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(()=>{
//theonlydifferenceishere
console.log(this);
},100);
}
}

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

分析:在sayHi函数中,我们使用了箭头函数,当前作用域是在student对象的一个方法中,箭头函数生成的临时函数的作用域也就是student对象的sayHi函数的作用域。所以即使我们在setTimeout调用了箭头函数生成的临时函数,这个临时函数中的this也是正确的指向。创建一个函数很容易,我们可以利用它可以保持作用域的特征:例如我们可以这么使用:Array.forEach()

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

分析:在forEach里箭头函数会创建并返回一个临时函数 tempFun,这个tempFun你可以想象成这样的:function(vowel){ console.log(vowel);}但是Array.forEach函数会怎么去处理传入的tempFunc呢?在forEach函数里会这样调用它:tempFunc.call(this,value);所有我们看到函数的正确执行效果。

//在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));

费布拉奇数列
我们也可以用在Array.sort方法里:
也可以在事件监听函数里使用:
读到这里,这篇“es6等号箭头指的是什么”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注云技术行业资讯频道。

相关推荐: JS正则表达式的使用方法是什么

本篇内容主要讲解“JS正则表达式的使用方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS正则表达式的使用方法是什么”吧! 测试字符串是否合规这种特性常被用来检测前端输入的字段是否符合要求,常见的场景是注册…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册