最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 成为优秀程序员必备的 6 个提高条件判断语句可读性的方式

    正文概述 掘金(求知编程)   2021-02-22   384

    成为优秀程序员必备的 6 个提高条件判断语句可读性的方式

    如果你用过条件判断语句,你应该通常会用到 ifswitch 语法。

    ES6 给我们更强大的能力去写更好的条件判断语句,它更短,更简洁。

    这个文章我们会展示 6 种方法来提高条件判断语句的可读性,可维护性!

    这有助于你提高编程水平,并写出优质的代码!

    1. 早早的 return 代替 if else

    看看下面的代码。嵌套式的 if 判断的代码是很丑陋的,很难控制,很难定位 bug。如果你嵌套得太多层,层次太深,而且如果你的电脑屏幕太小,都很难展示完整的语句。你必须用鼠标滚动屏幕才能显示出来。

    const isBabyPet = (pet, age) => {
      if (pet) {
        if (isPet(pet)) {
          console.log(‘It is a pet!’);
          
          if (age < 1) {
            console.log(‘It is a baby pet!’);
          }
        } else {
          throw new Error(‘Not a pet!’);
        }
      } else {
        throw new Error(‘Error!’);
      }
    };
    

    如果解决上面这个问题呢?就是要早早地 return。如果遇到错误,或者无效的情况,我们早早地 return 或者抛出错误,就会少一些判断,且看下面的代码:

    const isBabyPet = (pet, age) => {
      if (!pet) throw new Error(‘Error!’);
      if (!isPet(pet)) throw new Error(‘Not a pet!’);
      
      console.log(‘It is a pet!’);
      if (age < 1) {
        console.log(‘It is a baby pet!’);
      }
    };
    

    2. 使用 Array.includes

    假设您需要检查动物是否是宠物,如下所示:

    const isPet = animal => {
      if (animal === ‘cat’ || animal === ‘dog’) {
        return true;
      }
      
      return false;
    };
    

    上面的代码中:动物如果是猫或者狗就是宠物,如果还要加上其他的呢,比如蛇,鸟。这个时候你可能会再加上类似这样的判断 || animal=== 'snake'

    其实我们可以用 Array.includes 代替它,比如:

    const isPet = animal => {
      const pets = [‘cat’, ‘dog’, ‘snake’, ‘bird’];
      
      return pets.includes(animal);
    };
    

    3. 在函数中使用参数默认值

    我们在定义一个函数的时候,你通常会确定你的参数是非空的(nullundefined),如果是为空,我们会为它设置一个默认值,我们可能会这样做:

    const isBabyPet = (pet, age) => {
      if (!pet) pet = ‘cat’;
      if (!age) age = 1;
      if (age < 1) {
        // Do something
      }
    };
    

    这样你要在函数体里判断,并设置值,有点多余,我们可以这样简化,使用函数参数默认值。

    const isBabyPet = (pet = ‘cat’, age = 1) => {
      if (age < 1) {
        console.log(‘baby’);
      }
    };
    

    4. Array.every

    如果给了您一些宠物,并要求检查所有宠物是否有四只脚怎么办?

    比如:

    const pets = [
      { name: ‘cat’,   nLegs: 4 },
      { name: ‘snake’, nLegs: 0 },
      { name: ‘dog’,   nLegs: 4 },
      { name: ‘bird’,  nLegs: 2 }
    ];
    const check = (pets) => {
      for (let i = 0; i < pets.length; i++) {
        if (pets[i].nLegs != 4) {
          return false;
        }
      }
      return true;
    }
    check(pets); // false
    

    我们会用到 for 去循环遍历这个数组,然后再用 if 来判断。

    其实一条语句就可以简化:

    let areAllFourLegs = pets.every(p => p.nLegs === 4);
    

    5. Array.some

    让我们稍微更改一下任务。 现在,我们将检查至少一只宠物是否有四只脚。 这时候我们可以使用 Array.some

    let check = pets.some(p => p.nLegs === 4);
    

    6. 用索引代替 switch…case

    下面的 switch 语句将返回给定普通宠物的品种。

    const getBreeds = pet => {
      switch (pet) {
        case ‘dog’:
          return [‘Husky’, ‘Poodle’, ‘Shiba’];
        case ‘cat’:
          return [‘Korat’, ‘Donskoy’];
        case ‘bird’:
          return [‘Parakeets’, ‘Canaries’];
        default:
          return [];
      }
    };
    let dogBreeds = getBreeds(‘dog’); //[“Husky”, “Poodle”, “Shiba”]
    

    这里写了好多 case return,看到这样的代码,我们就要想,能不能优化它。

    看看下面更清洁的方法。

    const breeds = {
      ‘dog’: [‘Husky’, ‘Poodle’, ‘Shiba’],
      ‘cat’: [‘Korat’, ‘Donskoy’],
      ‘bird’: [‘Parakeets’, ‘Canaries’]
    };
    const getBreeds = pet => {
      return breeds[pet] || [];
    };
    let dogBreeds = getBreeds(‘cat’); //[“Korat”, “Donskoy”]
    

    我们先分类组合形成一个对象 breeds ,这样对象的索引就是动物的名称,而值就是动物的品种,我们在使用getBreeds的时候直接传入索引就好,就会返回出它的种类。

    总结

    我们在写代码的时候,通常会写很多重复或复杂的语然,这个时候你就要思考如何去优化它,这样有助于你提高编写代码的能力


    起源地下载网 » 成为优秀程序员必备的 6 个提高条件判断语句可读性的方式

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元