首页 > 资讯 > 前端开发 > JavaScript >8个JavaScript条件语句优化小技巧分享

665

分享到

8个JavaScript条件语句优化小技巧分享

2024-04-02 19:04:59 665人浏览薄情痞子

摘要

目录1、Array.includes2、Array.every3、尽早 return4、三元运算符5、switch...case6、Map/Object7、默认函数参数和解构8、逻辑

1、Array.includes

来看下面的代码：

function test(animal) {
  if (animal == 'lion' || animal == 'dog') {
    return animal;
  }
  return '';
}
test('dog');

在test方法中包含一个 if 语句，用来判断传入的参数animal是不是lion或者dog。这么写从语法上是没问题的，但是如果 if 的判断条件中不只有两个动物，而是有四只动物。如果继续使用 || 与运算符来写的话，代码就会很难维护并且看起来非常不优雅：

if (animal == 'lion' || animal == 'dog' || animal == 'cow' || animal == 'cat') {
    return animal;
}

对于这种需要对同一个变量进行多次判断的条件语句，可以使用数组的 includes() 方法来优化，该方法可以用于确定数组中是否存在指定元素，如果存在指定的元素，就会返回 true ，如果不存在就会返回 false 。使用 includes() 来修改写上面的代码：

if (['dog', 'cat', 'cow', 'lion'].includes(animal)) {
    return animal;
}

这样代码看起来就简洁了很多，并且如果想继续增加其他的动物，只需在数组中继续增加元素即可。

2、Array.every

来看下面的代码：

const cars = [
    { name: 'car1', color: 'red' },
    { name: 'car2', color: 'blue' },
    { name: 'car3', color: 'purple' }
]; 
function test(cars) {
    let isAllblue = true;
  
    for (let c of cars) {
        if (!isAllblue) break;
        isAllblue = (c.color == 'blue');
    } 
    return isAllblue;
}
test(cars);

javascript 中的数组提供了every()方法，该方法用于检查数组中所有元素是否满足给定条件。当每个数组元素都满足给定条件时会返回 true，否则会返回false。可以使用该方法来优化上面的代码：

const cars = [
    { name: 'car1', color: 'red' },
    { name: 'car2', color: 'blue' },
    { name: 'car3', color: 'purple' }
];  
function test(cars) {
   return cars.every(c => c.color == 'blue');
}
test(cars);

3、尽早 return

在 JavaScript 中，尽早 return 是一种将函数体减少else语句的简单方法。来看下面的代码：

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  if (fruit) {
    if (redFruits.includes(fruit)) {
      console.log('red');

      if (quantity > 10) {
        console.log('big quantity');
      }
    }
  } else {
    throw new Error('No fruit!');
  }
}
test(null); // error: No fruits
test('apple'); // red
test('apple', 20); // red, big quantity

来使用这种模式来优化上面的代码，可以在无效条件时尽早返回：

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  if (!fruit) throw new Error('No fruit!');
  if (redFruits.includes(fruit)) {
    console.log('red');
    if (quantity > 10) {
      console.log('big quantity');
    }
  }
}

可以进一步优化，如果 redFruits 中不包含fruit，就提前返回：

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  if (!fruit) throw new Error('No fruit!');
  if (!redFruits.includes(fruit)) return;
  console.log('red');
  if (quantity > 10) {
    console.log('big quantity');
  }
}

可以看到，使用这种模式可以消除不必要的else语句，使得函数更加清晰和简洁。

4、三元运算符

对于上面例子中的函数，可以使用 JavaScript 的三元运算符来重构：

function IsRed(someObject) {
    return typeof someObject !== 'object' || someObject.color !== 'Red' ? false : true;
}

对于上面的三元表达式，还可以进行简化：

function IsRed(someObject) {
    return !(typeof someObject !== 'object' || someObject.color !== 'Red');
}

对于这种if...else块中都分别只有一个表达式的情况，就可以使用三元表达式来简化if...else语句。

5、switch...case

来看下面的代码：

function printCars(color) {
    if (color === 'red') {
      return ['Rcar1', 'Rcar2'];
    }
    else if (color === 'blue') {
      return ['Bcar1', 'Bcar2'];
    }
    else if (color === 'purple') {
      return ['Pcar1', 'Pcar2'];
    }
    return [];
}

对于这种if的判断条件中都是针对一个变量进行判断的情况，可以使用switch...case来改写，这样代码看起来更有调理：

function printCars(color) {
    switch (color) {
        case 'red':
            return ['Rcar1', 'Rcar2'];
        case 'blue':
            return ['Bcar1', 'Bcar2'];
        case 'purple':
            return ['Pcar1', 'Pcar2'];
        default:
            return [];
    }
}

