JavaScript 进阶(四)

一、深浅拷贝

开发中我们经常需要复制一个对象。如果直接用赋值会有下面问题:

1.1 浅拷贝

首先浅拷贝和深拷贝只针对引用类型

浅拷贝:拷贝的是地址
常见方法:
1. 拷贝对象:Object.assgin() / 展开运算符 {...obj} 拷贝对象
2.拷贝数组:Array.prototype.concat() 或者 [...arr]
如果是简单数据类型拷贝值,引用数据类型拷贝的是地址 (简单理解: 如果是单层对象,没问题,如果有多层就有问题)。
问题:
1. 直接赋值和浅拷贝有什么区别?
(1)直接赋值的方法,只要是对象,都会相互影响,因为是直接拷贝对
象栈里面的地址。
(2)浅拷贝如果是一层对象,不相互影响,如果出现多层对象拷贝还会
相互影响。
2.浅拷贝怎么理解?
拷贝对象之后,里面的属性值是简单数据类型直接拷贝值
如果属性值是引用数据类型则拷贝的是地址

1.2 深拷贝

深拷贝:拷贝的是对象,不是地址。

常见方法:
1. 通过递归实现深拷贝
2. lodash/cloneDeep
3. 通过JSON.stringify()实现
1. 通过递归实现深拷贝
函数递归:
如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。
        简单理解:函数内部自己调用自己, 这个函数就是递归函数。
        递归函数的作用和循环效果类似。
        由于递归很容易发生“栈溢出”错误(stack overflow),所以 必须要加退出条件 return。
利用递归函数实现 setTimeout 模拟 setInterval效果。
通过递归函数实现深拷贝(简版)
2. js库lodash里面cloneDeep内部实现了深拷贝
3. 通过JSON.stringify()实现

二、异常处理

2.1 throw 抛异常

异常处理是指预估代码执行过程中可能发生的错误,然后最大程度的避免错误的发生导致整个程序无法继续运行。
总结:
1. throw 抛出异常信息,程序也会终止执行
2. throw 后面跟的是错误提示信息
3. Error 对象配合 throw 使用,能够设置更详细的错误信息

2.2 try/catch 捕获错误信息

我们可以通过try / catch 捕获错误信息(浏览器提供的错误信息) try 试试 catch 拦住 finally 最后
总结:
1. try...catch 用于捕获错误信息
2. 将预估可能发生错误的代码写在 try 代码段中
3. 如果 try 代码段中出现错误后,会执行 catch 代码段,并截获到错误信息
4. finally 不管是否有错误,都会执行

2.3 debugger

我们可以通过try / catch 捕获错误信息(浏览器提供的错误信息)

三、处理this

this 是 JavaScript 最具“魅惑”的知识点,不同的应用场合 this 的取值可能会有意想不到的结果,在此我们对以往学习过的关于【 this 默认的取值】情况进行归纳和总结。

3.1 this指向-普通函数

普通函数的调用方式决定了 this 的值,即【谁调用 this 的值指向谁】
普通函数没有明确调用者时 this 值为 window,严格模式下没有调用者时 this 的值为 undefined。

3.2 this指向-箭头函数

箭头函数中的 this 与普通函数完全不同,也不受调用方式的影响,事实上 箭头函数中并不存在this 
1. 箭头函数会默认帮我们绑定外层 this 的值,所以在箭头函数中 this 的值和外层的 this 是一样的
2.箭头函数中的this引用的就是最近作用域中的this
3.向外层作用域中,一层一层查找this,直到有this的定义
注意情况1:
在开发中【使用箭头函数前需要考虑函数中 this 的值】,事件回调函数使用箭头函数时,this 为全局的 window,因此DOM事件回调函数 如果里面需要 DOM对象的this,则不推荐使用箭头函数。
注意情况2:
同样由于箭头函数 this 的原因,基于原型的面向对象也不推荐采用箭头函数。
总结:
1. 函数内不存在this,沿用上一级的
2.不适用构造函数,原型函数,dom事件函数等等
3. 适用需要使用上层this的地方
4. 使用正确的话,它会在很多地方带来方便,后面我们会大量使用慢慢体会

3.3 改变this

