JS进阶 4——深浅拷贝、异常处理、节流防抖

JS进阶 4——深浅拷贝、异常处理、节流防抖

1.深浅拷贝

  • 直接复制对象的问题
const obj = {uname: 'xiao',age: '18'}const o = objo.age = 20console.log(o)
//原来对象的age也被彻底改变了console.log(obj)

  • 浅拷贝——内部引用仍然拷贝的是地址

    • 拷贝对象：Object.assdin()或{…obj}
    • 拷贝数组：Array.prototype.concat()或{…arr}
    //拷贝对象
const obj = {uname: 'xiao',age: '18'}//第一种方法const o1 = { ...obj }//第二种方法const o2 = {}Object.assign(o, obj)
    • 问题：只能拷贝最外层，只能防止最外层的属性复制后被更改：
    const obj = {uname: 'xiao',age: '18',family: {baby: '小小怪'}}
const o = { ...obj }o.age = 20o.family.baby = '大大怪'console.log(o)console.log(obj)//obj中的family中的baby被改变了

  • 深拷贝——拷贝对象

    • 通过递归实现深拷贝

       const obj = {uname: 'pink',age: 18,hobby: ['兵乓球', '足球'],family: {baby: '小小怪'}}const o = {}//拷贝function deepCopy(newObj, oldObj) {//k:属性名 不能使用newObj.kfor (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 {newObj[k] = oldObj[k]}}deepCopy()}deepCopy(o, obj)console.log(o)

    • JS库lodash里面cloneDeep()

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

    • 通过JSON.stringify(实现)

       const obj = {uname: 'pink',age: 18,hobby: ['兵乓球', '足球'],family: {baby: '小小怪'}}//将对象转换为JSON字符串//  JSON.stringify(obj)//将字符串转化为对象// JSON.parse(JSON.stringify(obj))//先转化为字符串，在转换为对象，是一个新的对象不指向原来的对象const o = JSON.parse(JSON.stringify(obj))console.log(o)o.family.baby = '123'console.log(obj)

