箭头函数的实践于应用场景

需求-1 点击 div 2s后颜色变成[粉色]
从数组中返回偶数的元素

需求-1 点击 div 2s后颜色变成[粉色]

html

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>

绑定事件

javascript 复制代码

       ad.addEventListener("click",function(){
            //定时器
            setTimeout(function(){
                //修改背景颜色
                this.style.background='pink';
            },2000);
       });

原因分析：this指向window,而window身上并没有style属性

解决方法：让this指向ad元素

保存外层作用域的this

javascript 复制代码

       ad.addEventListener("click",function(){
            //保存外层作用域的this
            let _this=this;//this指向ad
            //定时器
            setTimeout(function(){
                //修改背景颜色,內层找不到_this会往外层寻找
                _this.style.background='pink'; 
            },2000);
       });

使用箭头函数；指向声明时候的this对象就是ad

javascript 复制代码

           //绑定事件
       ad.addEventListener("click",function(){
            //定时器
            setTimeout(()=>{
                //修改背景颜色,內层找不到_this会往外层寻找
                this.style.background='pink'; 
            },2000);
       });

需求-2 从数组中返回偶数的元素

onst arr=[1,6,9,10,100,25];

利用数组filter函数处理。

javascript 复制代码

       const result=arr.filter(function(item){
            if(item %2===0){
                return true;
            }
            else{
                return false;
            }
       });

改成箭头函数

javascript 复制代码

    const result=arr.filter(item=>{
            if(item %2===0){
                return true;
            }
            else{
                return false;
            }
       });

简化

javascript 复制代码

const result=arr.filter(item=>item % 2===0);

总结

箭头函数适合与this无关的回调，定时器，数组的方法回调
箭头函数不适合与this有关的回调，时间回调，对象的方法