JavaScript 中还允许指定函数中 this 的指向,有 3 个方法可以动态指定普通函数中 this 的指向
1. call() –了解
使用 call 方法调用函数,同时指定被调用函数中 this 的值。
语法:
thisArg:在 fun 函数运行时指定的 this 值
arg1,arg2:传递的其他参数
返回值就是函数的返回值,因为它就是调用函数
2. apply()-理解
使用 apply 方法调用函数,同时指定被调用函数中 this 的值
语法:
thisArg:在fun函数运行时指定的 this 值
argsArray:传递的值,必须包含在 数组 里面
返回值就是函数的返回值,因为它就是调用函数
因此 apply 主要跟数组有关系,比如使用 Math.max() 求数组的最大值
3. bind()-重点
bind() 方法不会调用函数。但是能改变函数内部this 指向。
语法:
thisArg:在 fun 函数运行时指定的 this 值
arg1,arg2:传递的其他参数
返回由指定的 this 值和初始化参数改造的 原函数拷贝 (新函数)
因此当我们只是想改变 this 指向,并且不想调用这个函数的时候,可以使用 bind, 比如改变定时器内部的this指向.
call apply bind 总结
相同点: 都可以改变函数内部的this指向.
区别点:
(1)call 和 apply 会调用函数, 并且改变函数内部this指向.
(2)call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]
(3)bind 不会调用函数, 可以改变函数内部this指向.
主要应用场景:
(1)call 调用函数并且可以传递参数
(2)apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
(3)bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

四、性能优化

4.1 节流

所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。
开发使用场景 – 小米 轮播图点击效果 、 鼠标移动、页面尺寸缩放resize、滚动条滚动 就可以加节流。
假如一张轮播图完成切换需要300ms, 不加节流效果,快速点击,则嗖嗖嗖的切换,加上节流效果, 不管快速点击多少次, 300ms时间内,只能切换一张图片。
案例: 利用节流来处理-鼠标滑过盒子显示文字。
要求: 鼠标在盒子上移动,里面的数字就会变化+1,利用节流的方式, 鼠标经过,500ms ,数字才显示。

4.2 防抖

所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
开发使用场景- 搜索框防抖
假设输入就可以发送请求,但是不能每次输入都去发送请求,输入比较快发送请求会比较多,我们设定一个时间,假如300ms,当输入第一个字符时候,300ms后发送请求,但是在200ms的时候又输入了一个字符,则需要再等300ms 后发送请求。
案例: 利用防抖来处理-鼠标滑过盒子显示文字。

4.3 Lodash 库 实现节流和防抖

案例页面打开,可以记录上一次的视频播放位置。
分析:两个事件:
①:ontimeupdate 事件在视频/音频(audio/video)当前的播放位置发送改变时触发
②:onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发
谁需要节流?
ontimeupdate , 触发频次太高了,我们可以设定 1秒钟触发一次。
思路:
1. 在ontimeupdate事件触发的时候,每隔1秒钟,就记录当前时间到本地存储
2. 下次打开页面, onloadeddata 事件触发,就可以从本地存储取出时间,让视频从取出的时间播放,如果没有就默认为0s
3. 获得当前时间 video.currentTime
答案:

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

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

相关文章

【隐私计算实训营-001数据可信流通,从运维信任到技术信任】

1. 数据可信流通体系 信任的基石: 身份的可确认利益可依赖能力有预期行为有后果 2.内循环——>外循环 内循环:数据持有方在自己的运维安全域内队自己的数据使用和安全拥有全责。 外循环:数据要素在离开持有方安全域后,持有方…

阅读笔记(CVPR2020)Warping Residual Based Image Stitching for Large Parallax

基于变形残差的大视差图像拼接 K. -Y. Lee and J. -Y. Sim, "Warping Residual Based Image Stitching for Large Parallax," 2020 IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR), Seattle, WA, USA, 2020, pp. 8195-8203, doi: 10.1109/…

突破编程_C++_C++11新特性(列表初始化)

1 基本概念与使用 C11 引入了许多新特性,其中列表初始化(List Initialization)或统一初始化(Uniform Initialization)是其中之一。列表初始化是一种新的语法,用于初始化对象,可以使得代码更加清…

CSS学习2

自己在工作中总是有一些自动化开发的需求,总是以为自己是有前端基础的,但是一写页面,布局都布不好,真是搞笑,说起来还是基本功不扎实啊,这里在重新复习一下,然后记录一下文档。后边在写两个综合…

C++从零开始(day54)——位图,布隆过滤器

这是关于一个普通双非本科大一学生的C的学习记录贴 在此前,我学了一点点C语言还有简单的数据结构,如果有小伙伴想和我一起学习的,可以私信我交流分享学习资料 那么开启正题 今天分享的是关于位图, 布隆过滤器相关的知识点 1.位…

【linux】环境变量(进程二)

这里写目录标题 命令行参数:环境变量: 命令行参数: 不谈命令行参数就谈环境变量就是耍流氓。 相信我们在C语言阶段都在main函数里见过参数。 例如int main(int argc, char* argv[]) 这是什么东西呢? 话不多说我们直接打印一下看…

java.lang.ArithmeticException: Rounding necessary错误解决方法