2.异常处理

  • throw抛异常

    • 异常处理指提前预估代码执行中可能出现的错误，然后最大程度的避免错误的发生

       function counter(x, y) {if (!x || !y) {throw new Error('参数不能为空！')//发生异常程序会中断，抛出异常}return x + y}counter()
      • throw抛出异常信息，程序会终止执行
      • throw后面跟的是错误提示信息
      • Error对象配合throw使用，能够设置更详细的错误信息

  • try/catch捕获异常

      function fn() {try {//可能错误的代码const p = document.querySelector('.p')p.style.color = 'red'} catch (err) {//拦截错误，提示浏览器提供的错误信息，不中断程序的执行console.log(err.message)//配合throw使用throw new Error('选择器错啦~')//加return 中断程序// return}finally {//无论程序对不对，都要执行的代码alert('弹出对话框')}}fn()
    • 用于捕获错误信息
    • 将预估可能发生错误的代码写在try代码段中
    • try代码段出现错误，会执行catch代码段
    • finally不管是否有错误都会执行

  • debugger:设置断点，调试代码

3.this指向

  • 普通函数this指向：谁调用指向谁

  • 箭头函数：本身没有this，是最近一级的this指向

  • 注意事项：

    • 如果要使用this，就不要使用箭头函数
    • 构造函数、原型函数、DOM事件函数不适用箭头函数

  • 改变this

    • call()：调用函数，并指定被调函数中this的值

      • 函数名.call(thisArg，参数1，参数2…)
      const obj = {uname: '小小怪'}function fn(x, y) {console.log(this)console.log(x + y)}//第一个值指向this的指向，后面的参数是传递的参数fn.call(obj, 1, 2) // obj,3

    • apply()：调用函数，同时指定被调函数中this的值,第二个参数为数组

      • 函数名.apply(thisArg，[argsArray]）
      const obj = {uname: '小小怪'}function fn(x, y) {console.log(this)console.log(x + y)}//第一个值指向this的指向，后面的参数是传递的参数fn.apply(obj, [1, 2]) // obj,3

    • bind()：不会调用函数，只改变this指向

      • 函数名.bind(thisArg，参数1，参数2…)
      • 使用场景
        //按钮点击后禁用，两秒开启const btn = document.querySelector('button')btn.addEventListener('click', function () {this.disabled = truewindow.setTimeout(function () {this.disabled = false}.bind(btn), 2000)})

4.防抖debounce

  • 防抖：单位之间内，频繁触发事件，只执行最后一次（王者荣耀回城）

  • 实现方式：

    • lodash库提供的防抖
      • _debounce(func,[wait=0],[option=])：延迟wait值后调用func函数
     <div class="box"></div><script src="./lodash.min.js"></script><script>const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++}//500毫秒之后采取+1box.addEventListener('mousemove', _.debounce(mouseMove, 500))</script>
    • 手写一个防抖函数来处理——setTimeout
     const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++}function debounce(fn, t) {let timerreturn function () {if (timer) clearTimeout(timer)timer = setTimeout(function () {fn()}, t)}}//500毫秒之后采取+1box.addEventListener('mousemove', _.debounce(mouseMove, 500))

5.节流-throttle

  • 节流：单位时间内，频繁触发事件，只执行一次（王者荣耀技能冷却）

  • 实现方式

    • lodash提供的节流函数来处理

      const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++}//500毫秒之后采取+1box.addEventListener('mousemove', _.throttle(mouseMove, 3000))

    • 手写一个节流函数来处理

      const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++}function throttle(fn, t) {let timer = nullreturn function () {if (!timer) {timer = setTimeout(function () {fn()timer = null}, t)}}}//500毫秒之后采取+1box.addEventListener('mousemove',_.throttle(mouseMove, 3000))

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/438652.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[C语言]--编译和链接

[C语言]--编译和链接

文章目录 目录 文章目录 前言 一、环境介绍 二、翻译环境 1.预处理&#xff08;预编译&#xff09; 2.编译 3.汇编 4.链接 三、运行环境 前言 对编译和链接 进行简单的介绍 一、环境介绍 在ANSIC的任何⼀种实现中&#xff0c;存在两个不同的环境。 翻译环境&#xff0c;在这…
阅读更多...
flutter_鸿蒙next（win）环境搭建

flutter_鸿蒙next（win）环境搭建

第一步 拉取鸿蒙版本flutterSDK仓库 仓库地址&#xff1a;OpenHarmony-SIG/flutter_flutter 第二步 找到拉取的仓库中的README.md 并根据说明配置环境 第三步 配置好环境变量之后 用管理员开启cmd 输入&#xff1a;flutter dcotor 并查看此时flutter所支持的系统 包括&…
阅读更多...
《深度学习》OpenCV 图像拼接 原理、参数解析、案例实现

《深度学习》OpenCV 图像拼接 原理、参数解析、案例实现

目录 一、图像拼接 1、直接看案例 图1与图2展示&#xff1a; 合并完结果&#xff1a; 2、什么是图像拼接 3、图像拼接步骤 1&#xff09;加载图像 2&#xff09;特征点检测与描述 3&#xff09;特征点匹配 4&#xff09;图像配准 5&#xff09;图像变换和拼接 6&am…
阅读更多...
【若依】postman调试出现认证失败，无法访问系统资源

【若依】postman调试出现认证失败，无法访问系统资源

如果前后端都已经连接通了&#xff0c;但是调试出现错误代码&#xff0c;可能是因为没有授权的问题&#xff0c;需要获得授权。 授权内容在cookie中 把cookie中的token内容粘贴到postman里面 这个时候再在postman里测试接口&#xff0c;发现可以拿到数据了
阅读更多...
pytorch之梯度累加

pytorch之梯度累加

1.什么是梯度&#xff1f; 梯度可以理解为一个多变量函数的变化率&#xff0c;它告诉我们在某一点上&#xff0c;函数的输出如何随输入的变化而变化。更直观地说&#xff0c;梯度指示了最优化方向。 在机器学习中的作用&#xff1a;在训练模型时&#xff0c;我们的目标是最小…
阅读更多...
TransFormer 视频笔记

TransFormer 视频笔记

TransFormer BasicsAttention单头注意力 single head attentionQ&#xff1a; query 查寻矩阵 128*12288K key matrix 128*12288SoftMax 归一 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/19e3cf1ea28442eca60d5fc1303921f4.png)Value matrix 12288*12288 MLP Bas…
阅读更多...
【Linux】进程地址空间、环境变量：从理论到实践（三）

【Linux】进程地址空间、环境变量：从理论到实践（三）

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;Linux 目录 &#x1f680; 前言一&#xff1a;&#x1f525; 环境变量 &#x1f95d; 基本概念&#x1f95d; 常见环境变量&#x1f95d; 查看环境变量方法 二&#xff1a;&#x1f525; 测试 &…
阅读更多...
前端算法合集-1（含面试题）

前端算法合集-1（含面试题）

(这是我面试一家中厂公司的二面算法题) 数组去重并按出现次数排序 题目描述: 给定一个包含重复元素的数组&#xff0c;请你编写一个函数对数组进行去重&#xff0c;并按元素出现的次数从高到低排序。如果次数相同&#xff0c;则按元素值从小到大排序。 let arr [2, 11,10, 1…
阅读更多...
GPTQ vs AWQ vs GGUF（GGML） 速览和 GGUF 文件命名规范

GPTQ vs AWQ vs GGUF（GGML） 速览和 GGUF 文件命名规范

简单介绍一下四者的区别。 参考链接&#xff1a;GPTQ - 2210.17323 | AWQ - 2306.00978 | GGML | GGUF - docs | What is GGUF and GGML? 文章目录 GPTQ vs AWQ vs GGUF&#xff08;GGML&#xff09; 速览GGUF 文件命名GGUF 文件结构文件名解析答案 附录GGUF 文件命名GGUF 文件…
阅读更多...
15分钟学 Python 第35天 ：Python 爬虫入门（一）

15分钟学 Python 第35天 ：Python 爬虫入门（一）

Day 35 : Python 爬虫简介 1.1 什么是爬虫&#xff1f; 网页爬虫&#xff08;Web Crawler&#xff09;是自动访问互联网并提取所需信息的程序。爬虫的主要功能是模拟用户通过浏览器访问网页的操作&#xff0c;从而实现对网页内容的批量访问与信息提取。它们广泛应用于数据收集…
阅读更多...
JAVA并发编程系列(13)Future、FutureTask异步小王子

JAVA并发编程系列(13)Future、FutureTask异步小王子

美团本地生活面试&#xff1a;模拟外卖订单处理&#xff0c;客户支付提交订单后&#xff0c;查询订单详情&#xff0c;后台需要查询店铺备餐进度、以及外卖员目前位置信息后再返回。 时间好快&#xff0c;一转眼不到一个月时间&#xff0c;已经完成分享synchronized、volatile、…
阅读更多...
【VUE】案例：商场会员管理系统

【VUE】案例：商场会员管理系统

编写vuedfr实现对会员进行基本增删改查 1. drf项目初始化 请求&#xff1a; POST http://127/0.0.0.1:8000/api/auth/ {"username":"cqn", "password":"123"}返回&#xff1a; {"username":"cqn", "token&q…
阅读更多...
读论文、学习时 零碎知识点记录01

读论文、学习时 零碎知识点记录01

1.入侵检测技术 2.深度学习、机器学习相关的概念 ❶注意力机制 ❷池化 ❸全连接层 ❹Dropout层 ❺全局平均池化 3.神经网络中常见的层
阅读更多...
.NET Core 集成 MiniProfiler性能分析工具

.NET Core 集成 MiniProfiler性能分析工具

前言&#xff1a; 在日常开发中&#xff0c;应用程序的性能是我们需要关注的一个重点问题。当然我们有很多工具来分析程序性能&#xff1a;如&#xff1a;Zipkin等&#xff1b;但这些过于复杂&#xff0c;需要单独搭建。 MiniProfiler就是一款简单&#xff0c;但功能强大的应用…
阅读更多...
Unraid的cache使用btrfs或zfs？

Unraid的cache使用btrfs或zfs？

Unraid的cache使用btrfs或zfs&#xff1f; 背景&#xff1a;由于在unraid中添加了多个docker和虚拟机&#xff0c;因此会一直访问硬盘。然而&#xff0c;单个硬盘实在难以让人放心。在阵列盘中&#xff0c;可以通过添加校验盘进行数据保护&#xff0c;在cache中无法使用xfs格式…
阅读更多...
深入挖掘C++中的特性之一 — 继承

深入挖掘C++中的特性之一 — 继承

目录 1.继承的概念 2.举个继承的例子 3.继承基类成员访问方式的变化 1.父类成员的访问限定符对在子类中访问父类成员的影响 2.父类成员的访问限定符子类的继承方式对在两个类外访问子类中父类成员的影响 4.继承类模版&#xff08;注意事项&#xff09; 5.父类与子类间的转…
阅读更多...
数据结构——计数、桶、基数排序

数据结构——计数、桶、基数排序

目录 引言 计数排序 1.算法思想 2.算法步骤 3.代码实现 4.复杂度分析 桶排序 1.算法思想 2.算法步骤 3.代码实现 4.复杂度分析 基数排序 1.算法思想 2.算法步骤 3.代码实现 4.复杂度分析 排序算法的稳定性 1.稳定性的概念 2.各个排序算法的稳定性 结束语 引…
阅读更多...
C++（string类的实现）

C++（string类的实现）

1. 迭代器、返回capacity、返回size、判空、c_str、重载[]和clear的实现 string类的迭代器的功能就类似于一个指针&#xff0c;所以我们可以直接使用一个指针来实现迭代器&#xff0c;但如下图可见迭代器有两个&#xff0c;一个是指向的内容可以被修改&#xff0c;另一个则是指…
阅读更多...
Pytorch最最适合研究生的入门教程，Q3 开始训练

Pytorch最最适合研究生的入门教程，Q3 开始训练

文章目录 Pytorch最最适合研究生的入门教程Q3 开始训练3.1 训练的见解3.2 Pytorch基本训练框架work Pytorch最最适合研究生的入门教程 Q3 开始训练 3.1 训练的见解 如何理解深度学习能够完成任务&#xff1f; 考虑如下回归问题 由函数 y f ( x ) yf(x) yf(x)采样得到的100个…
阅读更多...
【安当产品应用案例100集】018-Vmware Horizon如何通过安当ASP身份认证系统增强登录安全性

【安当产品应用案例100集】018-Vmware Horizon如何通过安当ASP身份认证系统增强登录安全性

启用Radius认证是提高VMware Horizon环境安全性的有效方法&#xff0c;特别是在需要满足复杂安全要求的场景中。 启用Radius认证对于VMware Horizon具有以下几个关键优势&#xff1a; 增强安全性&#xff1a;Radius认证支持多种认证方法&#xff0c;包括PAP、CHAP、MS-CHAPv1…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023