码迷,mamicode.com
首页 > 编程语言 > 详细

ES6优化javascript的if判断

时间:2020-03-04 09:27:00      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:方式   dash   rri   ||   ror   href   对象   测试结果   大于   

1、使用 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‘);
   }
 }
 将所有的可能性条件提取到一个数组中。这样,可以让代码看起来更整洁
2、减少嵌套,提前使用 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(‘No fruit!‘);
   }
 }
  
 // 测试结果
 test(null); // 抛出错误:No fruits
 test(‘apple‘); // 打印:red
 test(‘apple‘, 20); // 打印:red,big quantity
 
 上面的代码,我们有:
 1.1个 if/elss 语句过滤掉无效条件
 2.3层 if 语句嵌套(分别是条件1,2和3)
 其实可以遵循一般规则是  在发现无效条件时提前 return
 
 /* 在发现无效条件时提前 return */
 function test(fruit, quantity) {
   const redFruits = [‘apple‘, ‘strawberry‘, ‘cherry‘, ‘cranberries‘];
   // 条件 1:提前抛出错误
   if (!fruit)  return flase;
   // 条件2:必须为红色
   if (redFruits.includes(fruit)) {
     console.log(‘red‘);
     // 条件 3:数量必须大于 10
     if (quantity > 10) {
       console.log(‘big quantity‘);
     }
   }
 }
 这样做,我们可以减少一个嵌套层级,这种编码风格很好,特别是当你的if 语句很长时,
 如果通过反条件并提前return ,我们可以进一步减少嵌套,
 
     /* 在发现无效条件时提前 return */
 function test(fruit, quantity) {
   const redFruits = [‘apple‘, ‘strawberry‘, ‘cherry‘, ‘cranberries‘];
   if (!fruit) throw new Error(‘No fruit!‘); // 条件 1:提前抛出错误
   if (!redFruits.includes(fruit)) return;  // 条件 2:当 fruit 不是红色的时候,提前 return
   console.log(‘red‘);
   // 条件 3:必须是大量存在
   if (quantity > 10) {
     console.log(‘big quantity‘);
   }
 }
3、使用函数的默认参数 和解构
 下面的代码可能看起来很熟悉,我们在使用javascript时总是需要检查null/undefined值并分配默认值
 function test(fruit, quantity) {
   if (!fruit) return;
   const q = quantity || 1; // 如果没有提供 quantity 参数,则默认为 1
   console.log(`We have ${q} ${fruit}!`);
 }
  
 // 测试结果
 test(‘banana‘); // We have 1 banana!
 test(‘apple‘, 2); // We have 2 apple!
 
 实际上,我们可以通过分配默认函数参数来消除变量q
 function test(fruit, quantity = 1) { // i如果没有提供 quantity 参数,则默认为 1
   if (!fruit) return;
   console.log(`We have ${quantity} ${fruit}!`);
 }
  
 // 测试结果
 test(‘banana‘); // We have 1 banana!
 test(‘apple‘, 2); // We have 2 apple!
 
 如果参数fruit是一个 Object 对象怎么办,我们可以指定默认参数吗
 function test(fruit) { 
   // 如果有值,则打印 fruit.name
   if (fruit && fruit.name)  {
     console.log (fruit.name);
   } else {
     console.log(‘unknown‘);
   }
 }
  
 //测试结果
 test(undefined); // unknown
 test({ }); // unknown
 test({ name: ‘apple‘, color: ‘red‘ }); // apple
 看看上面的例子,我们想要的是如果 fruit.name 可用则打印水果名称,
 否则将打印 unknown 。我们可以使用默认函数参数和解构(destructing) 
 来避免 fruit && fruit.name 这样的检查。
 
 // 解构 —— 只获得 name 属性
 // 参数默认分配空对象 {}
 function test({name} = {}) {
   console.log (name || ‘unknown‘);
 }
 //测试结果
 test(undefined); // unknown
 test({ }); // unknown
 test({ name: ‘apple‘, color: ‘red‘ }); // apple