今天使用BigDecimal的setScale方法控制小数位时遇到了java.lang.ArithmeticException: Rounding necessary错误,经查,setScale方法有2中使用方法: 1.只设置小数位 setScale(n),例如: BigDecimal bigDecimal new Bi…

JupyterNotebook 如何切换使用的虚拟环境kernel

在Jupyter Notebook中,如果需要修改使用的虚拟环境Kernel: 首先,需要确保虚拟环境已经安装conda上【conda基本操作】 打开Jupyter Notebook。 在Jupyter Notebook的顶部菜单中,选择 “New” 在弹出的窗口中,列出了…

“JavaScript: void(0)的替代方案有哪些?”

学习目标: 理解javascript:void(0)的工作原理,以及它在前端开发中的作用和用途。掌握javascript:void(0)的正确用法,包括在HTML中使用和在事件处理程序中使用。能够识别javascript:void(0)可能引起的常见问题,并学会相应的解决方…

python 基础语法

python 基础语法 一、基础语法1. 标识符2. python保留字3. 注释分类4. 行与缩进5. 数字(Number)类型6. 字符串(String)7. 空行分割8. 等待用户输入9. 多个语句构成代码组10. import 与 from...import 二、代码概览 一、基础语法 1. 标识符 第一个字符必须是字母表中字母或下划…

numpy的数组深度叠加dstack详解

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 一、引言 numpy的dstack函数用于沿着第三个维度(深度)将数组堆叠起来。它将多个数组按照深度方向进行堆叠,生成一个新的数组。具体来说,dstack函数会将输入的…

docker部署开源多功能监控系统

HertzBeat 是一个无需 Agent、高性能、易扩展、功能强大的开源实时监控告警系统,无需 Agent、高性能、易扩展、功能强大,由 Dromara 团队开发并开源,能够帮我们轻松监控应用、服务、基础设施等各种资源的运行状况 部署 docker run -d -p 11…

腾讯云服务器按月收费价格表,优惠价格5元一个月起

2024腾讯云服务器多少钱一个月?5元1个月起,腾讯云轻量服务器4核16G12M带宽32元1个月、96元3个月,8核32G22M配置115元一个月、345元3个月,腾讯云轻量应用服务器61元一年折合5元一个月、4核8G12M配置646元15个月、2核4G5M服务器165元…

2024 年 AI 辅助研发趋势-人才培养与教育

2024 年 AI 辅助研发趋势随着人工智能技术的持续发展与突破,2024年AI辅助研发正成为科技界和工业界瞩目的焦点。从医药研发到汽车设计,从软件开发到材料科学,AI正逐渐渗透到研发的各个环节,变革着传统的研发模式。在这一背景下&am…

01 JDBC介绍

文章目录 JDBC本质版本使用核心APIDriverDriverManager驱动注册连接对象获取 Connection获取执行对象事务管理 Statement概述 ResultSet概述 JDBC本质 官方(sun公司)定义的一套操作所有关系型数据库的规则,即接口各个数据库厂商去实现这套接…

im-system学习

文章目录 LimServerLimServersnakeyaml依赖使用配置类配置文件 私有协议解码MessageDecoderByteBufToMessageUtils 这个很全: IM即时通讯系统[SpringBootNetty]——梳理(总) IO线程模型 Redis 分布式客户端 Redisson 分布式锁快速入门 Lim…

【Week Y2】使用自己的数据集训练YOLO-v5s

Y2-使用自己的数据集训练YOLO-v5s 零、遇到的问题汇总(1)遇到git的import error(2)Error:Dataset not found(3)Error:删除中文后,训练图片路径不存在 一、.xml文件里保存…

框架篇常见面试题

1、Spring框架的单例bean是线程安全的吗? 2、什么是AOP? 3、Spring的事务是如何实现的? 4、Spring事务失效的场景 5、SpringBean的声明周期 6、Spring的循环依赖 7、SpringMVC的执行流程 8、SpringBoot自动配置原理 9、Spring常见注解

Java中的实用类讲解(中篇)

如果想观看更多Java内容 可上我的个人主页关注我,地址子逸爱编程-CSDN博客https://blog.csdn.net/a15766649633?spm1000.2115.3001.5343 使用工具 IntelliJ IDEA Community Edition 2023.1.4 使用语言 Java8 代码能力快速提升小方法,看完代码自己敲…

AV1:帧内预测(一)

​VP9支持10种帧内预测模式,包括8种角度模式和非角度模式DC、TM(True Motion)模式,AV1在其基础上进一步扩展,AV1帧内预测角度模式更细化,同时新增了部分非角度模式。 扩展的角度模式 AV1在VP9角度模式的基础上进一步扩展&#xf…