JavaScript 中错误和异常的区别

javascript 中错误和异常的区别

https://github.com/ray-d-song

错误和异常是从实践中诞生的概念,旨在处理“可编程错误”。

错误

从代码角度来看,错误往往会被手动精确处理。

例如,fna 调用 fnb 和 fnc。两种方法都可能遇到错误,处理代码大致如下:

function fna() {  const { err: berr, res: bres } = fnb()  if (berr) {    // ...    // error handling  }  const { err: cerr, res: cres } = fnc()  if (cerr) {    // ...    // error handling  }  // normal logic}

“错误”的关键是从函数返回一个对象或数组,其中一个字段代表“发生错误”。只要该字段不为空,程序员就知道正常流程已被中断。

javascript 有一个内部 error 对象和构造函数,但表示错误的字段不需要是 error 对象。相反,error 对象更常用于异常处理。

例外

我们已经有了错误处理,为什么还需要异常?

立即学习“Java免费学习笔记(深入)”;

想象一个场景,你有一个按钮。当按钮被点击时,会触发函数a,经过多层调用(可能是10层),函数x出现错误。你不想告诉用户“未知错误”,而是想提供有关问题所在的具体信息。

你可以通过错误实现这个效果,但是你需要写十次这样的代码:

function fna() {  const { err, res } = fnb()  if (err) {    // display error to user    showerr(err)  }}function fnb() {  const { err, res } = fnc()  if (err)    // propagate error    return { err, null }}// ... 10 similar passesfunction fny() {  const { err, res } = fnx()  if (err)    // propagate error    return { err, null }}

这种样板代码效率很低。更好的方法是使用异常。

只需要在fny发生错误时抛出异常即可。在顶层,你可以抓住它。

function fna() {  try {    fnb()  } catch (e) {    showerr(e)  }}// ...function fny() {  const { err, res } = fnx()  if (err)    // 抛出    throw err}

这样,无论哪里发生错误,都可以在顶层捕获,并且其他层的代码不受影响。

避免一处错误污染整个代码结构。

为什么要区分两者呢?

我们已经解释了为什么需要异常,但是为什么需要区分错误和异常呢?

最好的做法是严格区分两者。如果错误不需要逐层向上传递,则应直接在当前层进行处理。例如fnc的错误不需要在fna中使用,所以应该直接在b中作为错误处理。

假设所有错误都在顶层处理,那么所有逻辑都堆积在顶层的catch块中,很难维护。

function main() {  try {    task1()    task2()    task3()  } catch(e) {    switch(e) {      case "type A":        //...        break;      case "type B":        //...        break;      case "type C":        //...        break;    }  }}

以上就是JavaScript 中错误和异常的区别的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1498399.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:26:01
下一篇 2025年12月19日 20:26:13

相关推荐

  • JavaScript事件监听器与innerHTML:DOM更新陷阱及解决方案

    本文深入探讨了在使用javascript的`addeventlistener`为dom元素绑定事件后,通过`innerhtml`替换其父级元素内容可能导致事件监听器失效的问题。我们将分析其根本原因,并提供避免此问题的最佳实践,建议通过局部dom操作而非整体替换来维护事件绑定,确保应用功能的稳定性和事…

    2025年12月21日
    000
  • Next.js App Router中客户端组件的元数据管理与优化实践

    本文探讨了在next.js app router中使用`’use client’`指令时无法设置页面元数据(如标题)的问题。核心原因是`metadata`配置仅支持服务器组件。教程将指导开发者通过将交互逻辑封装到独立的客户端组件中,并由服务器组件引入的方式,实现元数据管理与客…

    2025年12月21日
    000
  • Coloris.js:页面加载时自动打开颜色选择器

    本教程将指导您如何在使用 coloris.js 颜色选择器时,使其在页面加载时自动展开。通过配置 `inline: true` 和指定一个具有 `relative` 或 `absolute` 定位的父容器,您可以实现颜色选择器默认可见,无需用户点击即可进行颜色选择,从而优化特定应用场景下的用户体验。…

    2025年12月21日
    000
  • 掌握React开发:当CSS成为瓶颈时,如何高效突破

    在学习React时,如果传统CSS成为您的障碍,不必因此停滞不前。本文将介绍一种高效的替代方案——Tailwind CSS,它能帮助您快速实现美观的界面,同时不影响您对React等核心技术的深入学习。通过实用工具类CSS框架,您可以更专注于功能开发,提升项目效率。 理解CSS学习的挑战 对于许多前端…

    2025年12月21日
    000
  • 使用Web Workers处理复杂计算避免页面卡顿_js多线程

    Web Workers是浏览器的多线程API,可将耗时任务移至后台线程执行,避免阻塞主线程。通过创建独立JS文件并用new Worker()实例化,主程序与Worker间以postMessage通信,实现如斐波那契计算等密集任务,提升页面响应性。 在Web开发中,JavaScript是单线程的,这意…

    2025年12月21日
    000
  • 解决React Router Dom在CI/CD部署中导航失效的问题

    本文深入探讨了react router dom在ci/cd流程中部署到s3/cloudfront时,browserrouter导航功能异常的现象。当应用通过ci构建并部署时,url会更新但页面不刷新,而手动部署或本地运行则无此问题。研究发现,此问题主要与react-router-dom的特定版本(6…

    2025年12月21日
    000
  • 解决 jQuery 动态加载事件无法检测的问题

    本文旨在解决在使用 jQuery 动态加载内容时,事件绑定失效的问题。通过分析常见的 formset 脚本,提供了一种利用事件委托机制,确保动态添加的元素也能正确响应事件的方法,避免使用“hack”手段,实现更稳定和可维护的代码。 在使用 jQuery 开发动态网页时,经常会遇到动态加载的内容无法响…

    2025年12月21日
    000
  • 如何在页面加载时直接打开 Coloris.js 颜色选择器

    本文详细介绍了如何在使用 coloris.js 时,实现页面加载后颜色选择器自动打开并显示。核心在于结合 `inline: true` 和 `parent` 配置项,并确保指定的父容器设置了正确的 css `position` 属性(`relative` 或 `absolute`),从而确保选择器能…

    2025年12月21日
    000
  • JS注解怎么标注RESTful接口_ RESTful API接口参数的JS注解书写方法

    使用JSDoc为RESTful API函数添加注解,可提升代码可读性和维护性。1. 通过@function、@param、@returns等标签描述接口用途、参数类型及返回值;2. 对POST请求标注请求体结构,明确必填与可选字段,并用@example提供调用示例;3. 针对PUT/DELETE请求…

    2025年12月21日
    000
  • 控制HTML Canvas生成TIFF图像的位深度:实现24位输出

    本文将指导您如何在使用`html2canvas`和`canvas-to-tiff`库时,通过明确设置canvas 2d上下文的`colorspace`为`’srgb’`,从而将输出的tiff图像位深度从默认的32位调整为24位。此方法确保了颜色空间的精确控制,适用于需要特定位…

    2025年12月21日
    000
  • 解决React按钮点击不显示弹窗表单的常见问题与最佳实践

    本文针对react应用中按钮点击后弹窗表单未能正确渲染的问题,深入分析了常见的语法错误和状态管理缺失。通过详细讲解`usestate`和`usereducer`等react hooks的正确使用、条件渲染机制以及代码结构优化,提供了一套完整的解决方案和示例代码,帮助开发者构建功能完善且健壮的交互式组…

    2025年12月21日
    000
  • JS函数如何定义静态函数_JS静态函数定义与类方法使用案例

    JavaScript中的静态函数是挂载在函数或类上的方法,无需实例化即可调用。通过函数属性或ES6的static关键字实现,用于工具函数、工厂模式等场景,如MathUtils.add或Validator.isEmail,区别于需实例调用的原型方法。 在JavaScript中,函数是一等公民,既可以作…

    2025年12月21日
    000
  • JavaScript与SpringBoot应用监控集成的详细教程

    首先明确监控目标,涵盖前端错误、性能、行为与后端接口、JVM、异常等,并实现关联分析;接着通过JavaScript捕获全局错误、Promise异常、API请求耗时及页面性能指标并上报;Spring Boot使用Actuator与Micrometer暴露监控数据,记录自定义指标;通过Prometheu…

    2025年12月21日
    000
  • JS实现动态导入与按需加载模块_javascript技巧

    动态导入通过import()函数实现按需加载,结合路由懒加载、预加载和错误处理,可有效优化大型前端项目性能,提升用户体验。 前端开发中,随着项目规模扩大,打包后的 JavaScript 文件可能变得非常庞大,影响页面加载速度。为优化性能,JavaScript 提供了动态导入(Dynamic Impo…

    2025年12月21日
    000
  • JavaScript 本地存储:localStorage 与 sessionStorage 的区别

    localStorage数据持久存储,除非手动清除;sessionStorage仅在会话期间有效,关闭标签页即清除。2. 两者均基于源隔离,但localStorage同源页面共享,sessionStorage每标签页独立。3. 操作方法相同,均需字符串存储,对象需JSON转换。4. localSto…

    2025年12月21日
    000
  • 解决React开发中的CSS学习瓶颈:Tailwind CSS实践指南

    本文旨在为在javascript和react学习过程中遭遇css瓶颈的开发者提供解决方案。面对传统css的复杂性,tailwind css提供了一种实用且高效的替代方案,帮助开发者快速构建美观界面,避免因css而阻碍整体学习进度。我们将探讨tailwind css的核心优势、基本用法,并提供实践建议…

    2025年12月21日
    000
  • Coloris.js:实现页面加载时颜色选择器默认打开

    本文详细介绍了如何在页面加载时,使coloris.js颜色选择器自动以展开状态显示,而非默认的点击触发。核心方法是结合使用`inline: true`配置选项和为父容器设置正确的css定位(`position: relative`或`position: absolute`),并指定`parent`容…

    2025年12月21日
    000
  • jQuery动态加载元素事件检测指南

    本文旨在解决jquery中动态加载元素无法触发事件的问题,详细分析了其根本原因。我们将探讨两种主要解决方案:事件委托(推荐)和事件重新绑定,并通过代码示例阐述它们的实现方式、优缺点及适用场景,帮助开发者更高效地处理动态内容交互。 在前端开发中,尤其是在构建动态表单或交互式界面时,我们经常会遇到需要动…

    2025年12月21日
    000
  • 解决jQuery动态加载事件无法检测的问题

    本文旨在解决在使用 jQuery Formset 插件时,动态加载的元素事件无法被正确检测和绑定的问题。通过详细分析问题原因,提供了一种基于事件委托的解决方案,并给出了具体的代码示例和修改步骤,帮助开发者更有效地处理动态生成的表单元素事件。 在使用 jQuery 动态生成内容时,经常会遇到新添加的元…

    2025年12月21日
    000
  • JavaScript动态创建正方形网格:颜色控制与变量作用域详解

    本文旨在帮助开发者理解并解决使用JavaScript动态创建正方形网格时遇到的常见问题,重点关注颜色属性的正确使用以及变量作用域的影响。通过修改CSS的`background-color`属性控制背景色,并使用`let`关键字声明变量,避免变量提升和作用域问题,从而实现预期的动态网格效果。 正确设置…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信