当前位置: 首页 > news >正文

day25--JS进阶(递归函数,深浅拷贝,异常处理,改变this指向,防抖及节流)

目录

浅拷贝

1.拷贝对象①Object.assgin()  ②展开运算符newObj = {...obj}拷贝对象

2.拷贝数组 ①Array.prototype.concat() ② newArr = [...arr]

深拷贝

1.通过递归实现深拷贝

2.lodash/cloneDeep实现

3.通过JSON.stringify()实现

异常处理

throw抛异常

try/catch捕获异常

debugger

处理this

this指向

普通函数this指向

箭头函数this指向

改变this

call()

apply()

bind()

性能优化

防抖

1. lodash提供的防抖函数来处理

2. 手写一个防抖函数来处理

节流

1. lodash提供的节流函数来处理

2. 手写一个节流函数来处理


浅拷贝

关于对象/数组等引用数据类型直接复制出现的问题:

因为复制完后的是地址,因此修改复制后的会影响到原来的对象

需要深浅拷贝来解决。

1.拷贝对象①Object.assgin()  ②展开运算符newObj = {...obj}拷贝对象

2.拷贝数组 ①Array.prototype.concat() ② newArr = [...arr]

Array.prototype.concat()
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

因此用于拷贝,则先声明一个空数组再对其进行拷贝。

利用浅拷贝,遇到简单的引用数据类型可以,只是拷贝最外边一层,但是里层的仍然是拷贝地址!

因此,对于浅拷贝,对于多层会出现原本出现的问题,对于多层对象/数组,需要深拷贝。

深拷贝

1.通过递归实现深拷贝

深拷贝需要用到函数递归;如果遇到数组,利用递归处理;如果遇到对象,利用递归处理,二者顺序不可调换

// 深拷贝函数function deepCopy(newObj, oldObj) {// 遍历旧对象for (let k in oldObj) {// 遇到值为数组的处理if (oldObj[k] instanceof Array) {// 如果值为数组,则要对该属性遍历,先要有一个空数组newObj[k] = []deepCopy(newObj[k], oldObj[k])} else if (oldObj[k] instanceof Object) {// 如果值为对象,则要对该属性遍历,先要有一个空对象newObj[k] = {}deepCopy(newObj[k], oldObj[k])} else {newObj[k] = oldObj[k]}}}deepCopy(o, obj)

2.lodash/cloneDeep实现

要先引入库

 <script src="./lodash.min.js"></script>

3.通过JSON.stringify()实现

转为JSON字符串再进行拷贝

异常处理

throw抛异常

主观上在适当的地方抛出想设置的异常提示语

try/catch捕获异常

 语法:try{} catch(err){} [finally{}]
[]表示可选

catch(err){} 是获取到错误信息对象,上述是将错误信息打印出来。catch(){}不会终止函数,需要手动进行return

debugger

debugger 代码中打断点,效果与在浏览器中同,只是有时更方便。

处理this

this指向

普通函数this指向

普通函数的this指向调用者

箭头函数this指向

逐层往外层函数一层层找,直至有this的定义

改变this

后两者更重要

call()

调用函数,同时改变函数中的this指向

apply()

与call()的不同点在于传递的函数形参要用数组包裹着

bind()

与前两者不同的是

其能改变this指向但!!不会调用函数

因为不调用函数,因此返回值并不是函数返回值,而是拷贝出来的原函数(新函数)

因此只是想改变this指向而不想立马调用函数时要首先想到bind()!!!

  →

性能优化

一般对于触发频次比较高的时间,就需要用防抖或者节流函数来控制触发。

防抖

1. lodash提供的防抖函数来处理

(其是个函数!)

2. 手写一个防抖函数来处理

    function debounce(fn, t) {let Timeconsole.log(Time)return function () {if (Time) clearTimeout(Time)Time = setTimeout(fn, t)}}

节流

1. lodash提供的节流函数来处理

这个节流函数是指单位时间内只触发一次,如果单位时间内被触发了多次,在第一次触发结束时会被触发第二次,但不会有第三次,第四次....尽管前面触发了多次。

与手写的节流有不同,手写的节流是单位时间在最后一刻触发,且单位时间内触发了多次,仍然是最后一刻触发。

用法与上同

