企业官网建设流程全解析

学生制作个人网站,wordpress迁移服务器,淘宝网首页官网,广告设计排行榜相信写前端开发的朋友对下面这种报错应该很熟悉#xff1a; Cannot read properties of undefined有一次我加班处理问题#xff0c;也是因为这一个bug。 后来才发现#xff0c;原来是一个接口返回的数据里#xff0c;某个字段有时候是null导致的#xff0c;而我没有做判…相信写前端开发的朋友对下面这种报错应该很熟悉Cannot read properties of undefined有一次我加班处理问题也是因为这一个bug。后来才发现原来是一个接口返回的数据里某个字段有时候是null导致的而我没有做判断就直接使用了。一、为什么需要判断空值举例如下// 场景1用户没填姓名constuserNameundefined;console.log(userName.length);// 报错Cannot read properties of undefined// 场景2接口返回空数据constapiResponsenull;console.log(apiResponse.data);// 报错Cannot read properties of null所以空值判断是保证代码健壮性的重要环节。二、先搞懂null 和 undefined 有啥区别虽然它们都表示空但含义不同undefined变量被声明了但还没赋值。letname;console.log(name);// undefinednull程序员主动赋值为空表示我明确知道这里没有值。letusernull;// 表示“用户不存在”所以当我们说判断变量是否为空通常是指它是不是null或undefined。判断方法以下介绍了比较常用的几种判断方案。方法一显式比较最保险if(variablenull||variableundefined){console.log(变量为空);}适用场景需要明确区分null和undefined时团队代码规范要求严格相等判断对代码可读性要求高的项目案例functiongetUserProfile(user){if(usernull||userundefined){return用户不存在;}return欢迎${user.name};}方法二非严格相等最常用if(variablenull){console.log(变量为空);}这里有个重要知识点 null实际上等价于 null || undefined这是JavaScript的语言特性。为什么推荐这个写法代码简洁少写很多字符性能优秀现代JS引擎都做了优化意图明确专业开发者一看就懂方法三逻辑非操作符if(!variable){console.log(变量为falsy值);}注意这个方法容易造成其它的误伤// 这些值都会被判断为空!false// true!0// true!// true!NaN// true// 实际开发中的坑constcount0;if(!count){console.log(计数为0);// 这里会执行但可能不是我们想要的}方法四typeof 关键字安全的写法if(typeofvariableundefined||variablenull){console.log(变量是空的);}安全在哪// 如果变量根本没声明前两种方法会报错if(notDeclaredVariablenull){// 报错ReferenceError}if(typeofnotDeclaredVariableundefined){// 正常运行console.log(变量未定义);}这种写法主要用于检查一个变量是否被声明过但对于普通函数参数或已声明变量没必要这么复杂。适用于不确定变量是否声明的场景。方法五空值合并操作符现代写法这是ES2020的新特性用起来特别顺手// 传统写法constnameusername?username:匿名用户;// 现代写法constnameusername??匿名用户;优势只对null和undefined生效不会误判0、false等其他值。方法六可选链操作符对象属性专用处理嵌套对象时这个功能简直是救命稻草// 以前的痛苦写法conststreetuseruser.addressuser.address.street;// 现在的优雅写法conststreetuser?.address?.street;结合空值合并写法更加安全conststreetuser?.address?.street??地址未知;实际开发中的建议场景1简单的空值检查// 推荐if(valuenull){// 处理空值}// 或者constsafeValuevalue??defaultValue;场景2需要区分null和undefinedif(valuenull){console.log(明确设置为空);}if(valueundefined){console.log(未定义);}场景3处理对象属性// 安全访问深层属性constphoneorder?.customer?.contact?.phone??未填写;场景4函数参数默认值functioncreateUser(name,age18){// age参数只在undefined时使用默认值return{name,age};}总结虽然现代JavaScript引擎优化得很好但了解原理还是有帮助的 null和显式比较性能相当typeof检查稍慢但能安全检测未声明变量可选链操作符在现代浏览器中性能优秀场景推荐写法原因一般空值检查value null简洁高效需要明确意图value null设置默认值value ?? defaultValue安全准确对象属性访问obj?.prop避免报错函数参数参数默认值语言特性没有绝对最好的方法只有最适合当前场景的选择。根据你的具体需求和团队规范来决策吧本文首发于公众号程序员刘大华专注分享前后端开发的实战笔记。关注我少走弯路一起进步往期精彩《async/await 到底要不要加 try-catch异步错误处理最佳实践》《如何查看 SpringBoot 当前线程数3 种方法亲测有效》《Java 开发必看什么时候用 for什么时候用 Stream》《别再乱 new ArrayList8 大 Java 容器选型案例一篇看懂》