前端——周总结系列三

news/2024/11/17 9:57:37/

1 数组对象使用变量作为key加中括号

在这里插入图片描述

2 遍历数组异同

主要针对for…in, for…of ,map遍历方法

  1. for…in和for…of都可以遍历数组,其中for…of可以获取数组的每一项,for…in不仅可以获取每一项,也可以获取索引值
    在这里插入图片描述
  2. for…of不可以遍历对象,for…in可以遍历对象
    在这里插入图片描述
  3. map可以获取数组的某一项组成新数组返回,不会改变原数组,一般针对数组对象
    在这里插入图片描述
  4. 是否终止循环
  • 不支持return:for...in forEach
  • 支持return:for for...of map
  1. 是否改变原数组
  • 不改变原数组:filter map some every forEach join concat slice
  • 改变原数组:pop push reverse shift unshift sort splice

3 Object

  1. Object.assign()合并多个对象
  • 语法:Object.assign(target, …source)可接受多个参数,一个目标对象,多个源对象
  • 举例
    在这里插入图片描述
  1. Object.keys(obj)
  • 语法:获取对象所有的key组成数组返回
  • 举例
    在这里插入图片描述
  1. Object.values(obj)
  • 语法:获取对象所有的values组成数组返回
  • 举例
    在这里插入图片描述
  1. Object.is(value1, value2)
  • 语法:比较两个变量是否相等
  • 举例
    在这里插入图片描述
    在这里插入图片描述

4 JS事件代理

  1. 引入:在日常工作生活中,我们经常会委托别人办事,或者代替本人完成某件事;就像在疫情大环境下,各个学校严抓严管,防护疫情,每个宿舍委托一个同学去给整个宿舍同学买饭菜,这就是一个代理的过程,委派的同学就类似父元素,其他同学类似子元素。
  2. 概述:利用JS事件冒泡原理动态为元素绑定事件称为事件代理。
  3. 使用:比如点击的当前li要素颜色变绿,可以直接给li要素绑定事件然后改变颜色,但是这样需要循环遍历所有的li要素,代码复杂,同时也影响性能,可以找到li要素最近的父元素给他绑定事件,利用冒泡原理,改变li要素的颜色,当添加或移除要素也不用做其他处理,动态绑定事件。
    liList.forEach((item) =>{item.onClick = function(e) {e.target.style.background = 'green';}
    })
    ul.onClick = function(e) {e.target.style.background = 'green';
    }
    
  4. 优点
  • 代码简洁易读
  • 提高页面性能
  • 动态绑定事件

http://www.ppmy.cn/news/22306.html

相关文章

MySQL的函数

目录 一.分类 聚合函数 概述 格式 操作 数学函数 操作1 操作2 操作3 字符串函数 操作1 操作2 操作3 操作4 日期函数 操作1 操作2 操作3 控制流函数 if逻辑判断语句 case when 语句 窗口函数 介绍 分类 序号函数 开窗聚合函数- SUM,AVG,MIN,MAX 分布函数-…

Web 应用渗透测试 01 - 命令注入(Code Injection)之 create_function

背景 这篇文章将讨论 PHP Web 应用中 create_function 的命令注入。命令注入,究其根源,都是未对用户提供的输入做合理过滤造成的。当然,编程语言本身内置的危险方法的使用,是命令注入频发的另一原因。 各种变成语言的危险方法有…

数据库面试题

数据库面试什么是事务?以及事务的ACID?请描述数据库的隔离级别视图和数据表的区别是什么?SQL优化:什么是索引?以及索引的应用?什么是事务?以及事务的ACID? 事务:事务是指严密逻辑的操作,要么都成功,要么都失败。 通俗一点说:一件事中有很多个环…

html+css网页练习一

文章目录一、活动页面1、要求2、效果图3、index.html4、style.css二、改革进展与成效管理平台页面1、要求2、效果图3、index.html4、normalize.css三、头部静态html1、要求2、效果图3、header.html4、header.css四、课程表1、要求2、效果图3、table.html4、table.css素材在我的…

DGIOT开源物联网-移动云部署

感谢来自苏州的用户支持为了节省开发者和实施工程师的时间,降低部署难度,本文提供了一套基于linux系统的一键式部署方式,以便快速交付,提升学习和商用部署的效率。安装部署1.服务器移动云地址云服务器购买时选择如下操作系统&…

pyqt5主窗口按键弹出子窗口

目标:主窗口保持,通过按键弹出子窗口 步骤一:pyqt5创建主窗口,并设置按键 from PyQt5.QtWidgets import * import sys# 主窗口 class Main(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("主窗口…

基于linux5.15.5的IMX 参考手册 --- 6

基于linux5.15.5的IMX 参考手册 — 6 4.4 FEC (Fast Ethernet Controller) 4.4.1介绍 快速以太网控制器(FEC)驱动程序执行全套IEEE 802.3/以太网CSMA/CD媒体访问控制和通道接口功能。 FEC需要外部接口适配器和收发器功能来完成与以太网媒体的接口。10 Mbps、100 Mbps和1000 Mb…

超声波测距LCD1602显示

超声波测距模块:1、采用IO口TRIG触发测距,给至少10us的高电平信号;2、模块自动发送8个40khz的方波,自动检测是否有信号返回;3、有信号返回,通过IO口ECHO输出一个高电平,高电平持续的时间就是超声…