JavaScript进阶-高阶技巧

文章目录

高阶技巧
- 深浅拷贝
- - 浅拷贝
  - 深拷贝
- 异常处理
- - throw抛异常
  - try/caych捕获异常
  - debugger
- 处理this
- - this指向
  - 改变this
- 性能优化
- - 防抖
  - 节流

高阶技巧

深浅拷贝

只针对引用类型

浅拷贝

拷贝对象后，里面的属性值是简单数据类型直接拷贝值，如果属性值是引用数据类型则拷贝的是地址
常见语法：
1.拷贝对象：Object.assgin(新变量,被拷贝对象)或const 变量名 = {...对象}
2.拷贝数组：Array.prototype.concat()或[...arr]
注意：如果是简单数据类型拷贝值，引用数据类型拷贝的是地址（如果是单层对象没有问题，如果是多层对象就有问题）

深拷贝

拷贝的是对象，不是地址
常见方法：

通过递归实现深拷贝
函数递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数
由于递归容易发生“栈溢出”错误。所以必须要加退出条件return

const obj = {uname:'pink',age:18,hobby:['乒乓球','足球'],family:{baby:'xiaop'}
}
const o = {}
// 拷贝函数
// 深拷贝，拷贝的新对象不会影响旧对象，遇到数组和对象就再次调用递归函数，先数组再对象
function deepCopy(newObj,oldObj) {for(let k in oldObj) {// 一定先写数组，在写对象，因为万物皆对象// 处理数组的问题if (oldObj[k] instanceof Array) {newObj[k] = []// 函数递归deeepCopy(newObj[k],oldObj[k])} // 处理对象的问题else if (oldObj[k] instanceof Object) {newObj[k] = {}deepCopy(newObj[k],oldObj[k])} else {// k属性名，oldObj[k]属性值// newObj[k] === o.unamenewObj[k] = oldObj[k]}}
}
deepCopy(o,obj)// 函数调用两个参数
o.age = 20
console.log(o)
o.hobby[0] = '篮球'
o.family.baby = 'oldp'
console.log(obj)

lodash/cloneDeep
JavaScript库lodash里面cloneDeep内部实现了深拷贝
语法：const deep = _.cloneDeep(object)

<!-- 先引用 -->
<script src="./lodash.min.js"></script>
<script>const obj = {uname:'pink',age:18,hobby:['乒乓球','足球'],family:{baby:'xiaop'}}const o = _.cloneDeep(obj)o.family.baby = 'oldp'console.log(obj)
</script>

通过JSON.stringfy()实现

const obj = {uname:'pink',age:18,hobby:['乒乓球','足球'],family:{baby:'xiaop'}
}
// JSON.stringify() 把对象转换为JSON字符串
// JSON.parse() 把JSON字符串转换为对象
const o = JSON.parse(JSON.stringify(obj))
o.family.baby = 'oldp'
console.log(obj)

异常处理

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行

throw抛异常

1.throw抛出异常信息，程序也会终止执行
2.throw后面跟的是错误提示信息
3.Error对象配合throw使用，能够设置更详细的错误信息

function fn(x,y) {if (!x || !y) {// throw '没有参数传递进来'throw new Error('没有参数传递进来')}return x + y
}

try/caych捕获异常

通过try/catch捕获错误信息（浏览器提供的错误信息）
1.try…catch用于捕获错误信息
2.将预估可能发生了错误的代码写在try代码段中
3.如果try代码段中出现错误后，会执行catch代码段，并截获到错误信息
4.finally不管是否错误，都会执行

function fn() {try {// 可能发生错误的代码要写到tryconst p = document.querySelector('.p')p.style.color = 'red'  } catch (err) {// 拦截错误，提示浏览器提供的错误信息，但是不中断程序的执行console.log(err.message)// 需要return中断程序，可以用throw代替throw new Error('错误')} finally {// 不管你程序对不对，一定会执行的代码alert('弹出对话框')}
}

debugger

在代码中需要调试的地方写debugger，打开控制台后自动来到debugger的位置，类似于断点
在这里插入图片描述

处理this

this指向

普通函数
普通函数的调用方式决定了this的值，即谁调用就指向谁
普通函数没有明确调用者时this值为window，严格模式下没有调用者时this的值为undefined
箭头函数
箭头函数中的this与普通函数完全不同，也不受调用方式影响，事实上箭头函数中并不存在this
1.箭头函数会默认帮我们绑定外层this的值，所以在箭头函数中this的值和外层的this是一样的
2.箭头函数中的this引用的就是最近作用域中的this
3.向外层作用域中，一层一层查找this，直到有this的定义
注意：
1.在开发中使用箭头函数前需要考虑函数中this的值，事件回调函数使用箭头函数时，this为全局变量时，this为全局的window
因此DOM事件回调函数如果里面需要DOM对象的this，则不推荐使用箭头函数
2.同样由于箭头函数this的原因，基于原型的面向对象也不推荐采用箭头函数

改变this

call()
使用call()方法调用函数，同时指定被调用函数中的this的值
语法：fn.call(thisArg,arg1,arg2,...)
thisArg：在fn函数运行时指定的this值
arg1，arg2：传递的其他参数
返回值就是函数的返回值，因为它就是调用函数
apply()
使用apply()方法调用函数，同时指定被调用函数中的this的值
语法：fn.apply(thisArg,[argsArray])
thisArg：在fn函数运行时指定的this值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
因此apply()主要跟数组有关系，比如使用Math.max()求数组的最大值

const obj = {age:18
}
function fn(x,y) {console.log(this)// {age:18}console.log(x + y)// 3
}
// 调用函数
// 改变this指向
fn.apply(obj,[1,2])
// 3.返回值 就是函数的返回值// 使用场景：求数组最大值
const arr = [1,2,3]
const max = Math.max.apply(Math,arr)
// console.log(Math.max(...arr))
console.log(max)// 3

bind()（重点）
bind()方法不会调用函数，但是能改变函数内部this指向
语法：fn.bind(thisArg,arg1,arg2...)
thisArg：在fn函数运行时指定的this的值
arg1，arg2：传递的其他参数
返回由指定的this值和初始化参数改造的原拷贝函数（新函数）
因此当我们只是想改变this指向，并且不想调用这个函数的时候，可以使用bind，比如改变计时器内部的this指向

const obj = {age:18
}
function fn() {console,log(this)
}
// 返回值是个函数，但是这个函数里面的this是更改过的
const fn = fn.bind(obj)
// console.log(fn)
fn()// {age:18}

<body><button>发送</button><script>// 需求，有一个按钮，点击里面就禁用，2秒钟之后开始const btn = document.querySelector('button')btn.addEventListener('click', function() {// 禁用按钮this.display = true//this指向btnsetTimeout(function() {// 在这个普通函数里面，要this由原来的window改为btnthis.disabled = false}.bind(this),2000)//这个this是上面指向btn的this})</script>
</body>

性能优化

防抖

防抖：单位时间内，频繁触发事件，只执行最后一次
使用场景：
1.搜索框搜索输入。只需要用户最后一次输入完，再发送请求
2.手机号、邮箱验证输入检测
在这里插入图片描述
常用方法：

lodash提供的防抖来处理
语法：_.debounce(func,[wait=0],[options=])
func：要防抖的函数
[wait=0]：需要延迟的毫秒数
[options=]：选项对象
手写防抖函数
核心思路：利用定时器（setTimeout）来实现

例如：

<style>.box {width:500px;height:500px;background-color:#ccc;color:#fff;text-align:center;font-size:100px;}
</style>
<body><div class="box"></div><script src='./lodash.min.js'><script>// 利用防抖实现性能优化// 需求：鼠标在盒子上移动，里面的数字就会变化+1const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++// 如果里面存在大量消耗性能的代码，比如DOM操作、数据处理，可能造成卡顿}// 添加事件// box.addEventListener('mousemove',mouseMove)// 利用lodash库实现防抖 500毫秒之后+1box.addEventListener('mousemove',_.debounce(mouseMove,500))// 手写函数部分// 1.声明定时器变量// 2.每次鼠标移动（事件触发）的时候都要先判断是否有定时器，如果有先清除以前的定时器// 3.如果没有定时器，则开启定时器，存入到定时器变量里面// 4.定时器里面写函数调用function debounce(fn,t) {let timer// return返回一个匿名函数return function() {if(timer) {clearTimeout(timer)}	timer = setTimeout(function() {fn()//加小括号调用fn函数},t)	}}box.addEventListener('mousemove',debounce(mouseMove,500))</script>
</body>

节流

节流：单位时间内，频繁触发事件，只执行一次
使用场景：
高频事件：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll
在这里插入图片描述
常用方法：

lodash提供的节流函数来处理
语法：_.throttle(func,[wait=0],[options=])
func：要节流的函数
[wait=0]：需要节流的毫秒数
[options=]：选项对象
[options.leading=true]：指定调用在节流开始前
[options.leading=false]：指定调用在节流结束后
手写一个节流函数来处理
核心思路：利用定时器（setTimeout）来实现

例如：

<style>.box {width:500px;height:500px;background-color:#ccc;color:#fff;text-align:center;font-size:100px;}
</style>
<body><div class="box"></div><script src='./lodash.min.js'><script>// 利用节流实现性能优化// 需求：鼠标在盒子上移动，里面的数字就会变化+1const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++// 如果里面存在大量消耗性能的代码，比如DOM操作、数据处理，可能造成卡顿}// 添加事件// box.addEventListener('mousemove',mouseMove)// 利用lodash库实现节流 500毫秒之后+1box.addEventListener('mousemove',_.throttle(mouseMove,500))// 手写函数部分// 1.声明一个定时器变量// 2.当鼠标每次滑动都先判断是否有定时器，如果有定时器则不开启新定时器// 3.如果没有定时器则开启定时器，记得存到变量里面// 3.1定时器里面调用执行的函数// 3.2定时器里面要把定时器清空function throttle(fn,t) {let timer = nullreturn function() {if(!timer) {timer = setTime(function() {fn()// 清空定时器// 在setTimeout中是无法删除定时器的，因为定时器还在运作，故不使用clearTimeront(timer)timer = null},t)}}}box.addEventListener('mousemove',throttle(mouseMove,500))</script>
</body>