JavaScript箭头函数与普通函数的区别示例详解

let arr=['昨天','今天','明天']
let newarr=arr.map(function(item){
  return item+='放假'
})
console.log(newarr);

let newarr1=arr.map((item)=>{return item += '放假'})
let newarr2=arr.map(item =>  item += '放假')

<button class="pt">普通函数</button>
<p class="ptP"></p>
<button class="jt">箭头函数</button>
<p class="jtP"></p>
<script>
const pt=document.querySelector('.pt')
const ptP=document.querySelector('.ptP')
const jt=document.querySelector('.jt')
const jtP=document.querySelector('.jtP')
let ptFunction=function(){
  ptP.innerHTML='普通函数：'+this
}
let jtFunction=()=>{
  jtP.innerHTML='箭头函数：'+this
}
pt.addEventListener('click',ptFunction,false)
jt.addEventListener('click',jtFunction,false)
</script>

const arr=document.querySelector('.arr')//p标签
let calendar={
  name:'2022-10-',
  lately:['10-25','10-26','10-27'],
  add:function(){
    this.lately.map(function(item){
      arr.innerHTML+=this.name+item+'<br>'
    })
  }
} 
calendar.add()

add:function(){
    this.lately.map(function(item){
        arr.innerHTML+=this.name+item+'<br>'
    }.bind(this))
}
calendar.add()

add:function(){
    this.lately.map(item => arr.innerHTML+=this.name+item+'<br>')
}