chuck
/
es6-11study


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数应用场景</title>
</head>
<body>
    <div style="width:200px;height:200px;background:green;" id="box"></div>
    <script>
        // 点击div 2s后变颜色
            let ad = document.getElementById("box");
            ad.addEventListener('click',function(){
                let that = this
                setTimeout(function(){
                    //this指window
                    that.style.background = 'pink'
                },2000)
                //箭头
                setTimeout(()=>{
                    this.style.background = 'pink'
                })
            })
        //从数组中返回偶数元素
            const arr = [1,2,4,5,3,344]
            const result = arr.filter(function(item){
                if(item % 2 === 0){
                    return true;
                }else{
                    return false;
                }
            })
            //箭头
            const result = arr.filter(item=>item%2 === 0)

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

    </script>
</body>
</html>