深浅拷贝
浅拷贝
开发中我们经常需要复制一个对象或数组,如果直接使用赋值,当改变复制之后的对象或数组时,原对向也会改变,拷贝时我们需要改变复制之后的对象或数组的值,但不改变原对象或数组的值。
浅拷贝和深拷贝只针对引用类型
浅拷贝:拷贝的是地址
常见方法:
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老师视频所得!