JavaScript-异常与this处理与性能优化

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量429 收藏 8
点赞数 6
分类专栏： Javascript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74745356/article/details/134927533
版权

1. 深浅拷贝

在这里插入图片描述

    const obj = {
      uname: 'nidie',
      age: 18
    }
    // o对象直接复制obj，直接赋值将obj的地址也给了o
    const o = obj
    // 正常打印18
    console.log(o);
    // 对o改动，打印obj，obj也被改动了
    o.age = 20
    console.log(o);
    console.log(obj);

1.1 浅拷贝

在这里插入图片描述
拷贝对象：Object.assgin()
拷贝数组：Array.prototype.concat()

    const obj = {
      uname: 'nidie',
      age: 18
    }

    // 浅拷贝
    const o = { ...obj }
    console.log(o);
    // 对未改动的obj没有影响
    o.age = 20
    console.log(o)
    console.log(obj);

    console.log('----------------------');

    // 利用assign方法浅拷贝
    const oo = {}
    Object.assign(oo, obj)
    oo.age = 20
    console.log(oo);
    console.log(obj);

    console.log('----------------------');

    // 但是浅拷贝仍然存在问题
    const objj = {
      uname: 'nidie',
      age: 18,
      family: {
        baby: 'son'
      }
    }
    const ooo = {}
    Object.assign(ooo, objj)
    // 简单数据类型age直接赋值没关系，obj对象中存储的family地址会给ooo
    ooo.age = 20
    ooo.family.baby = '牛魔'
    // 只想改变ooo的family对象里面的属性，却把objj的也改了
    console.log(ooo);
    console.log(objj);

总结：

在这里插入图片描述

1.2 深拷贝

在这里插入图片描述

递归实现深拷贝

在这里插入图片描述

    function getTime() {
      document.querySelector('div').innerHTML = new Date().toLocaleString()
      // 每隔一秒调用一次自己
      setTimeout(getTime, 1000)
    }
    getTime()

注意：

  1. 利用函数递归
  2. 普通属性直接赋值，遇到复杂数据类型，数组，对象则调用自己
  3. 数组的逻辑顺序要在对象前面
    const obj = {
      uname: 'nidie',
      age: 18,
      hobby: ['lu', 'lulu'],
      family: {
        baby: 'babybaby'
      }
    }
    const o = {}

    // 将obj拷贝给o
    function deepCopy(newObj, oldObj) {
      // 遍历旧对象
      for (let k in oldObj) {
        // if的逻辑顺序不能反，因为数组也属于对象，必须先筛选完数组再写对象
        // 处理数组的问题
        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]
        }
      }
    }
    deepCopy(o, obj) //o新对象 obj旧对象

    o.age = 20
    o.hobby[0] = 'bulu'
    o.family.baby = '牛魔'
    console.log(o);
    console.log(obj);

利用库函数直接深拷贝

  <script src="lodash.js"></script>
  <script>
    const obj = {
      uname: 'nidie',
      age: 18,
      hobby: ['lu', 'lulu'],
      family: {
        baby: 'babybaby'
      }
    }
    const o = _.cloneDeep(obj)
    console.log(o);

利用JSON实现深拷贝

    const obj = {
      uname: 'nidie',
      age: 18,
      hobby: ['lu', 'lulu'],
      family: {
        baby: 'babybaby'
      }
    }
    // 把对象转换为JSON字符串
    console.log(JSON.stringify(obj));

    // parse方法再将字符串转换为对象
    const o = JSON.parse(JSON.stringify(obj))
    console.log(o);
    
    o.family.baby = '牛魔'
    console.log(o)
    console.log(obj);;

总结

在这里插入图片描述

2. 异常处理

2.1 throw抛异常

在这里插入图片描述

    function fn(x, y) {
      if (!x || !y) {
        // throw '你没传参'
        // 抛出异常并终止程序
        throw new Error('没传参')
      }

      return x + y
    }
    console.log(fn());

总结

在这里插入图片描述

2.2 try/catch捕获异常

在这里插入图片描述

<body>
  <p>123</p>
  <script>
    function fn() {
      try {
        const p = document.querySelector('.p')
        p.style.color = 'red'
      }
      catch (err) {
        console.log(err.message);

        // 配合throw使用
        throw new Error('错了吧人才')
        return
      }
      finally {
        // 不管程序是否正确，一定会执行finnaly
        alert('你好')
      }
      // catch会拦截错误，但是不会中断程序执行  加入return中断程序
    }
    fn()
  </script>
</body>

总结

在这里插入图片描述

2.3 debugger

在这里插入图片描述

3. 处理this

3.1 this指向-普通函数

对于普通函数来说，谁调用，this就指向谁
在这里插入图片描述

总结

在这里插入图片描述

