利用ES6 编写更好的条件语句

最新推荐文章于 2023-12-15 16:15:11 发布

微微暖风

最新推荐文章于 2023-12-15 16:15:11 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript 相关知识

本文链接：https://blog.youkuaiyun.com/cxz792116/article/details/83655638

本文介绍了如何利用ES6特性，如Array.includes、return语句的提前使用、默认参数和解构、Map/Object字面量及Array.every/some，来改进条件语句，提升代码的可读性和效率。通过这些技巧，可以编写出更简洁、更易维护的代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 Array.includes 来处理多个条件

 请看下面的列子：
 // condition
 function test(fruit) {
   if (fruit == 'apple' || fruit == 'strawberry') {
     console.log('red');
   }
 }
 上面的列子看起来似乎没有什么问题。但是，如果我们还有更多的红色水果呢？是否要用
 更多的 || 操作符来扩展该语句，这时可以利用 Array.includes重写上面的条件语句
 
 function test(fruit) {
   // 条件提取到数组中
   const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  
   if (redFruits.includes(fruit)) {
     console.log('red');
   }
 }
 将所有的可能性条件提取到一个数组中。这样，可以让代码看起来更整洁

减少嵌套，提前使用 return 语句

 扩展前面的示例，在包含另外两个条件：
 1.如果没有提供水果，抛出错误；
 2.接受水果数量参数，如果超过10，则打印出相关信息；
 function test(fruit, quantity) {
   const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
   // 条件 1：fruit 必须有值
   if (fruit) {
     // 条件 2：必须为红色
     if (redFruits.includes(fruit)) {
       console.log('red');
  
       // 条件 3：数量必须大于 10
       if (quantity > 10) {
         console.log('big quantity');
       }
     }
   } else {
     throw new Error(