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)}}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/127865.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

v-bind绑定

一、标签属性动态绑定 方式一&#xff1a; v-bind:属性名"data声明的变量名" 方式二&#xff1a;&#xff08;简写&#xff09; 将v-bind省略&#xff0c;直接 :属性名"data声明的变量" v-bind.属性名[.修饰符]"变量名、计算属性。。 对应还提供了修饰…

宠物社区风格 商业版(GBK)Discuz模板

仿爱宠乐园宠物社区风格Discuz模板&#xff0c;商业版&#xff08;GBK&#xff09;Discuz模板。 1、版本支持&#xff1a;discuzx3.0版本&#xff0c;discuzx3.1版本&#xff0c;discuzx3.2版本&#xff0c;discuzx3.3版本&#xff0c;discuzx3.4版本。包括网站首页&#xff0…

1.6 计算机网络的性能

思维导图&#xff1a; 1.6.1 计算机网络的性能指标 前言&#xff1a; 我的理解&#xff1a; 这段前言主要介绍了关于计算机网络性能的两个方面的讨论。首先&#xff0c;计算机网络的性能可以通过一些重要的性能指标来衡量。但除了这些指标之外&#xff0c;还有一些非性能特征…

李沐深度学习记录4:12.权重衰减/L2正则化

权重衰减从零开始实现 #高维线性回归 %matplotlib inline import torch from torch import nn from d2l import torch as d2l#整个流程是&#xff0c;1.生成标准数据集&#xff0c;包括训练数据和测试数据 # 2.定义线性模型训练 # 模型初始化&#xff08;函…

接口测试及常用接口测试工具

首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给你…

【研究的艺术】通读《The Craft of Research》

通读《The Craft of Research》 前言1. 跟读者建立联系2. 明白问题的重要性3. 组织论述4. 论点4.1 Making Claims4.2 Assembling Reasons and Evidence4.3 Acknowledgments and Responses4.4 Warrants 未完待续。。。 前言 本篇博客是《The Craft of Research》的通读笔记&…

论文研读|Protecting Intellectual Property of Deep Neural Networks with Watermarking

目录 论文信息文章简介研究动机研究方法水印生成水印嵌入版权验证 实验结果有效性&#xff08;Effectiveness&#xff09;高效性&#xff08;Converge Speed&#xff09;保真度&#xff08;Functionality&#xff09;鲁棒性&#xff08;Robustness&#xff09;Anti-剪枝攻击&am…

【数据结构】迷宫问题DFS非递归(c语言实现)

本来之前写过一个推箱子&#xff0c;就想着写个迷宫游戏&#xff0c;因为想着推箱子游戏里面也有墙&#xff0c;也有玩家的移动&#xff0c;比推箱子简单的是还不用判断前面是否有箱子的情况&#xff0c;但是自己写的迷宫游戏如果自己随机生成的迷宫地图的话&#xff0c;不一定…

Uniapp 新手专用 抖音登录 获取用户头像、名称、openid、unionid、anonymous_openid、session_key

TC-dylogin 一定请选择 源码授权版 教程 第一步 将代码拷贝至您所需要的页面 该代码位置&#xff1a;pages/index.vue 第二步 修改appid和secret 第三步 获取appid和secret 获取appid和secret链接 注意事项 为了安全&#xff0c;我将默认的自己的appid和secret在云函数中删…

RPC分布式网络通信框架项目

文章目录 对比单机聊天服务器、集群聊天服务器以及分布式聊天服务器RPC通信原理使用Protobuf做数据的序列化&#xff0c;相比较于json&#xff0c;有哪些优点&#xff1f;环境配置使用项目代码工程目录vscode远程开发Linux项目muduo网络库编程示例CMake构建项目集成编译环境Lin…

MySQL:主从复制-基础复制(6)

环境 主服务器 192.168.254.1 从服务器&#xff08;1&#xff09;192.168.254.2 从服务器&#xff08;2&#xff09;192.168.253.3 我在主服务器上执行的操作会同步至从服务器 主服务器 yum -y install ntp 我们去配置ntp是需要让从服务器和我们主服务器时间同步 sed -i /…

探秘小米增程汽车与仿生机器人的未来:AI大模型的潜在影响及苹果iPhone15Pro发热问题解决之道

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…