你的代码不堪一击!太烂了!

本文通过实例解析了前端开发中常见的JavaScript错误,包括变量解构、默认值、数组方法、对象方法、async/await错误捕获等问题,并给出了优化建议,帮助开发者提升代码质量。
摘要由CSDN通过智能技术生成

前言

小王,你的页面白屏了,赶快修复一下。小王排查后发现是服务端传回来的数据格式不对导致,无数据时传回来不是 [] 而是 null, 从而导致 forEach 方法报错导致白屏,于是告诉测试,这是服务端的错误导致,要让服务端来修改,结果测试来了一句:“服务端返回数据格式错误也不能白屏!!” “好吧,千错万错都是前端的错。” 小王抱怨着把白屏修复了。

刚过不久,老李喊道:“小王,你的组件又渲染不出来了。” 小王不耐烦地过来去看了一下,“你这个属性data 格式不对,要数组,你传个对象干嘛呢。”老李反驳: “ 就算 data 格式传错,也不应该整个组件渲染不出来,至少展示暂无数据吧!” “行,你说什么就是什么吧。” 小王又抱怨着把问题修复了。

类似场景,小王时不时都要经历一次,久而久之,大家都觉得小王的技术太菜了。小王听到后,倍感委屈:“这都是别人的错误,反倒成为我的错了!”

等到小王离职后,我去看了一下他的代码,的确够烂的,不堪一击!太烂了!下面来吐槽一下。

一、变量解构一解就报错

优化前

const App = (props) => {
   
  const {
    data } = props;
  const {
    name, age } = data
}

如果你觉得以上代码没问题,我只能说你对你变量的解构赋值掌握的不扎实。

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于 undefinednull 无法转为对象,所以对它们进行解构赋值时都会报错。

所以当 dataundefinednull 时候,上述代码就会报错。

优化后

const App = (props) => {
   
  const {
    data } = props || {
   };
  const {
    name, age } = data || {
   };
}

二、不靠谱的默认值

估计有些同学,看到上小节的代码,感觉还可以再优化一下。

再优化一下

const App = (props = {
    }) => {
   
  const {
    data = {
   } } = props;
  const {
    name, age } = data ;
}

我看了摇摇头,只能说你对ES6默认值的掌握不扎实。

ES6 内部使用严格相等运算符(===)判断一个变量是否有值。所以,如果一个对象的属性值不严格等于 undefined ,默认值是不会生效的。

所以当 props.datanull,那么 const { name, age } = null 就会报错!

三、数组的方法只能用真数组调用

优化前:

const App = (props) => {
   
  const {
    data } = props || {
   };
  const nameList = (data || []).map(item => item.name);
}

那么问题来了,当 data123 , data || [] 的结果是 123123 作为一个 number 是没有 map 方法的,就会报错。

数组的方法只能用真数组调用,哪怕是类数组也不行。如何判断 data 是真数组,Array.isArray 是最靠谱的。

优化后:

const App = (props) => {
   
  const {
    data } = props || {
   };
  let nameList = [];
  if (Array.isArray(data)) {
   
    nameList = data.map(item => item.name);
  }
}

四、数组中每项不一定都是对象

优化前:

const App = (props) => {
   
  const {
    data } = props || {
   };
  let infoList = [];
  if (Array.isArray(data)) {
   
    infoList = data.map(item => 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端鼓励师

老铁 支持一波

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值