JavaScript 进阶 - 第4天笔记
文章目录
- JavaScript 进阶 - 第4天笔记
- 1 深浅拷贝
- 1.1 浅拷贝
- 1.2 深拷贝(面试)
- 1.2.1 递归实现深拷贝
- 1.2.2 js库lodash里面cloneDeep内部实现了深拷贝
- 1.2.3 JSON序列化
- 2 异常处理
- 2.1 throw 抛异常
- 2.2 try ... catch 捕获异常
- 2.3 debugger
- 3 处理this
- 3.1 普通函数
- 3.2 this指向-箭头函数
- 3.3 改变this指向
- 3.3.1 call
- 3.3.2 apply-理解
- 3.3.3 bind-重点
- 3.3.4 call apply bind 总结
- 4 性能优化
- 4.1 防抖(debounce)
- 4.1.1 案例:利用防抖来处理 - 鼠标滑过盒子显示文字(手写防抖函数)
- 4.2 节流 - throttle
- 4.2.1 案例:利用节流来处理 - 鼠标滑过盒子显示文字
- 4.2.2 案例:利用节流来处理 - 鼠标滑过盒子显示文字(手写节流函数)
- 4.3 防抖和节流总结
- 5 节流综合案例
- 5.1 案例:页面打开,可以记录上一次的视频播放位置
1 深浅拷贝
1.1 浅拷贝
首先浅拷贝和深拷贝只针对引用类型
浅拷贝:拷贝的是地址
常见方法:
- 拷贝对象:Object.assgin() / 展开运算符 {…obj} 拷贝对象
- 拷贝数组:Array.prototype.concat() 或者 […arr]
如果是简单数据类型拷贝值,引用数据类型拷贝的是地址 (简单理解: 如果是单层对象,没问题,如果有多层就有问题)
-
直接赋值和浅拷贝的区别:
- 直接赋值的方法,只要是对象,都会相互影响,因为是直接拷贝对象栈里面的地址。
- 浅拷贝如果是一层对象,不相互影响,如果出现多层对象拷贝还会相互影响。
-
浅拷贝的理解:
- 拷贝对象之后,里面的属性值是简单数据类型直接拷贝值。
- 如果属性值是引用数据类型则拷贝的是地址。
1.2 深拷贝(面试)
首先浅拷贝和深拷贝只针对引用类型
深拷贝:拷贝的是对象,不是地址
常见方法:
- 通过递归实现深拷贝
- lodash/cloneDeep
- 通过JSON.stringify()实现
1.2.1 递归实现深拷贝
函数递归:
如果一个函数在内部可以调用其本身,那么这个函数就是递归函数
- 简单理解:函数内部自己调用自己, 这个函数就是递归函数
- 递归函数的作用和循环效果类似
- 由于递归很容易发生“栈溢出”错误(stack overflow),所以必须要加退出条件 return
<body><script>const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小pink'}}const o = {}// 拷贝函数function deepCopy(newObj, oldObj) {debuggerfor (let k in oldObj) {// 处理数组的问题 一定先写数组 在写 对象 不能颠倒if (oldObj[k] instanceof Array) {newObj[k] = []// newObj[k] 接收 [] hobby// oldObj[k] ['乒乓球', '足球']deepCopy(newObj[k], oldObj[k])} else if (oldObj[k] instanceof Object) {newObj[k] = {}deepCopy(newObj[k], oldObj[k])}else {// k 属性名 uname age oldObj[k] 属性值 18// newObj[k] === o.uname 给新对象添加属性newObj[k] = oldObj[k]}}}deepCopy(o, obj) // 函数调用 两个参数 o 新对象 obj 旧对象console.log(o)o.age = 20o.hobby[0] = '篮球'o.family.baby = '老pink'console.log(obj)console.log([1, 23] instanceof Object)// 复习// const obj = {// uname: 'pink',// age: 18,// hobby: ['乒乓球', '足球']// }// function deepCopy({ }, oldObj) {// // k 属性名 oldObj[k] 属性值// for (let k in oldObj) {// // 处理数组的问题 k 变量// newObj[k] = oldObj[k]// // o.uname = 'pink'// // newObj.k = 'pink'// }// }</script>
</body>
练习:利用递归函数实现setTimeout
模拟setInterval
效果
需求:
- 页面每隔一秒输出当前的时间;
- 输出当前时间可以使用:new Date().toLocaleString()
<body><div></div><script>function getTime() {document.querySelector('div').innerHTML = new Date().toLocaleString()setTimeout(getTime, 1000)}getTime()</script>
</body>
面试中问到深拷贝:
- 深拷贝做到拷贝出来的对象,新对象不会影响旧对象,要想实现深拷贝,运用到函数递归;
- 当我们在普通拷贝时,直接赋值就可以,但是如果遇到数组的,再次调用递归函数就可以;
- 如果遇到对象形式,再次利用递归把对象解决,最后补充先 Array 后对象。
1.2.2 js库lodash里面cloneDeep内部实现了深拷贝
<body><!-- 先引用 --><script src="./lodash.min.js"></script><script>const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小pink'}}const o = _.cloneDeep(obj)console.log(o)o.family.baby = '老pink'console.log(obj)</script>
</body>
1.2.3 JSON序列化
<body><script>const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小pink'}}// 把对象转换为 JSON 字符串// console.log(JSON.stringify(obj))const o = JSON.parse(JSON.stringify(obj))console.log(o)o.family.baby = '123'console.log(obj)</script>
</body>
2 异常处理
了解 JavaScript 中程序异常处理的方法,提升代码运行的健壮性。
2.1 throw 抛异常
异常处理是指预估代码执行过程中可能发生的错误,然后最大程度的避免错误的发生导致整个程序无法继续运行
总结:
- throw 抛出异常信息,程序也会终止执行
- throw 后面跟的是错误提示信息
- Error 对象配合 throw 使用,能够设置更详细的错误信息
<script>function counter(x, y) {if(!x || !y) {// throw '参数不能为空!';throw new Error('参数不能为空!')}return x + y}counter()
</script>
总结:
throw
抛出异常信息,程序也会终止执行throw
后面跟的是错误提示信息Error
对象配合throw
使用,能够设置更详细的错误信息
2.2 try … catch 捕获异常
<script>function foo() {try {// 查找 DOM 节点const p = document.querySelector('.p')p.style.color = 'red'} catch (error) {// try 代码段中执行有错误时,会执行 catch 代码段// 查看错误信息console.log(error.message)// 终止代码继续执行return}finally {alert('执行')}console.log('如果出现错误,我的语句不会执行')}foo()
</script>
总结:
try...catch
用于捕获错误信息- 将预估可能发生错误的代码写在
try
代码段中 - 如果
try
代码段中出现错误后,会执行catch
代码段,并截获到错误信息 - finally 不管是否有错误,都会执行
2.3 debugger
相当于断点调试
3 处理this
了解函数中 this 在不同场景下的默认值,知道动态指定函数 this 值的方法。
this
是 JavaScript 最具“魅惑”的知识点,不同的应用场合 this
的取值可能会有意想不到的结果,在此我们对以往学习过的关于【 this
默认的取值】情况进行归纳和总结。
3.1 普通函数
普通函数的调用方式决定了 this
的值,即【谁调用 this
的值指向谁】,如下代码所示:
<script>// 普通函数function sayHi() {console.log(this) }// 函数表达式const sayHello = function () {console.log(this)}// 函数的调用方式决定了 this 的值sayHi() // windowwindow.sayHi()// 普通对象const user = {name: '小明',walk: function () {console.log(this)}}// 动态为 user 添加方法user.sayHi = sayHiuesr.sayHello = sayHello// 函数调用方式,决定了 this 的值user.sayHi()user.sayHello()
</script>
注: 普通函数没有明确调用者时 this
值为 window
,严格模式下没有调用者时 this
的值为 undefined
。
3.2 this指向-箭头函数
箭头函数中的 this
与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在 this
!箭头函数中访问的 this
不过是箭头函数所在作用域的 this
变量。
<script>console.log(this) // 此处为 window// 箭头函数const sayHi = function() {console.log(this) // 该箭头函数中的 this 为函数声明环境中 this 一致}// 普通对象const user = {name: '小明',// 该箭头函数中的 this 为函数声明环境中 this 一致walk: () => {console.log(this)},sleep: function () {let str = 'hello'console.log(this)let fn = () => {console.log(str)console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致}// 调用箭头函数fn();}}// 动态添加方法user.sayHi = sayHi// 函数调用user.sayHi()user.sleep()user.walk()
</script>
在开发中【使用箭头函数前需要考虑函数中 this
的值】,事件回调函数使用箭头函数时,this
为全局的 window
,因此DOM事件回调函数不推荐使用箭头函数,如下代码所示:
<script>// DOM 节点const btn = document.querySelector('.btn')// 箭头函数 此时 this 指向了 windowbtn.addEventListener('click', () => {console.log(this)})// 普通函数 此时 this 指向了 DOM 对象btn.addEventListener('click', function () {console.log(this)})
</script>
同样由于箭头函数 this
的原因,基于原型的面向对象也不推荐采用箭头函数,如下代码所示:
<script>function Person() {}// 原型对像上添加了箭头函数Person.prototype.walk = () => {console.log('人都要走路...')console.log(this); // window}const p1 = new Person()p1.walk()
</script>
总结:
- 函数内不存在
this
,沿用上一级的,过程:向外层作用域中,一层一层查找this
,直到有this
的定义。 - 不适用
- 构造函数,原型函数,字面量对象中函数,
dom
事件函数
- 构造函数,原型函数,字面量对象中函数,
- 适用
- 需要使用上层
this
的地方
- 需要使用上层
3.3 改变this指向
以上归纳了普通函数和箭头函数中关于 this
默认值的情形,不仅如此 JavaScript 中还允许指定函数中 this
的指向,有 3 个方法可以动态指定普通函数中 this
的指向:
3.3.1 call
使用 call
方法调用函数,同时指定函数中 this
的值,使用方法如下代码所示:
<script>// 普通函数function sayHi() {console.log(this);}let user = {name: '小明',age: 18}let student = {name: '小红',age: 16}// 调用函数并指定 this 的值sayHi.call(user); // this 值为 usersayHi.call(student); // this 值为 student// 求和函数function counter(x, y) {return x + y;}// 调用 counter 函数,并传入参数let result = counter.call(null, 5, 10);console.log(result);
</script>
总结:
call
方法能够在调用函数的同时指定this
的值- 使用
call
方法调用函数时,第1个参数为this
指定的值 call
方法的其余参数会依次自动传入函数做为函数的参数
3.3.2 apply-理解
使用 call
方法调用函数,同时指定函数中 this
的值,使用方法如下代码所示:
<script>// 普通函数function sayHi() {console.log(this)}let user = {name: '小明',age: 18}let student = {name: '小红',age: 16}// 调用函数并指定 this 的值sayHi.apply(user) // this 值为 usersayHi.apply(student) // this 值为 student// 求和函数function counter(x, y) {return x + y}// 调用 counter 函数,并传入参数let result = counter.apply(null, [5, 10])console.log(result)
</script>
总结:
apply
方法能够在调用函数的同时指定this
的值- 使用
apply
方法调用函数时,第1个参数为this
指定的值 apply
方法第2个参数为数组,数组的单元值依次自动传入函数做为函数的参数apply
主要跟数组有关系,比如使用Math.max()
求数组的最大值
call
和 apply
的区别是?
- 都是调用函数,都能改变this指向
- 参数不一样,
alliy
传递的必须是数组
3.3.3 bind-重点
bind
方法并不会调用函数,而是创建一个指定了 this
值的新函数,使用方法如下代码所示:
<script>// 普通函数function sayHi() {console.log(this)}let user = {name: '小明',age: 18}// 调用 bind 指定 this 的值let sayHello = sayHi.bind(user);// 调用使用 bind 创建的新函数sayHello()
</script>
注:bind
方法创建新的函数,与原函数的唯一的变化是改变了 this
的值。
3.3.4 call apply bind 总结
相同点:
- 都可以改变函数内部的
this
指向
区别点:
call
和apply
会调用函数,并且改变函数内部this
指向call
和apply
传递的参数不一样,call
传递参数aru1,aru2...
形式apply
必须数组形式[arg]
bind
不会调用函数,可以改变函数内部this
指向
主要应用场景:
call
调用函数并且可以传递参数apply
经常跟数组有关系. 比如借助于数学对象实现数组最大值和最小值bind
不调用函数,但是还想改变this
指向. 比如改变定时器内部的this
指向
4 性能优化
4.1 防抖(debounce)
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
举个例子:王者荣耀回城,只要被打断就需要重新来
使用场景:
-
搜索框搜索输入。只需要用户最后一次输入完,再发送请求
-
手机号、邮箱验证输入检测
4.1.1 案例:利用防抖来处理 - 鼠标滑过盒子显示文字(手写防抖函数)
要求:鼠标在盒子上移动,鼠标停止500ms之后,里面的数字才会变化+1
核心思路:
防抖的核心就是定时器(setTimeout
)来实现
①:声明一个定时器变量
②:当鼠标每次滑动都先判断是否有定时器了,如果有定时器先清除以前的定时器
③:如果没有定时器则开启定时器,记得存到变量里面
④:在定时器里面调用要执行的函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head>
<body><div class="box"></div><script src="./lodash.min.js"></script><script>// 利用防抖实现性能优化// 需求:鼠标在盒子上移动,里面的数字就会变化 + 1const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++// 如果里面存在大量消耗性能的代码,比如dom操作,比如数据处理,可能造成卡顿}// 添加事件// box.addEventListener('mousemove', mouseMove)// 利用lodash库实现防抖 - 500毫秒之后采取+1// 语法:_.debounce(fun, 时间)box.addEventListener('mousemove', _.debounce(mouseMove, 500))// 手写防抖函数// 核心是利用 setTimeout定时器// 1. 声明定时器变量// 2. 每次鼠标移动(事件触发)的时候都要先判断是否有定时器,如果有先清除以前的定时器// 3. 如果没有定时器,则开启定时器,存入到定时器变量里面// 4. 定时器里面写函数调用function debounce(fn, t) {let timer// return 返回一个匿名函数return function () {// 2.3.4if (timer) clearTimeout(timer)setTimeout(function () {fn() // 加小括号调用 fn函数}, t)}}box.addEventListener('mousemove', debounce(mouseMove, 500))// debounce(mouseMove, 500) // 调用函数// debounce(mouseMove, 500) = function () { 2.3.4}</script>
</body>
</html>
4.2 节流 - throttle
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数
举个例子:
- 王者荣耀技能冷却,期间无法继续释放技能
- 和平精英 98k 换子弹期间不能射击
使用场景:
- 高频事件:鼠标移动
mousemove
、页面尺寸缩放resize
、滚动条滚动scroll
等等
4.2.1 案例:利用节流来处理 - 鼠标滑过盒子显示文字
要求:鼠标在盒子上移动,不管移动多少次,每隔500ms才 + 1
实现方式:
lodash
提供的节流函数
来处理手写
一个节流函数来处理
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head>
<body><div class="box"></div><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script><script>// 利用节流实现性能优化// 需求:鼠标在盒子上移动,里面的数字就会变化 + 1const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++// 如果里面存在大量消耗性能的代码,比如dom操作,比如数据处理,可能造成卡顿}// box.addEventListener('mousemove', mouseMove)// 利用lodash库实现节流 - 500毫秒之后采取+1// 语法: _.throttle(fun, 时间)box.addEventListener('mousemove', _.throttle(mouseMove, 3000))</script>
</body>
</html>
4.2.2 案例:利用节流来处理 - 鼠标滑过盒子显示文字(手写节流函数)
要求:鼠标在盒子上移动,不管移动多少次,每隔500ms才 + 1
核心思路:
节流的核心就是利用定时器(steTimeout
)来实现
①:声明一个定时器变量
②:当鼠标每次滑动都先判断是否有定时器了,如果有定时器则不开启新定时器
③:如果没有定时器则开启定时器,记得存到变量里面
- 定时器里面调用执行的函数
- 定时器里面要把定时器清空
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head>
<body><div class="box"></div><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script><script>// 利用节流实现性能优化// 需求:鼠标在盒子上移动,里面的数字就会变化 + 1const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++// 如果里面存在大量消耗性能的代码,比如dom操作,比如数据处理,可能造成卡顿}// box.addEventListener('mousemove', mouseMove)// 利用lodash库实现节流 -// 语法:_.throttle(fun, 时间)// box.addEventListener('mousemove', _.throttle(mouseMove, 3000))// 手写一个节流函数- 每隔 500ms + 1// 节流的核心就是利用定时器(setTimeout) 来实现// 1. 声明一个定时器变量// 2. 当鼠标每次滑动都先判断是否有定时器了,如果有定时器则不开启新定时器// 3. 如果没有定时器则开启定时器,记得存到变量里面// 3.1 定时器里面调用执行的函数// 3.2 定时器里面要把定时器清空function throttle(fn, t) {let timer = nullreturn function () {if (!timer) {timer = setTimeout(function () {fn()// 清空定时器timer = null}, t)}}}box.addEventListener('mousemove', throttle(mouseMove, 3000))</script>
</body>
</html>
4.3 防抖和节流总结
性能优化 | 说明 | 使用场景 |
---|---|---|
防抖 | 单位时间内,频繁触发事件,只执行最后一次 | 搜索框搜索输入、手机号、邮箱验证输入检测 |
节流 | 单位时间内,频繁触发事件,只执行一次 | 高频事件:鼠标移动 mousemove 、页面尺寸缩放 resize 、滚动条滚动 scroll 等等 |
5 节流综合案例
5.1 案例:页面打开,可以记录上一次的视频播放位置
分析:
两个事件:
①:ontimeupdate
事件在视频/音频(audio/video)当前的播放位置发送改变时触发
②:onloadeddata
事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发
谁需要节流?
ontimeupdate
,触发频次太高了,我们可以设定1秒钟触发一次
思路:
- 在
ontimeupdate
事件触发的时候,每隔1秒钟,就记录当前时间到本地存储 - 下次打开页面,
onloadeddata
事件触发,就可以从本地存储取出时间,让视频从取出的时间播放,如果没有就默认为0S - 获得当前时间
video.currentTime
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="referrer" content="never" /><title>综合案例</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.container {width: 1200px;margin: 0 auto;}.video video {width: 100%;padding: 20px 0;}.elevator {position: fixed;top: 280px;right: 20px;z-index: 999;background: #fff;border: 1px solid #e4e4e4;width: 60px;}.elevator a {display: block;padding: 10px;text-decoration: none;text-align: center;color: #999;}.elevator a.active {color: #1286ff;}.outline {padding-bottom: 300px;}</style>
</head>
<body><div class="container"><div class="header"><a href="http://pip.itcast.cn"><img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" /></a></div><div class="video"><video src="https://v.itheima.net/LapADhV6.mp4" controls></video></div><div class="elevator"><a href="javascript:;" data-ref="video">视频介绍</a><a href="javascript:;" data-ref="intro">课程简介</a><a href="javascript:;" data-ref="outline">评论列表</a></div></div><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script><script>// 1. 获取元素 要对视频进行操作const video = document.querySelector('video')video.ontimeupdate = _.throttle(() => {// console.log(video.currentTime) // 获得当前的视频时间// 把当前的时间存储到本地存储localStorage.setItem('currentTime', video.currentTime)}, 1000)// 打开页面触发事件,就从本地存储里面取出记录的时间, 赋值给 video.currentTimevideo.onloadeddata = () => {// console.log(111)video.currentTime = localStorage.getItem('currentTime') || 0}</script>
</body>
</html>