大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍了ES5中箭头函数是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联公司专业为企业提供昆山网站建设、昆山做网站、昆山网站设计、昆山网站制作等企业网站建设、网页设计与制作、昆山企业网站模板建站服务,十年昆山做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target
。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
//ES5 Versionvar getCurrentDate = function (){ return new Date();} //ES6 Versionconst getCurrentDate = () => new Date();
在本例中,ES5 版本中有function(){}
声明和return关键字,这两个关键字分别是创建函数和返回值所需要的。在箭头函数版本中,我们只需要()括号,不需要 return 语句,因为如果我们只有一个表达式或值需要返回,箭头函数就会有一个隐式的返回。
//ES5 Versionfunction greet(name) { return 'Hello ' + name + '!';} //ES6 Versionconst greet = (name) => `Hello ${name}`; const greet2 = name => `Hello ${name}`;
我们还可以在箭头函数中使用与函数表达式和函数声明相同的参数。如果我们在一个箭头函数中有一个参数,则可以省略括号。
const getArgs = () => argumentsconst getArgs2 = (...rest) => rest
箭头函数不能访问arguments对象。所以调用第一个getArgs函数会抛出一个错误。相反,我们可以使用rest参数来获得在箭头函数中传递的所有参数。
const data = { result: 0, nums: [1, 2, 3, 4, 5], computeResult() { // 这里的“this”指的是“data”对象 const addAll = () => { return this.nums.reduce((total, cur) => total + cur, 0) }; this.result = addAll(); }};
箭头函数没有自己的this值。它捕获词法作用域函数的this值,在此示例中,addAll函数将复制computeResult 方法中的this值,如果我们在全局作用域声明箭头函数,则this值为 window 对象。
感谢你能够认真阅读完这篇文章,希望小编分享的“ES5中箭头函数是什么”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!