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>

  • 相关阅读:
    软件工程第一次结对作业
    软件工程第二次作业
    vue之vuex
    ceshi
    第3次 结构与部分
    第二次作业
    获得领跑衫感言
    期末总结
    第十四,十五周作业
    第七周作业
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/13445510.html
Copyright © 2011-2022 走看看