【ES】笔记-箭头函数的实践于应用场景

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

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

需求-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有关的回调,时间回调,对象的方法
相关推荐
骁的小小站3 小时前
Verilator 和 GTKwave联合仿真
开发语言·c++·经验分享·笔记·学习·fpga开发
kkkkk0211063 小时前
软考高级-系统架构设计师案例专题三:系统开发基础
笔记·系统架构
新子y7 小时前
【小白笔记】区分类方法/实例方法和静态函数/命名空间函数
笔记·分类
梁辰兴8 小时前
企业培训笔记:外卖平台后端--套餐管理模块--新建套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
degen_8 小时前
第一次进入 PEICORE 流程
c语言·笔记
YJlio8 小时前
Process Monitor 学习笔记(5.24):工具栏参考与高效快捷键指南
笔记·学习·php
摇滚侠8 小时前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 核心语法 笔记39
spring boot·笔记·后端·thymeleaf
张人玉9 小时前
WPF 常用样式属性及示例笔记
笔记·wpf
报错小能手10 小时前
linux学习笔记(49)Redis详解(1)
linux·笔记·学习
QT 小鲜肉10 小时前
【个人成长笔记】在本地Windows系统中如何正确使用adb pull命令,把Linux系统中的文件或文件夹复制到本地中(亲测有效)
linux·windows·笔记·学习·adb