JavaScript 进阶 - 第4天 （黑马笔记）

ops/2024/12/26 22:29:31/

JavaScript 进阶 - 第4天

目录

JavaScript 进阶 - 第4天

深浅拷贝

浅拷贝

深拷贝

递归实现深拷贝

js库lodash里面cloneDeep内部实现了深拷贝

JSON序列化

异常处理

throw

try ... catch

debugger

处理this

普通函数

箭头函数

改变this指向

call

apply

bind

防抖节流

深浅拷贝

浅拷贝

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

浅拷贝：拷贝的是地址

常见方法：

  1. 拷贝对象：Object.assgin() / 展开运算符 {...obj} 拷贝对象

  2. 拷贝数组：Array.prototype.concat() 或者 [...arr]

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解： 如果是单层对象，没问题，如果有多层就有问题)

深拷贝

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

深拷贝：拷贝的是对象，不是地址

常见方法：

  1. 通过递归实现深拷贝

  2. lodash/cloneDeep

  3. 通过JSON.stringify()实现

递归实现深拷贝

函数递归：

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数

  • 简单理解:函数内部自己调用自己, 这个函数就是递归函数

  • 递归函数的作用和循环效果类似

  • 由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return

javascript"><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>
js库lodash里面cloneDeep内部实现了深拷贝
javascript"><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>
JSON序列化
javascript"><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>

异常处理

了解 JavaScript 中程序异常处理的方法，提升代码运行的健壮性。

throw

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

总结：

  1. throw 抛出异常信息，程序也会终止执行

  2. throw 后面跟的是错误提示信息

  3. Error 对象配合 throw 使用，能够设置更详细的错误信息

javascript"><script>function counter(x, y) {
​if(!x || !y) {// throw '参数不能为空!';throw new Error('参数不能为空!')}
​return x + y}
​counter()
</script>

总结：

  1. throw 抛出异常信息，程序也会终止执行

  2. throw 后面跟的是错误提示信息

  3. Error 对象配合 throw 使用，能够设置更详细的错误信息

try ... catch

javascript"><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>

总结：

  1. try...catch 用于捕获错误信息

  2. 将预估可能发生错误的代码写在 try 代码段中

  3. 如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息

debugger

相当于断点调试

处理this

了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方法。

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

普通函数

普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】，如下代码所示：

javascript"><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。

箭头函数

箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。

javascript"><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事件回调函数不推荐使用箭头函数，如下代码所示：

javascript"><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 的原因，基于原型的面向对象也不推荐采用箭头函数，如下代码所示：

javascript"><script>function Person() {}// 原型对像上添加了箭头函数Person.prototype.walk = () => {console.log('人都要走路...')console.log(this); // window}const p1 = new Person()p1.walk()
</script>

改变this指向

以上归纳了普通函数和箭头函数中关于 this 默认值的情形，不仅如此 JavaScript 中还允许指定函数中 this 的指向，有 3 个方法可以动态指定普通函数中 this 的指向：

call

使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：

javascript"><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>

总结：

  1. call 方法能够在调用函数的同时指定 this 的值

  2. 使用 call 方法调用函数时，第1个参数为 this 指定的值

  3. call 方法的其余参数会依次自动传入函数做为函数的参数

apply

使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：

javascript"><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>

总结：

  1. apply 方法能够在调用函数的同时指定 this 的值

  2. 使用 apply 方法调用函数时，第1个参数为 this 指定的值

  3. apply 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数

bind

bind 方法并不会调用函数，而是创建一个指定了 this 值的新函数，使用方法如下代码所示：

javascript"><script>// 普通函数function sayHi() {console.log(this)}let user = {name: '小明',age: 18}// 调用 bind 指定 this 的值let sayHello = sayHi.bind(user);// 调用使用 bind 创建的新函数sayHello()
</script>

注：bind 方法创建新的函数，与原函数的唯一的变化是改变了 this 的值。

防抖节流

  1. 防抖（debounce）所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