3.2 this指向-箭头函数

箭头函数this一层层往上找，找到最近的对象
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2 改变this

call

在这里插入图片描述

apply

在这里插入图片描述

    const obj = {
      age: 18
    }
    function fn(x, y) {
      console.log(this);
      console.log(x + y);
      return x + y
    }
    // 调用函数，并且让fn中的this指向了第一个参数obj
    // apply第二个参数必须放数组
    fn.apply(obj, [1, 2])

    // 本身就是在调用函数，所以返回值就是函数的返回值
    console.log(fn.apply(obj, [1, 2]));

bind

与call()和apply()不同的是，bind不会立即调用函数

在这里插入图片描述

    const obj = {
      age: 18
    }
    function fn() {
      console.log(this);
    }
    // bind不会调用函数
    // 可以改变this指向
    // 返回值是一个更改过this的函数
    const fun = fn.bind(obj)
    fun()

    // 需求：有一个按钮，点击里面就禁用，2秒钟后开启
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      // 禁用按钮
      this.disabled = true###
      setTimeout(function () {
        // 在普通函数中的话，要将this指向的window改为btn
        this.disabled = false
      }.bind(this), 2000);
    })

总结

在这里插入图片描述

4. 性能优化

4.1 防抖（debounce）

在这里插入图片描述

  <script src="lodash.js"></script>
  <script>
    // 鼠标在盒子中滑动，数字显示+1
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
      // 存在大量消耗性能的代码，dom操作、数据处理，可能造成卡顿
      box.innerHTML = i++
    }

    // box.addEventListener('mousemove', mouseMove)

    // 利用库函数lodash防抖函数
    // _.debounce(fun,时间)
    box.addEventListener('mousemove', _.debounce(mouseMove, 500))
  </script>


    // 手写防抖函数
    // 利用setTimeout定时器实现
    // 1. 声明定时器变量
    // 2. 每次鼠标移动的时候都要先判断是否有定时器，如果有的话先清除以前的
    // 3. 如果没有定时器，就开启定时器，存入到定时器变量中
    // 4. 定时器里面写函数调用
    function debounce(fn, t) {
      let timer
      // return 返回一个匿名函数
      return function () {
        if (timer) clearInterval(timer)
        timer = setTimeout(function () {
          fn()
        }, t)
      }
    }
    box.addEventListener('mousemove', debounce(mouseMove, 100))

4.2 节流

在这里插入图片描述

在这里插入图片描述

    // 利用节流实现性能优化
    // 鼠标在盒子中滑动，数字显示+1
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
      // 存在大量消耗性能的代码，dom操作、数据处理，可能造成卡顿
      box.innerHTML = i++
    }
    // 利用lodash库实现节流，500ms之后采取一次+1
    // 语法：_.throttle('mousemove'),_.throttle(mouseMove,500)
    box.addEventListener('mousemove', _.throttle(mouseMove, 3000))

总结

在这里插入图片描述

小宇学前端
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript-challenge
04-03
11. **性能优化**：理解如何通过合理编写代码和利用JavaScript特性来提高应用性能，例如避免全局变量、减少DOM操作等。 12. **调试技巧**：学会使用开发者工具进行代码调试，如设置断点、查看调用栈、检查变量值等...
javascript-exercises
04-06
11. **性能优化**：包括减少DOM操作、避免全局变量、合理使用缓存和异步处理等策略。 12. **TypeScript**：如果项目中涉及到TypeScript，那么类型系统、接口、泛型等都是需要掌握的。 在"javascript-exercises-...
函数参数和Catch参数
armman的专栏
03-16 1719
 语法上，在函数里声明参数与在catch子句中声明参数几乎没有什么差别：　　class Widget { ... };     //一个类，具体是什么类在这里并不重要　　void f1(Widget w);       // 一些函数，其参数分别为　　void f2(Widget& w);      // Widget, Widget&,或　　void f3(const Widget& w);
