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>

  • 相关阅读:
    Python 函数与函数式编程
    Python 字符编码与转码
    Python 读写txt文件操作
    两阶段事务总结
    MPPDB集群高可用设计
    MPPDB中的各个组件
    IntelliJ IDEA2016学习小结
    mysql免安装版配置
    理想的智能机
    java对象的大小
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/13445510.html
Copyright © 2011-2022 走看看