6、Map/Object

对于上面的代码，可以使用对象来继续优化：

const carColor = {
    red: ['Rcar1', 'Rcar2'],
    blue: ['Bcar1', 'Bcar2'],
    purple: ['Pcar1', 'Pcar2']
};  
function printcars(color) {
    return carColor[color] || [];
}
console.log(printcars());       // []
console.log(printcars('red'));  // ['Rcar1'，'Rcar2']
console.log(printcars('blue')); // ['Bcar1'，'Bcar2']

也可以使用 Map 来实现相同的结果：

const carColor = new Map()
    .set('red', ['Rcar1', 'Rcar2'])
    .set('blue', ['Bcar1', 'Bcar2'])
    .set('purple', ['Pcar1', 'Pcar2']);  
function printcars(color) {
    return carColor.get(color) || [];
}
console.log(printcars());       // []
console.log(printcars('red'));  // ['Rcar1'，'Rcar2']
console.log(printcars('blue')); // ['Bcar1'，'Bcar2']

7、默认函数参数和解构

来看下面的代码：

function check(flower, quantity) {
    if (!flower) return;  
    const num = quantity || 1; 
    return `${num}朵${flower}`;
} 
check('玫瑰');    // 1朵玫瑰
check('茉莉', 2); // 2朵茉莉

可以使用函数默认参数来简化上面的代码：

function check(flower, quantity = 1) {
    if (!flower) return;
    return `${quantity}朵${flower}`;
}
check('玫瑰');    // 1朵玫瑰
check('茉莉', 2); // 2朵茉莉

那如果flower参数是一个对象怎么办呢？来看下面的代码：

function check(flower) {
    if (flower && flower.name) {
        console.log(flower.name);
    } else {
        console.log('unknown');
    }
}
check(undefined);  // unknown
check({});  // unknown
check({ name: '玫瑰', color: 'red' });  // 玫瑰

可以从对象中解构需要的属性：

function check({name} = {}) {
    console.log (name || 'unknown');
}  
check(undefined);  // unknown
check({});  // unknown
check({ name: '玫瑰', color: 'red' });  // 玫瑰

在函数中需要flower对象中的name属性，可以使用{name}来解构该参数。除此之外，还可以用{}来作为参数的默认值，这样在check(undefined)时，也就是参数不是对象时，参数默认为一个空对象，否则就会报错，因为undefined中没有name属性。

8、逻辑与运算符

来看下面的代码：

if(a < 0 && b > 100 && c === 10) {
  fn()
}

对于逻辑与运算符，其左侧的条件如果为false，就会直接发生短路，不再继续往后执行；如果左侧的条件为true，就会返回其右侧的计算结果。所以，对于这种 if 中只有一行表达式的情况，可以使用逻辑与运算符来简化，其中左侧为判断条件，右侧是要执行的逻辑：

(a < 0 && b > 100 && c === 10) && fn();

以上就是8个JavaScript条件语句优化小技巧分享的详细内容，更多关于JavaScript条件语句优化的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 8个JavaScript条件语句优化小技巧分享

本文链接: https://www.lsjlt.com/news/153418.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

8个JavaScript条件语句优化小技巧分享

目录1、Array.includes2、Array.every3、尽早 return4、三元运算符5、switch...case6、Map/Object7、默认函数参数和解构8、逻辑...

99+

2022-11-13
JavaScript条件语句优化的技巧有哪些

这篇文章主要介绍了JavaScript条件语句优化的技巧有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript条件语句优化的技巧有哪些文章都会有所收获，下面我们一起来看看吧。1、Array.i...

99+

2023-07-02
优化SQL语句的技巧分享

这篇文章给大家介绍优化SQL语句的技巧分享，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。建立索引不是建的越多越好，原则是：第一：一个表的索引不是越多越好，也没有一个具体的数字，根据以往...

99+

2022-10-18
详解JavaScript中if语句优化和部分语法糖小技巧推荐

目录前言if else 基本使用简化if判断和优化代码单行if else使用&& || 优化使用三目运算符优化合并if使用includes 或者indexof使用sw...

99+

2022-11-13
分享12个Vue开发中的性能优化小技巧(实用!)

目录前言1. 长列表性能优化1. 不做响应式2. 虚拟滚动2. v-for 遍历避免同时使用 v-if3. 列表使用唯一 key4. 使用 v-show 复用 DOM5. 无状态的组...

99+

2022-11-13
优化SQL SELECT语句性能的6个简单技巧分别是什么

本篇文章给大家分享的是有关优化SQL SELECT语句性能的6个简单技巧分别是什么，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。SELECT语...

99+

2022-10-19