企业官网建设流程全解析

五屏网站建设多少钱,东方商易网站开发,wordpress多种筛选,做商城网站公司JavaScript学习笔记#xff1a;3.控制流与错误处理 上一篇搞定了JS的“内功心法”#xff08;基础语法与数据类型#xff09;#xff0c;这一篇咱们来解锁JS的“实战技能”——控制流与错误处理。如果说变量和数据类型是JS的“砖瓦”#xff0c;那控制流就是“建筑图纸”3.控制流与错误处理上一篇搞定了JS的“内功心法”基础语法与数据类型这一篇咱们来解锁JS的“实战技能”——控制流与错误处理。如果说变量和数据类型是JS的“砖瓦”那控制流就是“建筑图纸”决定代码执行顺序错误处理就是“安全网”防止代码崩掉。今天就用接地气的例子带你吃透这些核心知识点从此写代码能“做对决策”还能“从容兜底”一、块语句给代码划清“独立空间”块语句是JS里最基础的“代码容器”用一对{}把多条语句包起来就像给代码划了个“独立房间”。它通常和控制流语句if、for、while搭配使用比如while(奶茶没喝完){吸一口;// 这整个{}就是块语句}但这个“房间”对不同变量的“约束力”不一样——这就是新手最容易踩的坑避坑重点var vs let/const的“房间规则”var串门的“邻居”用var声明的变量不受块语句约束会“串门”到函数或全局作用域。比如var奶茶全糖;{var奶茶三分糖;// 同一个变量覆盖了外面的值}console.log(奶茶);// 输出“三分糖”——var直接“串门”改了全局变量这就像你在自己房间换了衣服结果邻居的衣服也跟着变了离谱let/const安分守己的“住户”用let或const声明的变量是“块级作用域”只在自己的“房间”里生效不会打扰外面let奶茶全糖;{let奶茶三分糖;// 独立的局部变量}console.log(奶茶);// 输出“全糖”——外面的变量不受影响这才是正常的“房间规则”所以记住块语句里优先用let/const彻底和var说再见二、条件语句JS的“决策大脑”条件语句让JS能“根据情况做选择”就像你出门前看天气下雨带伞晴天戴帽。JS里有两种核心条件语句if...else和switch各有擅长场景。1. if…else灵活的“多岔路口”if...else就像人生的“岔路口”满足条件走一条路不满足走另一条。语法很简单if(条件A){走A路;}elseif(条件B){走B路;}else{实在没路走兜底方案;}但这里藏着两个“致命坑”新手必栽坑1假值的“伪装术”JS里有6个“假值”它们会被条件语句当成false处理其余全是truefalse、undefined、null0、NaN空字符串举个反例你以为能判断“用户输入了内容”结果栽了const用户名;// 用户没输入是空字符串if(用户名){console.log(欢迎登录);}else{console.log(请输入用户名);// 正确执行因为是假值}// 坑如果用户输入0const年龄0;// 0是合法年龄但却是假值if(年龄){console.log(年龄合法);}else{console.log(请输入合法年龄);// 错误执行}避坑指南如果要判断“是否存在值”别直接用if(变量)要用精准判断if(年龄!undefined年龄!null){// 排除未定义和空值console.log(年龄合法);}坑2条件里的“赋值陷阱”千万别在if条件里写赋值语句要写比较语句比如let喜欢奶茶false;if(喜欢奶茶true){// 这里是赋值不是比较console.log(给你买奶茶);// 会执行因为赋值后喜欢奶茶变成true}这就像你本来不喜欢奶茶别人硬塞给你一杯然后说“你看你喜欢吧”——逻辑完全混乱最佳实践条件里只写比较表达式赋值单独写。2. switch高效的“多选一菜单”当有多个固定选项需要匹配时switch比if…else更简洁就像餐厅里的“套餐菜单”选一个套餐就对应一套服务。语法switch(套餐类型){case汉堡套餐:给汉堡;break;// 关键选完就退出case披萨套餐:给披萨;break;default:给默认小吃;// 没有匹配项时的兜底}核心坑switch的“穿透效应”如果忘记写breakJS会继续执行下一个case的代码就像你点了汉堡套餐服务员不仅给了汉堡还自动加了披萨和小吃——完全超出预期比如const水果香蕉;switch(水果){case香蕉:console.log(香蕉是$0.48一磅);// 没写breakcase樱桃:console.log(樱桃是$3.00一磅);break;}// 输出香蕉是$0.48一磅 → 樱桃是$3.00一磅穿透了避坑指南除了故意利用穿透的场景极少每个case后面必须加break另外switch的匹配是严格相等不会自动类型转换比如case 1和case 1是两个不同的匹配项。三、异常处理JS的“安全网”——与bug和平共处写代码难免遇到bug就像走路难免摔跤异常处理就是给代码装“安全网”让它摔得轻一点甚至能爬起来继续走。JS的异常处理核心是try...catch...finally再加上throw自定义错误。1. 三兄弟分工try→尝试catch→补救finally→兜底这三个语句的关系就像“快递签收流程”try尝试做一件事比如签收快递catch如果出问题快递损坏、丢件就补救finally不管成没成功签没签收必须做的事比如关门、谢谢快递员举个完整例子function签收快递(快递状态){if(快递状态损坏){thrownewError(快递损坏无法签收);// 主动抛出错误丢件了}return签收成功;}try{// 尝试签收const结果签收快递(损坏);console.log(结果);}catch(错误){// 出问题了补救console.error(出错了,错误.message);// 输出错误信息联系商家理赔();// 补救措施}finally{// 不管怎样都要做console.log(快递处理完毕关门);// 必执行}输出结果出错了快递损坏无法签收 快递处理完毕关门2. throw主动“喊救命”——自定义错误throw就像你发现快递有问题时主动喊“快递员这里有问题”。它可以抛出任意类型的值字符串、数字、对象但最佳实践是抛出Error对象因为它自带name错误类型和message错误信息方便调试// 不推荐抛出字符串throw快递损坏;// 推荐抛出Error对象thrownewError(快递损坏无法签收);// name: Error, message: 快递损坏...还可以用更具体的错误类型比如TypeError类型错误、RangeError范围错误让错误信息更精准function计算年龄(出生年份){if(typeof出生年份!number){thrownewTypeError(出生年份必须是数字);// 类型错误}if(出生年份1900||出生年份2024){thrownewRangeError(出生年份范围必须是1900-2024);// 范围错误}return2024-出生年份;}3. finally的“霸道逻辑”覆盖一切返回值finally有个很“霸道”的特性不管try或catch里有没有returnfinally都会执行而且如果finally里有return会直接覆盖前面的返回值比如function测试(){try{returntry的返回值;}catch(e){returncatch的返回值;}finally{returnfinally的返回值;// 覆盖前面的返回值}}console.log(测试());// 输出finally的返回值这就像你本来想签收快递return try的结果但最后不管怎样都必须执行“关门”finally的return直接忽略了之前的想法。避坑指南finally里尽量不要写return它的核心用途是“释放资源”比如关闭文件、断开网络连接而不是返回值。4. 错误处理的“避坑红线”别“吞掉”错误catch块里不要只写console.log(e)要用console.error(e)会格式化错误方便调试更不要空catchcatch(){}, 相当于把bug藏起来永远找不到。精准捕获不要用try包裹所有代码只包裹“可能出错的部分”比如网络请求、数据解析否则会掩盖真正的问题。释放资源文件、网络连接、定时器等资源一定要放在finally里释放避免内存泄漏。四、总结控制流与错误处理的“核心心法”块语句用{}划清作用域let/const是块级作用域var是“串门户”坚决不用var。条件语句if…else警惕假值陷阱条件里不写赋值复杂判断用块语句。switch每个case必加break用default兜底匹配是严格相等。异常处理try包裹可能出错的代码不滥用。catch精准处理错误不吞错用Error对象。finally释放资源不写return。JS的控制流让代码“有逻辑、会决策”错误处理让代码“抗造、不脆断”。这两个技能结合起来你写的代码就从“勉强能跑”变成“稳健可靠”了