深浅拷贝
浅拷贝
开发中我们经常需要复制一个对象或数组，如果直接使用赋值，当改变复制之后的对象或数组时，原对向也会改变，拷贝时我们需要改变复制之后的对象或数组的值，但不改变原对象或数组的值。
浅拷贝和深拷贝只针对引用类型
浅拷贝：拷贝的是地址
常见方法：
1.拷贝对象：Object.assign()/展开运算符{...obj}拷贝对象
2.拷贝数组：Array.prototype.concat()或者[...arr]
如果简单数据类型拷贝值，引用数据类型拷贝的是地址（简单理解，如果是单层对象，没问题，如果是多层对象就有问题）
const obj={
uname:'pink',
age:18,
family:{
baby:'小pink'
}
}
// const o=obj
// console.log(o)
// o.age=20
// console.log(o)
// console.log(obj)
// 浅拷贝
// const o={...obj}
// console.log(o)
// o.age=20
// console.log(o)
// console.log(obj)
const o={}
Object.assign(o,obj)
o.age=20
o.family.baby='老pink'
console.log(o)
console.log(obj)//obj里的family里的baby也改变了直接赋值和浅拷贝的区别：
- 直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对象栈里面的地址
- 浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还会相互影响
深拷贝（不改变原来对象或数组的值）
深拷贝拷贝的是对象，不是地址
常见方法：
1.通过递归实现深拷贝
函数递归：
如果一个函数内部可以调用其本身，那么这个函数就是递归函数
- 简单理解：函数内部自己调用自己，这个函数就是递归函数
- 递归函数的作用和循环效果类似
- 由于递归很容易发生”栈溢出“错误（stack overflow）,所以必须加退出条件 return
let i=1
function fn(){
console.log(`这是第${i}次`)
if(i>=6){
return
}
i++
fn()
}
fn()利用递归函数实现setTimeout模拟setInterval效果
需求：
- 页面每隔一秒输出当前的时间
- 输出当前时间可以使用：new Date().toLocaleString()
function getTime(){
document.querySelector('div').innerHTML=new Date().toLocaleString()
setTimeout(getTime,1000)//1s之后执行该函数
}
getTime()2.lodash/cloneDeep
const obj={
uname:'pink',
age:18,
hobby:['乒乓球','足球']
}
const o={}
//拷贝函数
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 {
//k属性名 oldObj[k] 属性值
// newObj[k]===o.uname
newObj[k]=oldObj[k]//不可使用点 点为添加属性，而k是一个变量
}
}
}
deepCopy(o,obj)//函数调用 两个参数o 新对象 obj 旧对象
console.log(o)
o.age=20
o.hobby[0]='篮球'
console.log(obj)jsloadsh里面cloneDeep内部实现了深拷贝
const obj={
uname:'pink',
age:18,
hobby:['乒乓球','足球'],
family:{
baby:'小pink'
}
}
const o=_.cloneDeep(obj)
console.log(o)
o.family.baby='老pink'
console.log(obj)3.通过JSON.stringify()实现
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)异常处理
throw抛异常
异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致争个程序无法继续运行
总结:
- throw抛出异常信息，程序也会终止执行
- throw后面跟的是错误提示信息
- Error对象配合throw使用，能够设置更详细的错误信息
function fn(x,y){
if(!x||!y){
throw '没有参数传递进来'
throw new Error('没有参数传递进来')
}
return x+y
}
console.log(fn())try/catch捕获异常
我们可以通过try/catch捕获错误信息（浏览器提供的错误信息）try试试 catch拦住 finally 最后
总结：
- try...catch用于捕获错误信息
- 将预估可能发生错误的代码写在try代码段中
- 如果try代码段中出现错误后，会执行catch代码段，并截获到错误信息
- finally不管是否有错误，都会执行
function fn(){
try{
// 可能发送错误的代码 要写到try里面
const p=document.querySelector('.p')
p.style.color='red'
}catch(err){
// 拦截错误 提示浏览器提供的错误信息 但是不中断程序的执行
console.log(err.message)
throw new Error('你看看，选择器错误了吧')
// 需要加return中断程序
// return
}
finally{
//不管程序对不对，一定会执行的代码
alert('弹出对话框')
}
}debugger
在代码中间添加debugger，运行时会自动进入调试阶段
处理this
this指向
普通函数的调用方式决定了this的值，即谁调用this的值指向谁
普通函数没有明确调用者时this值为window，严格模式下没有调用者时this地值为undefined
// 普通函数谁调用就指向谁
console.log(this)//window
function fn(){
console.log(this)//window
}
window.fn()
widow.setTimeout(function(){
console.log(this)//window
},1000)
document.querySelector('button').addEventListener('click',function(){
console.log(this)//指向button
})
const obj={
sayHi:function(){
console.log(this)//指向obj
}
}
obj.sayHi()箭头函数中的this与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在this
- 箭头函数会默认帮我们绑定外层this的值，所以在箭头函数中this的值和外层的this是一样的
- 箭头函数中的this引用的就是最近作用域中的this
- 向外层作用域中，一层一层查找this，知道有this的定义
注意1：在开发中【使用箭头函数前要考虑函数中this的值】，事件回调函数使用箭头函数时，this为全局的window，因此DOM事件回调函数如果需要DOM对象的this，则不推荐使用箭头函数
注意2：同样由于箭头函数this的原因，基于原型的面向对象也不推荐采用箭头函数
总结：
- 函数内不存在this，沿用上一级的
- 不适用：构造函数，原型函数，字面量对象中函数，dom事件函数等等
- 适用：需要使用上层this的地方
改变this
JavaScript中还允许指定函数中this的指向，有3个方法可以动态指定普通函数中this的指向
- call()
使用call方法调用函数，同时指定被调用函数中this的值
语法：
fun.call(thisArg,arg1,arg2,...)
- thisArg:在fun函数运行时指定的this值
- arg1，arg2：传递的其他参数
- 返回值就是函数的返回值，因为他就是调用函数
const obj={
uname:'pink'
}
function fn(x,y){
console.log(this)//window
console.log(x+y)
}
// 1.调用函数
// 2.改变this指向
fn.call(obj,1,2)//将fn this指向obj，并向fn中传入实参1，2- apply()
使用apply方法调用函数，同时指定被调用函数中this的值
语法：
fun.apply(thisArg,[argsArray])
- thisArg：在fun函数运行时指定的this值
- argsArray:传递的值，必须包含在数组里面，传入的实参必须是数组
- 返回值就是函数的返回值，因为它就是调用函数
- 因此apply主要跟数组有关系，比如使用Math,max()求数组的最大值
const obj={
age:18
}
function fn(x,y){
console.log(this)//{age:18}
console.log(x+y)
}
// 1.调用函数
// 2.改变this指向
fn.apply(obj,[1,2])//改变this指向obj并且传入一个数组，但是要用参数为数组的长度来接收
// 3.返回值 本身就是在调用函数 所以返回值就是函数的返回值
// 使用场景：求数组的最大值
const arr=[100,44,77]
const max=Math.max.apply(Math,arr)
const min=Math.min.apply(Math,arr)
console.log(max,min)
console.log(Math.max(...arr))
//求数组最大值的方法 遍历for循环 使用apply 使用展开运算符call和apply的区别
- 都是调用函数，都能改变this的指向
- 参数不一样，apply传递的必须是数组
- bind()
bind()方法不会调用函数，但是能改变函数内部this指向
语法：
fun.bind(thisArg,arg1,arg2,...)
- thisArg:在fun函数运行时指定的this值
- arg1，arg2：传递的其他参数
- 返回由指定的this值和初始化参数改造的原函数拷贝(新函数)
- 因此当我们只是想改变this指向，并且不想调用这个函数的时候，可以使用bind，比如改变定时器内部的this指向
const obj={
age:18
}
function fn(){
console.log(this)
}
// 1.bind不会调用函数
// 2.能改变this指向
// 3.返回值是个函数 但是这个函数里面的this是更改过的obj
const fun=fn.bind(obj)
console.log(fun)
fun()
// 需求 有一个按钮 点击里面就禁用 2秒钟之后开启
const btn=document.querySelector('button')
btn.addEventListener('click',function(){
// 禁用按钮
this.disabled=true
window.setTimeout(function(){//匿名函数this指向window
// 在这个函数里面 我们要this由原来的window改为btn
this.disabled=false
}.bind(this),2000)
})
call apply bind总结
相同点：都可以改变函数内部的this指向
区别点：
- call和apply会调用函数，并且改变函数内部this指向
- call传递参数arg1,arg2...形式，apply必须使用数组形式[arg]
- bind不会调用函数，可以改变函数内部this指向
主要应用场景：
- call调用函数并且可以传递参数
- apply经常跟数组有关系，比如借助于数组对象实现数组最大值和最小值
- bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向
性能优化
防抖(debounce)
防抖：单位时间内，频繁触发事件，只执行最后一次
使用场景：
- 搜索框搜索输入，只需用户最后一次输入完，再发送请求
- 手机号，邮箱验证输入检测
利用防抖来处理-鼠标滑过盒子显示文字
要求：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字才会变化+1
实现方式：
1.loadsh提供的防抖来处理
<!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="../js进阶知识点/lodash.min.js"></script>
<script>
// 利用防抖实现性能优化
// 需求：鼠标在盒子上移动，里面的数字就会变化
const box=document.querySelector('.box')
let i=1
function mouseMove(){
box.innerHTML=i++
}
// 添加事件
// box.addEventListener('mousemove',mouseMove)
// 利用Lodash库实现防抖-500ms之后采取+1
// 语法：_.deboumce(fun,时间)
box.addEventListener('mousemove',_.debounce(mouseMove,500))
</script>
</body>
</html>2.手写一个防抖函数处理
核心思路：防抖的核心思路就是利用定时器(setTimeout)l来实现
- 声明一个定时器变量
- 当鼠标每次滑动都先判断是否有定时器了，如果有定时器先清除以前的定时器
- 如果没有定时器，则开启定时器，记得存到变量里面
- 在定时器里面调用要执行的函数
// 利用防抖实现性能优化
// 需求：鼠标在盒子上移动，里面的数字就会变化
const box=document.querySelector('.box')
let i=1
function mouseMove(){
box.innerHTML=i++
}
function debounce(fn,t){
let timer
return function(){
//2.3.4
if(timer)clearTimeout(timer)
timer=setTimeout(function(){
fn()//加小括号调用fn函数
},t)
}
}
box.addEventListener('mousemove',debounce(mouseMove,500))
节流-throttle
节流：单位时间内，频繁触发事件，只执行一次
使用场景：高频事件：鼠标移动 mousemove、页面尺寸缩放 resize、滚动条滚动scroll等
利用节流来处理-鼠标滑过盒子显示文字
要求：鼠标在盒子上移动，不管移动多少次，每隔500ms才+1
实现方式：
1.lodash提供的节流函数来处理
// 利用lodash库实现节流 500ms之后采取+1
// 语法：_.throttle(fun,时间)
box.addEventListener('mousemove',_.throttle(mouseMove,2000))//2s之内最多执行一次函数，不管滑动多少次2.手写一个节流函数来处理
鼠标在盒子上移动，不管移动多少次，每隔500ms才+1
核心思路：
节流的核心就是利用定时器（setTimeout）来实现
- 声明一个定时器变量
- 当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新的定时器
- 如果没有定时器则开启定时器，记得存到变量里面
- 定时器里面调用执行的函数
- 定时器里面要把定时器清空
// 利用防抖实现性能优化
// 需求：鼠标在盒子上移动，里面的数字就会变化
const box=document.querySelector('.box')
let i=1
function mouseMove(){
box.innerHTML=i++
}
// 添加事件
// box.addEventListener('mousemove',mouseMove)
// 利用Lodash库实现防抖-500ms之后采取+1
// 语法：_.deboumce(fun,时间)
// box.addEventListener('mousemove',_.debounce(mouseMove,500))
// 手写防抖函数
// 核心是利用setTimeout定时器来实现
// function debounce(fn,t){
// let timer
// return function(){
// //2.3.4
// if(timer)clearTimeout(timer)
// timer=setTimeout(function(){
// fn()//加小括号调用fn函数
// },t)
// }
// }
// box.addEventListener('mousemove',debounce(mouseMove,500))
///
// 利用lodash库实现节流 500ms之后采取+1
// 语法：_.throttle(fun,时间)
// box.addEventListener('mousemove',_.throttle(mouseMove,2000))//2s之内最多执行一次函数，不管滑动多少次
function throttle(fn,t){
let timer=null
return function(){
if(!timer){
timer=setTimeout(function(){
fn()
// 在定时器里面清除定时器
//清空定时器当函数执行完毕之后再清除定时器
timer=null
// 在setTimeout中是无法删除定时器的，因为定时器还在运作，所以使用timer=null
},t)
}
}
}
box.addEventListener('mousemove',throttle(mouseMove,2000))防抖和节流总结
| 性能优化 | 说明 | 使用场景 |
|---|---|---|
| 防抖 | 单位时间内，频繁触发事件，只执行最后一次 | 搜索框搜索输入，邮箱验证输入检测 |
| 节流 | 单位时间内，频繁触发事件，只执行一次 | 高频事件：鼠标移动mousemove,页面尺寸缩放resize、滚动条滚动scroll等等 |
综合案例
页面打开，可以记录上一次的视频播放位置
分析：
两个事件：
- ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发
- onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频的下一帧时触发
思路：
- 在ontimeupdate事件触发的时候，每隔一秒钟，就记录当前时间到本地存储
- 下次打开页面，onloadeddata事件触发，就可以从本地存储取出时间，让视频从取出的时间播放，如果没有就默认为0s
- 获得当前时间 video.currentTime
// 1.获取元素 要对视频进行操作
const video=document.querySelector('video')
// 当前播放位置发生改变时触发
// video.ontimeupdate=function(){
// console.log(11)
// }
video.ontimeupdate=_.throttle(()=>{
console.log(video.currentTime)//获得当前的时间
localStorage.setItem('currentTime',video.currentTime)//把当前的时间存储到本地存储中
},1000)//1s之后调用一次函数
// 打开页面触发事件，就从本地存储里面取出记录的时间，赋值给vodeo.currentTime
video.onloadeddata=()=>{
// console.log(111)
video.currentTime=localStorage.getItem('currentTime')||0//前面为假就执行后面的代码
}以上笔记均为学习哔站pink老师视频所得！