前端 - 笔记 - JavaScript - 高级【深浅拷贝 + 异常处理（throw、try-catch） + this指向 + 性能优化（防抖 + 节流）】
qq_48937489的博客
03-13 914
❗❗开发中我们经常需要复制一个对象。和只针对。
Java并发编程（四）未处理异常、线程池和ThreadLocal类
Watson的博客
10-25 2413
未处理异常以我们通常的经验，如果线程执行过程中抛出了未处理异常（没有用try-catch），那么我们的APP就会崩溃，并且我们可以从Error Log中看到出错的异常堆栈信息。那么我们有没有方法，在异常抛出之前对该异常进行处理呢？Thread.UncaughtExceptionHandler是Thread类的一个静态内部接口，该接口只有一个方法：void uncaughtException（Thre
未处理异常的处理
Acettest's Blogs
06-19 5279
AppDomain.UnhandledException Event 译者：我们知道，对于一些可预见性的错误常常需要在代码外围添加try/cahch块进行错误的捕捉与恢复处理。但是当某个异常我们未添加try/catch进行捕捉时，它便会造成程序出错，此即为未处理异常，未处理异常一般会造成程序终止。 Occurs when an exception is not caught. 当某个异常未被...
JS性能分析
zhisais的博客
01-09 683
JS中循环语句中的性能分析 遍历种类 数组 for while foreach for…in for…of 对象 for…in for…of 描述 循环相同的次数，执行同一个操作，（这里都是简单赋值操作）测试每一种循环所需要的时间 Tips: 尽量不要用for…in来循环数组，因为在数组中自定义的属性，也会在循环中遍历到，而且性能极差 用for…of本身是不能直接遍历对象的，需要使用Obj
【JavaScript】微信小程序：高效性能优化策略与实践
weixin_51517346的博客
04-15 1171
在互联网人口红利消失、增量变缓的背景下，用户对性能的要求不断提高。因此，性能优化已成为开发者必须关注并解决的重要课题。
网站性能不佳？试试这十大前端性能优化技巧！
你若盛开，清风自来
06-28 1544
通过使用浏览器缓存技术和 CDN，可以大大减少服务器请求和带宽消耗，提高静态资源的加载速度和用户体验，同时还可以降低服务器的负载和成本。在实际应用中，需要根据项目特点和实际需求，选择合适的缓存策略和 CDN 服务提供商，采取合理的方案和措施，以达到最佳的效果和效益。在实际应用中，需要根据项目特点和实际需求，选择合适的插件和自动化构建工具，采取合理的工作流程，以达到最佳的代码优化和效益。通过优化网页布局和页面结构，尽可能避免重排和重绘操作，可以提高页面的性能和体验，减少浏览器的负载和资源消耗。
JavaScript性能优化
博客
03-22 987
如今主流浏览器都在比拼JavaScript引擎的执行速度，但最终都会达到一个理论极限，即无限接近编译后程序执行速度。 这种情况下决定程序速度的另一个重要因素就是代码本身。 在这里我们会分门别类的介绍JavaScript性能优化的技巧，并提供相应的测试用例，供大家在自己使用的浏览器上验证， 同时会对特定的JavaScript背景知识做一定的介绍。 目录 变量查找优化
前端性能优化学习 03 Web 性能测试
皮蛋很白的博客
05-13 1863
Web 性能测试 作为网站应用的开发者或维护者，我们需要时常关注网站当前的健康状况，譬如在主流程运行正常的情况下，各方面性能体验是否满足期望，是否存在改进与提升的空间，如何进行快速且准确的问题定位等，为了满足这些诉求，我们需要进行全面且客观的性能检测。 性能检测的认知 性能检测作为性能优化过程中的一环，它的目的通常是给后续优化工作提供指导方向、参考基线及前后对比的依据。性能检测并不是一次性执行结束后就完成的工作，它会在检测、记录和改进的迭代过程中不断重复，来协助网站的性能优化不断接近期望的效果。 在展开介绍
前端性能与异常上报
江木
07-30 2440
概述 对于后台开发来说，记录日志是一种非常常见的开发习惯，通常我们会使用try...catch代码块来主动捕获错误、对于每次接口调用，也会记录下每次接口调用的时间消耗，以便我们监控服务器接口性能，进行问题排查。 刚进公司时，在进行Node.js的接口开发时，我不太习惯每次排查问题都要通过跳板机登上服务器看日志，后来慢慢习惯了这种方式。 举个例子： /** * 获取列表数据 * @pa...
JavaScript-Interview-Prep:我准备接受技术面试
05-06
6. **性能优化** - **防抖和节流**：在事件频繁触发时，提高性能的策略。 - **缓存策略**：了解强缓存和协商缓存，以及如何使用`localStorage`和`sessionStorage`。 7. **错误处理** - **try...catch**：处理...
javascript-general
03-16
以上只是JavaScript通用知识的一小部分，实际开发中还会涉及到更多高级特性，如闭包、事件循环、定时器、性能优化、跨域策略等。掌握好这些基础知识，对于深入理解和应用JavaScript至关重要。通过不断学习和实践，你...
JavaScript-Handy-Tricks:精选的酷炫实用JavaScript技巧
05-04
11. **性能优化**： - 使用`Array.prototype`上的方法优化迭代，如`map`、`filter`、`reduce`。 - 尽量避免DOM操作的频繁执行，利用缓存和虚拟DOM。 12. **错误处理**： - 使用`try...catch`语句捕获并处理错误...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1102
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 327
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 122
【代码】vue el-select的下拉树形结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值