JavaScript 条件语句优化小技巧

更新日期: 2022-07-04阅读: 813标签: 技巧作者: CUGGZ

大家好,我是 CUGGZ。

在日常的开发中,我们经常会编写一些条件语句,过多的  if...else 会导致代码难以理解和维护,今天来分享几个优化条件语句的小技巧!


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();

参考:

  1. https://www.digitalocean.com/community/posts/5-tips-to-write-better-conditionals-in-javascript。
  2. https://www.geeksforgeeks.org/tips-for-writing-better-conditionals-in-javascript。
来源: 前端充电宝

链接: https://fly63.com/article/detial/11850

微信小程序技巧_你需要知道的小程序开发技巧

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下微信小程序开发的一些技巧

微信小程序分享到朋友圈方法与技巧

小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友,小程序如何分享到朋友圈呢?使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。

前端新手程序员不知道的 20个小技巧

前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...

小技巧:检查你本地及公共 IP 地址

本地的 IP 地址是分配给你计算机上的内部硬件或虚拟网卡的本地/私有 IP 地址。根据你的 LAN 配置,上述 IP 地址可能是静态或动态的。公共的 IP 地址是你的 Internet 服务提供商(ISP)为你分配的公共/外部 IP 地址。

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing

26 个 jQuery使用技巧

禁用右键点击;禁用搜索文本框;新窗口打开链接;检测浏览器;预加载图片;样式筛选;列高度相同;字体大小调整;返回页面顶部;获取鼠标的xy坐标;验证元素是否为空;替换元素

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

《CSS世界》中提到的实用技巧

清除浮动主要用于子元素浮动(float)之后,父元素无法撑起高度和宽度。文字少时居中,多时靠左因为div嵌套着p,所以p的尺寸并不会超过div。但是要注意,当p的内容为英文单词组成的时候

不常被提及的JavaScript小技巧

这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略。Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的

CSS-in-JS 库 styled-class

为什么要在JavaScript里写CSS?避免命名全局污染,条件和动态样式(比如选择主题色之类的),在框架层面进行限制或补充(比如补全供应商前缀),避免业务人员使用奇技淫巧

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!