2. 手写一个节流函数来处理
    function throttle(fn, t) {let timerreturn function () {// 如果没有定时器运行,则开启,开启后清空,// 如果有,则不开启console.log(timer)if (!timer) {timer = setTimeout(function () {fn()//  开启后执行完后清掉定时器(将定时器置为空),确保下一次正常执行// 置空一定要放在定时器内部timer = null}, t)}}}

相关文章:

day25--JS进阶(递归函数,深浅拷贝,异常处理,改变this指向,防抖及节流)

目录 浅拷贝 1.拷贝对象①Object.assgin() ②展开运算符newObj {...obj}拷贝对象 2.拷贝数组 ①Array.prototype.concat() ② newArr [...arr] 深拷贝 1.通过递归实现深拷贝 2.lodash/cloneDeep实现 3.通过JSON.stringify()实现 异常处理 throw抛异常 try/catch捕获…...

Python爬虫(二十三)_selenium案例:动态模拟页面点击

本篇主要介绍使用selenium模拟点击下一页&#xff0c;更多内容请参考:Python学习指南 #-*- coding:utf-8 -*-import unittest from selenium import webdriver from selenium.webdriver.common.keys import Keys from bs4 import BeautifulSoup import timeclass douyuSelenium…...

nodejs+vue宠物店管理系统

例如&#xff1a;如何在工作琐碎,记录繁多的情况下将宠物店管理的当前情况反应给管理员决策,等等。在此情况下开发一款宠物店管理系统小程序&#xff0c; 困扰管理层的许多问题当中,宠物店管理也是不敢忽视的一块。但是管理好宠物店又面临很多麻烦需要解决,于是乎变得非常合乎时…...

ceph版本和Ceph的CSI驱动程序

ceph版本和Ceph的CSI驱动程序 ceph查看ceph版本Ceph的CSI驱动程序 ceph ceph版本和Ceph的CSI驱动程序 查看ceph版本 官网ceph-releases-index Ceph的CSI驱动程序 Ceph的CSI驱动程序 https://github.com/ceph/ceph-csi...

Android Studio Flutter真机调试错误

错误&#xff1a;Could not locate aapt. Please ensure you have the Android buildtools installed. No application found for TargetPlatform.android_arm64. Is your project missing an android/app/src/main/AndroidManifest.xml? Consider running "flutter crea…...

MQ - 41 容灾:跨地域、跨可用区的容灾和同步的方案设计

文章目录 导图概述容灾能力的理论基础集群内和集群间容灾RTO 和 RPO集群内容灾方案的原理分析RTO 和 RPO跨集群容灾方案的原理分析三种复制方式客户端连接集群主备切换方式一 直连 Broker方式二 域名方式三 虚拟 IP (推荐)双向同步RTO 和 RPOApache Kafka MirrorMaker (V2版…...

vue3学习(二)--- ref和reactive

文章目录 ref1.1 ref将基础类型和对象类型数据转为响应式1.2 ref()获取id元素1.3 isRef reactive1.1 reactive()将引用类型数据转为响应式数据&#xff0c;基本类型无效1.2 ref和reactive的联系 toRef 和 toRefs1.1 如果原始对象是非响应式的就不会更新视图 数据是会变的 ref …...

网络-HTTPS

文章目录 前言一、HTTPS简介优点SSL/TSL工作流程 加密1、对称加密2、非对称加密 二、使用HTTPS1.openSSL生成私钥&#xff08;1&#xff09;node服务端&#xff08;2&#xff09;nginx配置https服务&#xff08;前端&#xff09; nginx服务 总结 前言 Http 存在不安全、无状态…...

GPU提升多分类问题

使用GPU加速多分类问题&#xff0c;与上一篇文章中前几部分代码相同 多层线性网络这里&#xff0c;直接使用nn.Module搭建&#xff0c;与之前自定义搭建的三层网络一样&#xff0c;但注意这里用的激活函数是ReLU的改良后的LeakyReLU&#xff0c;能够避免在输入小于0时出现梯…...

Selenium+Pytest自动化测试框架

前言 selenium自动化 pytest测试框架 本章你需要 一定的python基础——至少明白类与对象&#xff0c;封装继承 一定的selenium基础——本篇不讲selenium&#xff0c;不会的可以自己去看selenium中文翻译网 测试框架简介 测试框架有什么优点呢&#xff1a; 代码复用率高&…...

云原生Kubernetes:Rancher管理k8s集群

目录 一、理论 1.Rancher 2.Rancher 安装及配置 二、实验 1.Rancher 安装及配置 三、问题 1. Rancher 部署监控系统报错 四、总结 一、理论 1.Rancher (1) 概念 Rancher 简介 Rancher 是一个开源的企业级多集群 Kubernetes 管理平台&#xff0c;实现了 Kubernetes …...

Java架构师异步架构设计

目录 1 导学2 为何需要异步消息架构3 消息发送失败该如何处理4 mq接收到消息过后又丢失了消息怎么办5 消费者弄丢了消息该如何处理6 消息重复消费了该怎么处理7 消息的有序处理8 消息堆积该如何处理9 如何提高消息消费的速度10 消息应用的可插拔11 如何设计消息的统一id12 异步…...

电子书制作软件Vellum mac中文版特点

Vellum mac是一款专业的电子书制作软件&#xff0c;它可以帮助用户将文本文件转换为高质量的电子书&#xff0c;支持多种格式&#xff0c;包括EPUB、MOBI、PDF等。Vellum具有直观的用户界面和易于使用的工具&#xff0c;可以让用户快速地创建和发布电子书。 Vellum mac软件特点…...

Langchain 代理 (Agents) ,赋能超级 LLMs

原文&#xff1a;Langchain 代理 (Agents) &#xff0c;赋能超级 LLMs - 知乎 大型语言模型&#xff08;LLMs&#xff09; 非常强大&#xff0c;但它们缺乏“最笨”的计算机程序可以轻松处理的特定能力。逻辑、计算和搜索是计算机通常擅长的领域&#xff0c;但 LLMs 却遇到了困…...

华为OD机考算法题:阿里巴巴找黄金宝箱(1)

题目部分 题目阿里巴巴找黄金宝箱&#xff08;1&#xff09;难度易题目说明一贫如洗的樵夫阿里巴巴在去砍柴的路上&#xff0c;无意中发现了强盗集团的藏宝地&#xff0c;藏宝地有编号从 0 ~ N 的箱子&#xff0c;每个箱子上面贴有一个数字&#xff0c;箱子中可能有一个黄金宝…...

【JAVA版本】websocket获取B站直播弹幕——基于直播开放平台

教程 B站直播间弹幕Websocket获取 — 哔哩哔哩直播开放平台 基于B站直播开放平台开放且未上架时&#xff0c;只能个人使用。 代码实现 1、相关依赖 fastjson2用于解析JSON字符串&#xff0c;可自行替换成别的框架。 hutool-core用于解压zip数据&#xff0c;可自行替换成别的…...

Vue中的监视属性

一、监视属性的使用 &#xff08;一&#xff09;配置watch进行监视 当我们想要监视一个属性改变的时候就可以使用监视属性监视其变化并进行操作。 语法格式如下&#xff1a; watch:{ 监视属性名称 : { // 监视属性的配置项 } } 1. handler函数 当监视的属性发生变化时就调…...

汽车一键启动点火开关按键一键启动按钮型号规格

汽车点火开关/移动管家一键启动按键/汽车改装引擎启动按钮型号&#xff1a;YD828溥款开关 一键启动按钮&#xff08;适用于配套启动主机使用或原车一键启动开关更换&#xff09; 1.适合配套专用板板安装 2.开孔器开孔安装 3.原车钥匙位安装 外观&#xff1a;黑色 按钮上有3种不…...

快速学习微服务保护框架--Sentinel

学习一个框架最好的方式就是查看官方地址,sentinel是国内阿里巴巴公司的,官网更方便官网 官网 微服务保护框架 Sentinel 1.初识Sentinel 1.1.雪崩问题及解决方案 1.1.1.雪崩问题 微服务中&#xff0c;服务间调用关系错综复杂&#xff0c;一个微服务往往依赖于多个其它微…...

bootz启动 Linux内核过程总结

一. bootz启动Linux uboot 启动 Linux内核使用bootz命令。当然还有其它的启动命令&#xff0c;例如&#xff0c;bootm命令等等。 前面几篇文章分析 bootz命令启动 Linux内核的过程中涉及的几个重要函数。 bootz启动 Linux内核过程中涉及的全局变量images_凌肖战的博客-CSDN博…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...