JavaScript中条件语句的优化技巧总结


Posted in Javascript onDecember 04, 2020

对多个条件使用 Array.includes

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');
 }
}

我们将条件提取到一个数组中。这样做之后,代码看起来更整洁。

更少的嵌套,尽早返回

扩展前面的示例,以包含另外两个条件:

如果没有提供水果(名称),抛出错误。

如果(红色水果)数量超过 10 个,接受并打印。

看看上面的代码,我们有:

1 组过滤无效条件的 if/else 语句

3层的 if 嵌套语句(条件 1、2 和 3)

遵循的一般规则是,当发现无效条件时,提前返回。

/_ return early when invalid conditions found _/
function test(fruit, quantity) {
 const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

 // condition 1: throw error early
 if (!fruit) throw new Error('No fruit!');

 // condition 2: must be red
 if (redFruits.includes(fruit)) {
console.log('red');

 // condition 3: must be big quantity
 if (quantity > 10) {
  console.log('big quantity');
 }
 }
}

这样,我们就少了一层嵌套。这种编码风格很好,尤其是当你有很长的 if 语句时(想象一下,你需要滚动到最底部才能知道还有一个 else 语句,这并不好)。

通过反转条件和提早返回,我们可以进一步减少嵌套。看看下面的条件 2,我们是怎么做的:

/_ return early when invalid conditions found _/
 
function test(fruit, quantity) {
 const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 
 if (!fruit) throw new Error('No fruit!'); // condition 1: throw error early
 if (!redFruits.includes(fruit)) return; // condition 2: stop when fruit is not red
 
 console.log('red');
 
 // condition 3: must be big quantity
 if (quantity > 10) {
  console.log('big quantity');
 }
}

通过反转条件 2 的条件,我们的代码现在没有嵌套语句。当我们有很长的逻辑要处理时,这种技术是有用的,当一个条件没有满足时,我们想要停止进一步的处理。

然而,这并不是严格的规则。问问自己,这个版本(没有嵌套)是否比前一个版本(嵌套的条件 2)更好、更易读?

对于我来说,我将把它保留为以前的版本(条件 2 和嵌套)。这是因为:
代码简短而直接,如果嵌套,代码就更清晰了,反转条件可能会导致更多的思考过程(增加认知负担)!

因此,总是以更少的嵌套及尽早返回为目标,但不要过度。

使用默认的函数参数和解构

在使用 JavaScript 时总是需要检查 null 或 undefined 值并分配默认值:

function test(fruit, quantity) {
 if (!fruit) return;
 const q = quantity || 1; 
}

//test results
test('banana');
test('apple', 2);

事实上,可以通过指定默认的函数参数来消除变量 q。

function test(fruit, quantity = 1) {
 if (!fruit) return;
}

//test results
test('banana');
test('apple', 2);

请注意,每个参数都可以有自己的默认函数参数。例如,我们也可以为 fruit 赋值:function test(fruit = 'unknown', quantity = 1)。

如果我们的 fruit 是一个对象:

function test(fruit) {
 if (fruit && fruit.name) {
  console.log (fruit.name);
 } else {
  console.log('unknown');
 }
}

//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

如果 fruit.name 是可用的,我们将打印该水果名称,否则我们将打印 unknown。我们可以避免使用与默认函数参数和解构对条件 fruit && fruit.name进行检查。

function test({name} = {}) {
 console.log (name || 'unknown');
}

//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

因为我们只需要水果中的属性 name,所以我们可以使用 {name} 来解构,然后我们可以在代码中使用 name 作为变量,而不是 fruit.name。

我们还将空对象 {} 指定为默认值。如果我们不这样做,当执行 test(undefined),不能解构 undefined 或 null 的属性名时,您将会得到错误。因为在 undefined中没有 name 属性。

选择 Map 或对象字面量,而不是 Switch 语句

我们想要基于颜色打印水果名称:

function test(color) {
 // use switch case to find fruits in color
 switch (color) {
  case 'red':
   return ['apple', 'strawberry'];
  case 'yellow':
   return ['banana', 'pineapple'];
  case 'purple':
   return ['grape', 'plum'];
  default:
   return [];
 }
}
 
//test results
test(null); // []
test('yellow'); // ['banana', 'pineapple']

上面的代码似乎没有什么问题,但发现它相当冗长。同样的结果可以通过对象字面量和更简洁的语法来实现:

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) || [];
}

Map 是 ES2015 以后可用的对象类型,允许您存储键值对。

对于上面的示例,我们实际上可以重构代码,以使用 Array.filter 获得相同的结果。

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) {
 // use Array filter to find fruits in color
 
 return fruits.filter(f => f.color == color);
}

总有不止一种方法可以达到同样的效果。展示了 4 个相同效果的例子。

所有或部分使用 Array.every & Array.some 的条件

使用新的Javascript 数组函数来减少代码行。看看下面的代码,我们想检查所有的水果是否都是红色的:

const fruits = [
  { name: 'apple', color: 'red' },
  { name: 'banana', color: 'yellow' },
  { name: 'grape', color: 'purple' }
 ];
 
function test() {
 let isAllRed = true;
 
 // condition: all fruits must be red
 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() {
 // condition: short way, all fruits must be red
 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() {
 // condition: if any fruit is red
 const isAnyRed = fruits.some(f => f.color == 'red');
 console.log(isAnyRed); // true
}

到此这篇关于JavaScript中条件语句的优化技巧的文章就介绍到这了,更多相关JS条件语句优化技巧内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
详谈javascript中的cookie
Jun 03 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 #Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 #Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 #Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 #Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 #Vue.js
You might like
2019十大人气国漫
2020/03/13 国漫
VFP与其他应用程序的集成
2006/10/09 PHP
php 中文处理函数集合
2008/08/27 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
php mail to 配置详解
2014/01/16 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
python生成二维码的实例详解
2017/10/29 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
python 实用工具状态机transitions
2020/11/21 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
市场部业务员岗位职责
2014/04/02 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS