JS箭头函数的语法是什么及怎么使用

//functiondeclaration
functionsayHiStranger(){
return'Hi,stranger!'
}

//callthefunction
sayHiStranger()

constsayHiStranger=function(){
return'Hi,stranger!'
}

constsayHiStranger=()=>'Hi,stranger'

constgetNetflixSeries=(seriesName,releaseDate)=>`The${seriesName}serieswasreleasedin${releaseDate}`//callthefunctionconsole.log(getNetflixSeries('Bridgerton','2020'))//output:TheBridgertonserieswasreleasedin2020复制代码

constfavoriteSeries=seriesName=>seriesName==="Bridgerton"?"Let'swatchit":"Let'sgoout"//callthefunctionconsole.log(favoriteSeries("Bridgerton"))//output:"Let'swatchit"复制代码

//withparentheses:correctconstbestNetflixSeries=(seriesName="Bridgerton")=>`${seriesName}isthebest`//outputs:"Bridgertonisthebest"console.log(bestNetflixSeries())//noparentheses:errorconstbestNetflixSeries=seriesName="Bridgerton"=>`${seriesName}isthebest`//UncaughtSyntaxError:invalidarrow-functionarguments(parenthesesaroundthearrow-functionmayhelp)复制代码

//usingtheJSsort()functiontosortthetitlesindescendingorder//accordingtothenumberoflikes(morelikesatthetop,feweratthebottomconstorderByLikes=netflixSeries.sort((a,b)=>b.likes-a.likes)//callthefunction//output:thetitlesandthen.oflikesindescendingorderconsole.log(orderByLikes)复制代码

constgreeter=greeting=>name=>`${greeting},${name}!`

functiongreeter(greeting){returnfunction(name){return`${greeting},${name}!`
}
}

constmyGreet=greeter('Goodmorning')console.log(myGreet('Mary'))

//output:"Goodmorning,Mary!"

constseriesList=netflixSeries.map(series=>{constcontainer={}
container.title=series.name
container.summary=series.summary

//explicitreturn
returncontainer
})

.map()函数中的箭头函数在一系列的语句中展开，在语句的最后返回一个对象。这使得在函数主体周围使用大括号是不可避免的。

//UncaughtSyntaxError:unexpectedtoken:':'constseriesList=netflixSeries.map(series=>{title:series.name});//WorksfineconstseriesList=netflixSeries.map(series=>({title:series.name}));复制代码

constanonymous=function(){return'Youcan'tidentifyme!'}

constanonymousArrowFunc=()=>'Youcan'tidentifyme!'

console.log(anonymousArrowFunc.name)//output:"anonymousArrowFunc"

letcounter=5letcountDown=setInterval(()=>{console.log(counter)
counter--if(counter===0){console.log("Ihavenoname!!")clearInterval(countDown)
}
},1000)

StartCounter

...conststartBtn=document.querySelector(".start-btn");

startBtn.addEventListener('click',function(){this.classList.add('counting')letcounter=5;consttimer=setInterval(()=>{this.textContent=counter
counter--
if(counter

startBtn.addEventListener('click',function(){console.log(this)
...
})

startBtn.addEventListener('click',()=>{console.log(this)
...
})

//changebutton'sborder'sappearancethis.classList.add('counting')

consttimer=setInterval(function(){console.log(this)
...
},1000)

constthat=thisconsttimer=setInterval(function(){console.log(that)
...
},1000)

consttimer=setInterval(function(){console.log(this)
...
}.bind(this),1000)

consttimer=setInterval(()=>{
console.log(this)
...
},1000)

consttimer=setInterval(()=>{
console.log(this)//thebutton'stextdisplaysthetimervalue
this.textContent=counter
},1000)

constnetflixSeries={title:'AfterLife',
firstRealease:2019,likes:5,getLikes:()=>`${this.title}has${this.likes}likes`,addLike:()=>{
this.likes++return`Thankyouforliking${this.title},whichnowhas${this.likes}likes`
}
}

constnetflixSeries={title:'AfterLife',
firstRealease:2019,likes:5,getLikes(){return`${this.title}has${this.likes}likes`
},addLike(){
this.likes++return`Thankyouforliking${this.title},whichnowhas${this.likes}likes`
}
}//callthemethodsconsole.log(netflixSeries.getLikes())console.log(netflixSeries.addLike())//output:AfterLifehas5likesThankyouforlikingAfterLife,whichnowhas6likes复制代码

$('body').on('click',function(){console.log(this)
})//

$('body').on('click',()=>{console.log(this)
})//Window

newVue(免费云主机域名{el:app,data:{message:'Hello,World!'
},created:function(){console.log(this.message);
}
})//Hello,World!

newVue({el:app,data:{message:'Hello,World!'
},created:()=>{console.log(this.message);
}
})//undefined

constlistYourFavNetflixSeries=()=>{//weneedtoturntheargumentsintoarealarray
//sowecanuse.map()
constfavSeries=Array.from(arguments)
returnfavSeries.map((series,i)=>{return`${series}ismy#${i+1}favoriteNetflixseries`
})console.log(arguments)
}console.log(listYourFavNetflixSeries('Bridgerton','Ozark','AfterLife'))

constlistYourFavNetflixSeries=function(){constfavSeries=Array.from(arguments)
returnfavSeries.map((series,i)=>{return`${series}ismy#${i+1}favoriteNetflixseries`
})console.log(arguments)
}console.log(listYourFavNetflixSeries('Bridgerton','Ozark','AfterLife'))//output:["Bridgertonismy#1favoriteNetflixseries","Ozarkismy#2favoriteNetflixseries","AfterLifeismy#3favoriteNetflixseries"]复制代码

constlistYourFavNetflixSeries=(...seriesList)=>{returnseriesList.map((series,i)=>{return`${series}ismy#${i+1}favoriteNetflixseries`
})
}