<!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>const box = document.querySelector('.box')let i = 1  // 让这个变量++// 鼠标移动函数function mouseMove() {box.innerHTML = ++i// 如果里面存在大量操作 dom 的情况，可能会卡顿}// console.log(mouseMove)// 节流函数 throttle function throttle(fn, t) {// 起始时间let startTime = 0return function () {// 得到当前的时间let now = Date.now()// 判断如果大于等于 500 采取调用函数if (now - startTime >= t) {// 调用函数fn()// 起始的时间 = 现在的时间   写在调用函数的下面 startTime = now}}}box.addEventListener('mousemove', throttle(mouseMove, 500))// throttle(mouseMove, 500) === function () { console.log(1) }// box.addEventListener('mousemove', function () {//   // 得到当前的时间//   let now = Date.now()//   // 判断如果大于等于 500 采取调用函数//   if (now - startTime >= t) {//     // 调用函数//     fn()//     // 起始的时间 = 现在的时间   写在调用函数的下面//     startTime = now//   }// })</script>
</body></html>

  1. 节流（throttle）所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

<!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// 语法：_.throttle(fun,时间)// box.addEventListener('mousemove', _.throttle(mouseMove, 2000))//节流的核心就是利用定时器(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>


http://www.ppmy.cn/ops/130899.html

相关文章

BFH的原理及用法

BFH的原理及用法

“Block Finalization Hash”&#xff08;区块最终哈希值&#xff0c;BFH&#xff09;是区块链系统中确保数据完整性和不可篡改性的重要机制。它在区块链系统的区块打包、验证和确认流程中扮演着至关重要的角色。以下是BFH的原理及用法的详细解释&#xff1a; 1. BFH的原理 在…
阅读更多...
爬虫设计思路

爬虫设计思路

目录 设计思路1. 功能模块2. 技术栈3. 架构设计 实现步骤其他考虑 设计一个爬虫需要考虑多种网站结构和数据类型的适应性。以下是一个爬虫的设计思路&#xff0c;包括功能模块、架构和实现步骤&#xff1a; 设计思路 1. 功能模块 配置模块&#xff1a; 支持用户输入目标URL、数…
阅读更多...
技术债务如何影响新功能开发的效率

技术债务如何影响新功能开发的效率

累积的技术债务常常对新功能的开发造成显著影响。技术债务的增加、项目进度的延误、开发效率的降低是常见的问题。技术债务指的是在开发过程中采取的便捷但不理想的解决方案&#xff0c;虽然短期内可以加快交付速度&#xff0c;但长期来看&#xff0c;这种做法会导致代码质量下…
阅读更多...
Java入门10——封装（private）

Java入门10——封装（private）

小伙伴们大家好哇&#xff01;今天我们要学习封装~ 话不多说&#xff0c;开始今天的正题~ 1.为什么要封装 这个其实是因为当我们在写一个类的时候&#xff0c;这个类里面的东西你不想让人修改&#xff0c;这个时候&#xff0c;就提到了封装这个属性 2.通过关键字private实现…
阅读更多...
如何在社媒平台上使用代理IP来保护帐号安全

如何在社媒平台上使用代理IP来保护帐号安全

社媒平台如Facebook、Twitter、Instagram等&#xff0c;不仅是用户分享生活与信息的重要平台&#xff0c;也是各类网络攻击的目标。利用代理IP可以帮助使用者保护帐号安全&#xff0c;防止个人信息外泄和帐号被盗用的风险。 一、为什么需要使用代理IP保护社媒帐号&#xff1f;…
阅读更多...
iOS 18.2 可让欧盟用户删除App Store、Safari、信息、相机和照片应用

iOS 18.2 可让欧盟用户删除App Store、Safari、信息、相机和照片应用

升级到 iOS 18.2 之后&#xff0c;欧盟的 iPhone 用户可以完全删除一些核心应用程序&#xff0c;包括 App Store、Safari、信息、相机和 Photos 。苹果在 8 月份表示&#xff0c;计划对其在欧盟的数字市场法案合规性进行更多修改&#xff0c;其中一项更新包括欧盟用户删除系统应…
阅读更多...
SpringBoot环境下的学生请假管理平台开发

SpringBoot环境下的学生请假管理平台开发

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…
阅读更多...
Linux：编辑器Vim和Makefile

Linux：编辑器Vim和Makefile

✨✨所属专栏&#xff1a;Linux✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ vim的三种常用模式 分别是命令模式&#xff08;command mode&#xff09;、插入模式&#xff08;Insert mode&#xff09;和底行模式&#xff08;last line mode&#xff09; 各模式的功能区分如下&…
阅读更多...
最新文章

Copyright @ 2022~2023