zoukankan      html  css  js  c++  java
  • 箭头函数的应用

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .ad{
    200px;
    height: 200px;
    background-color: blue;
    }
    </style>
    </head>
    <body>
    <div class="ad"></div>
    <!-- <script>
    // 要求点击div 2s后变成 粉色
    let ad = document.getElementsByClassName('ad')[0];
    ad.addEventListener('click',function(){
    // 保存this的值
    let this1 = this;
    // 定时器
    setTimeout(function(){
    // this代表的是window
    console.log(this);
    // this1代表的是<div class="ad"></div>
    console.log(this1);
    this1.style.backgroundColor='pink';
    },2000);
    })
    </script> -->

    <script>
    // 要求点击div 2s后变成 粉色
    let ad = document.getElementsByClassName('ad')[0];
    ad.addEventListener('click',function(){
    // 定时器
    setTimeout(()=>{
    this.style.backgroundColor='pink';
    },2000);
    })
    </script>


    <!-- 从数组中返回偶数的元素 -->
    <!-- 方法一 -->
    <!-- <script>
    const arr = [1,6,9,10,100,25];
    const result = arr.filter(function(item){
    if(item%2==0){
    return true;
    }else{
    return false;
    }
    });
    console.log(result);
    </script> -->
    <!-- 方法二 -->
    <!-- <script>
    const arr = [1,6,9,10,100,25];
    const result = arr.filter(item=>{
    if(item%2==0){
    return true;
    }else{
    return false;
    }
    });
    console.log(result);
    </script> -->

    <!-- 方法三-->
    <!-- <script>
    const arr = [1,6,9,10,100,25];
    const result = arr.filter(item=>item%2===0);
    console.log(result);
    </script> -->
    <!-- 箭头函数适合于this无关的回调 , 定时器 数组的方法回调 -->
    <!-- 箭头函数不适合于this有关的回调 事件回调 对象的方法 -->
    </body>
    </html>

  • 相关阅读:
    冲刺(9)
    冲刺(8)
    冲刺(7)
    C#的post请求 捕获错误代码的内容
    [转载]Memory Limits for 32-bit and 64-bit processes
    IIS 503
    识别chrome浏览器
    时间同步
    修改Visual Studio启动画面授权信息
    Temporary ASP.NET Files权限问题
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/13445510.html
Copyright © 2011-2022 走看看