箭头函数的实践于应用场景
- 需求-1 点击 div 2s后颜色变成[粉色]
- 从数组中返回偶数的元素
需求-1 点击 div 2s后颜色变成[粉色]
- html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>箭头函数实践</title><style>div{width: 200px;height: 200px;background-color: aqua;}</style>
</head>
<body><div id="ad"></div>
</body>
</html>
- 绑定事件
ad.addEventListener("click",function(){//定时器setTimeout(function(){//修改背景颜色this.style.background='pink';},2000);});
原因分析：this指向window,而window身上并没有style属性
解决方法：让this指向ad元素
- 保存外层作用域的this
ad.addEventListener("click",function(){//保存外层作用域的thislet _this=this;//this指向ad//定时器setTimeout(function(){//修改背景颜色,內层找不到_this会往外层寻找_this.style.background='pink'; },2000);});
使用箭头函数；指向声明时候的this对象就是ad
//绑定事件ad.addEventListener("click",function(){//定时器setTimeout(()=>{//修改背景颜色,內层找不到_this会往外层寻找this.style.background='pink'; },2000);});
需求-2 从数组中返回偶数的元素
onst arr=[1,6,9,10,100,25];
- 利用数组filter函数处理。
const result=arr.filter(function(item){if(item %2===0){return true;}else{return false;}});
- 改成箭头函数
const result=arr.filter(item=>{if(item %2===0){return true;}else{return false;}});
- 简化
const result=arr.filter(item=>item % 2===0);
总结
- 箭头函数适合与this无关的回调，定时器，数组的方法回调
- 箭头函数不适合与this有关的回调，时间回调，对象的方法