4、选择 Map/Object 字面量,而不是 Switch 语句
 查看下面实例,我们想打印根据颜色打印水果:
 
 function test(color) {
   // 使用 switch case 语句,根据颜色找出对应的水果
   switch (color) {
     case ‘red‘:
       return [‘apple‘, ‘strawberry‘];
     case ‘yellow‘:
       return [‘banana‘, ‘pineapple‘];
     case ‘purple‘:
       return [‘grape‘, ‘plum‘];
     default:
       return [];
   }
 }
  
 //测试结果
 test(null); // []
 test(‘yellow‘); // [‘banana‘, ‘pineapple‘]
 
 上面的代码似乎没有错,但我觉得它很冗长。使用具有更清晰语法的 object 
 字面量可以实现相同的结果:
 
 // 使用对象字面量,根据颜色找出对应的水果
  const fruitColor = {
     red: [‘apple‘, ‘strawberry‘],
     yellow: [‘banana‘, ‘pineapple‘],
     purple: [‘grape‘, ‘plum‘]
   };
  
 function test(color) {
   return fruitColor[color] || [];
 }
 
 或者
 // 使用 Map ,根据颜色找出对应的水果
   const fruitColor = new Map()
     .set(‘red‘, [‘apple‘, ‘strawberry‘])
     .set(‘yellow‘, [‘banana‘, ‘pineapple‘])
     .set(‘purple‘, [‘grape‘, ‘plum‘]);
  
 function test(color) {
   return fruitColor.get(color) || [];
 }
 
 亦或者
  const fruits = [
     { name: ‘apple‘, color: ‘red‘ }, 
     { name: ‘strawberry‘, color: ‘red‘ }, 
     { name: ‘banana‘, color: ‘yellow‘ }, 
     { name: ‘pineapple‘, color: ‘yellow‘ }, 
     { name: ‘grape‘, color: ‘purple‘ }, 
     { name: ‘plum‘, color: ‘purple‘ }
 ];
 
 function test(color) {
   // 使用 Array filter  ,根据颜色找出对应的水果 
   return fruits.filter(f => f.color == color);
 }
5、使用 Array.every 和 Array.some 来处理全部/部分满足条件
 最后一个小技巧更多地是利用新的(但不是那么新的)Javascript Array函数来减少代码行。
 查看下面的代码,我们想检查所有水果是否都是红色的:
 
 const fruits = [
     { name: ‘apple‘, color: ‘red‘ },
     { name: ‘banana‘, color: ‘yellow‘ },
     { name: ‘grape‘, color: ‘purple‘ }
   ];
  
 function test() {
   let isAllRed = true;
   // 条件:所有的水果都必须是红色
   for (let f of fruits) {
     if (!isAllRed) break;
     isAllRed = (f.color == ‘red‘);
   }
   console.log(isAllRed); // false
 }
 
 代码太长了!我们可以使用 Array.every 减少行数:
 
 const fruits = [
     { name: ‘apple‘, color: ‘red‘ },
     { name: ‘banana‘, color: ‘yellow‘ },
     { name: ‘grape‘, color: ‘purple‘ }
   ];
 function test() {
   // 条件:简短方式,所有的水果都必须是红色
   const isAllRed = fruits.every(f => f.color == ‘red‘);
   console.log(isAllRed); // false
 }
 
 干净多了对吧?类似的,如果我们想要检查是否有至少一个水果是红色的,
 我们可以使用 Array.some 仅用一行代码就实现出来。
 
 const fruits = [
     { name: ‘apple‘, color: ‘red‘ },
     { name: ‘banana‘, color: ‘yellow‘ },
     { name: ‘grape‘, color: ‘purple‘ }
 ];
  
 function test() {
   // 条件:是否存在红色的水果
   const isAnyRed = fruits.some(f => f.color == ‘red‘);
  
   console.log(isAnyRed); // true
 }

以上转自https://blog.csdn.net/cxz792116/article/details/83655638,如若侵权,联系删除。

ES6优化javascript的if判断

标签:方式   dash   rri   ||   ror   href   对象   测试结果   大于   

原文地址:https://www.cnblogs.com/hjptopshow/p/12407533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!