如何利用JavaScript编写更好的条件语句详解


Posted in Javascript onAugust 10, 2020

前言

在任何编程语言中,代码需要根据不同的条件在给定的输入中做不同的决定和执行相应的动作。

例如,在一个游戏中,如果玩家生命点为0,游戏结束。在天气应用中,如果在早上被查看,显示一个日出图片,如果是晚上,则显示星星和月亮。在这篇文章中,我们将探索JavaScript中所谓的条件语句如何工作。

如果你使用JavaScript工作,你将写很多包含条件调用的代码。条件调用可能初学很简单,但是还有比写一对对if/else更多的东西。这里有些编写更好更清晰的条件代码的有用提示。

1. 数组方法 Array.includes

使用 Array.includes 进行多条件选择

例如:

function printAnimals(animal) {
 if (animal === 'dog' || animal === 'cat') {
  console.log(I have a ${animal});
 }
 }

 console.log(printAnimals('dog')); // I have a dog

上面的代码看起来很好因为我们只检查了两个动物。然而,我们不确定用户输入。如果我们要检查任何其他动物呢?如果我们通过添加更多“或”语句来扩展,代码将变得难以维护和不清晰。

解决方案:

我们可以通过使用 Array.includes 来重写上面的条件

function printAnimals(animal) {
  const animals = ['dog', 'cat', 'hamster', 'turtle'];

  if (animals.includes(animal)) {
   console.log(I have a ${animal});
  }
 }

 console.log(printAnimals('hamster')); // I have a hamster

这里,我们创建来一个动物数组,所以条件语句可以和代码的其余部分抽象分离出来。现在,如果我们想要检查任何其他动物,我们只需要添加一个新的数组项。

我们也能在这个函数作用域外部使用这个动物数组变量来在代码中的其他任意地方重用它。这是一个编写更清晰、易理解和维护的代码的方法,不是吗?

2. 提前退出 / 提前返回

这是一个精简你的代码的非常酷的技巧。我记得当我开始专业工作时,我在第一天学习使用提前退出来编写条件。

让我们在之前的例子上添加更多的条件。用包含确定属性的对象替代简单字符串的动物。

现在的需求是:

  • 如果没有动物,抛出一个异常
  • 打印动物类型
  • 打印动物名字
  • 打印动物性别
const printAnimalDetails = animal => {
 let result; // declare a variable to store the final value

 // condition 1: check if animal has a value
 if (animal) {

  // condition 2: check if animal has a type property
  if (animal.type) {

   // condition 3: check if animal has a name property
   if (animal.name) {

    // condition 4: check if animal has a gender property
    if (animal.gender) {
     result = ${animal.name} is a ${animal.gender} ${animal.type};;
    } else {
     result = "No animal gender";
    }
   } else {
    result = "No animal name";
   }
  } else {
   result = "No animal type";
  }
 } else {
  result = "No animal";
 }

 return result;
};

console.log(printAnimalDetails()); // 'No animal'

console.log(printAnimalDetails({ type: "dog", gender: "female" })); // 'No animal name'

console.log(printAnimalDetails({ type: "dog", name: "Lucy" })); // 'No animal gender'

console.log(
 printAnimalDetails({ type: "dog", name: "Lucy", gender: "female" })
); // 'Lucy is a female dog'

你觉得上面的代码怎么样?

它工作得很好,但是代码很长并且维护困难。如果不使用lint工具,找出闭合花括号在哪都会浪费很多时间。 ? 想象如果代码有更复杂的逻辑会怎么样?大量的if..else语句。

我们能用三元运算符、&&条件等语法重构上面的功能,但让我们用多个返回语句编写更清晰的代码。

const printAnimalDetails = ({type, name, gender } = {}) => {
 if(!type) return 'No animal type';
 if(!name) return 'No animal name';
 if(!gender) return 'No animal gender';

// Now in this line of code, we're sure that we have an animal with all //the three properties here.

 return ${name} is a ${gender} ${type};
}

console.log(printAnimalDetails()); // 'No animal type'

console.log(printAnimalDetails({ type: dog })); // 'No animal name'

console.log(printAnimalDetails({ type: dog, gender: female })); // 'No animal name'

console.log(printAnimalDetails({ type: dog, name: 'Lucy', gender: 'female' })); // 'Lucy is a female dog'

在这个重构过的版本中,也包含了解构和默认参数。默认参数确保如果我们传递undefined作为一个方法的参数,我们仍然有值可以解构,在这里它是一个空对象{}。

通常,在专业领域,代码被写在这两种方法之间。

另一个例子:

function printVegetablesWithQuantity(vegetable, quantity) {
 const vegetables = ['potato', 'cabbage', 'cauliflower', 'asparagus'];

 // condition 1: vegetable should be present
  if (vegetable) {
   // condition 2: must be one of the item from the list
   if (vegetables.includes(vegetable)) {
    console.log(I like ${vegetable});

    // condition 3: must be large quantity
    if (quantity >= 10) {
     console.log('I have bought a large quantity');
    }
   }
  } else {
   throw new Error('No vegetable from the list!');
  }
 }

 printVegetablesWithQuantity(null); // No vegetable from the list!
 printVegetablesWithQuantity('cabbage'); // I like cabbage
 printVegetablesWithQuantity('cabbage', 20); 
 // 'I like cabbage
 // 'I have bought a large quantity'

现在,我们有:

1 if/else 语句过滤非法条件

3 级嵌套if语句 (条件 1, 2, & 3)

一个普遍遵循的规则是:在非法条件匹配时提前退出。

function printVegetablesWithQuantity(vegetable, quantity) {

 const vegetables = ['potato', 'cabbage', 'cauliflower', 'asparagus'];

  // condition 1: throw error early
  if (!vegetable) throw new Error('No vegetable from the list!');

  // condition 2: must be in the list
  if (vegetables.includes(vegetable)) {
   console.log(I like ${vegetable});

   // condition 3: must be a large quantity
   if (quantity >= 10) {
    console.log('I have bought a large quantity');
   }
  }
 }

通过这么做,我们少了一个嵌套层级。当你有一个长的if语句时,这种代码风格特别好。

我们能通过条件倒置和提前返回,进一步减少嵌套的if语句。查看下面的条件2,观察我们是怎么做的:

function printVegetablesWithQuantity(vegetable, quantity) {

 const vegetables = ['potato', 'cabbage', 'cauliflower', 'asparagus'];

  if (!vegetable) throw new Error('No vegetable from the list!'); 
  // condition 1: throw error early

  if (!vegetables.includes(vegetable)) return; 
  // condition 2: return from the function is the vegetable is not in 
 // the list


 console.log(I like ${vegetable});

 // condition 3: must be a large quantity
 if (quantity >= 10) {
   console.log('I have bought a large quantity');
 }
 }

通过倒置条件2,代码没有嵌套语句了。这种技术在我们有很多条件并且当任何特定条件不匹配时,我们想停止进一步处理的时候特别有用。

所以,总是关注更少的嵌套和提前返回,但也不要过度地使用。

3. 用对象字面量或Map替代Switch语句

让我们来看看下面的例子,我们想要基于颜色打印水果:

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

printFruits(null); // []
printFruits('yellow'); // ['banana', 'pineapple']

上面的代码没有错误,但是它仍然有些冗长。相同的功能能用对象字面量以更清晰的语法实现:

// use object literal to find fruits by color
 const fruitColor = {
  red: ['apple', 'strawberry'],
  yellow: ['banana', 'pineapple'],
  purple: ['grape', 'plum']
 };

function printFruits(color) {
 return fruitColor[color] || [];
}

另外,你也能用Map来实现相同的功能:

// use Map to find fruits by color
 const fruitColor = new Map()
  .set('red', ['apple', 'strawberry'])
  .set('yellow', ['banana', 'pineapple'])
  .set('purple', ['grape', 'plum']);

function printFruits(color) {
 return fruitColor.get(color) || [];
}

Map 允许保存键值对,是自从ES2015以来可以使用的对象类型。

对于上面的例子,相同的功能也能用数组方法 Array.filte 来实现。

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 printFruits(color) {
 return fruits.filter(fruit => fruit.color === color);
}

4. 默认参数和解构

当使用 JavaScript 工作时,我们总是需要检查 null/undefined 值并赋默认值,否则可能编译失败。

function printVegetablesWithQuantity(vegetable, quantity = 1) { 
// if quantity has no value, assign 1

 if (!vegetable) return;
  console.log(We have ${quantity} ${vegetable}!);
 }

 //results
 printVegetablesWithQuantity('cabbage'); // We have 1 cabbage!
 printVegetablesWithQuantity('potato', 2); // We have 2 potato!

如果 vegetable 是一个对象呢?我们能赋一个默认参数吗?

function printVegetableName(vegetable) { 
  if (vegetable && vegetable.name) {
   console.log (vegetable.name);
  } else {
  console.log('unknown');
  }
 }

 printVegetableName(undefined); // unknown
 printVegetableName({}); // unknown
 printVegetableName({ name: 'cabbage', quantity: 2 }); // cabbage

在上面的例子中,如果vegetable 存在,我们想要打印 vegetable name, 否则打印"unknown"。

我们能通过使用默认参数和解构来避免条件语句 if (vegetable && vegetable.name) {} 。

// destructing - get name property only
 // assign default empty object {}

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


 printVegetableName(undefined); // unknown
 printVegetableName({ }); // unknown
 printVegetableName({ name: 'cabbage', quantity: 2 }); // cabbage

因为我们只需要 name 属性,所以我们可以使用 { name } 解构参数,然后我们就能在代码中使用 name 作为变量,而不是 vegetable.name。

我们还赋了一个空对象 {} 作为默认值,因为当执行 printVegetableName(undefined) 时会得到一个错误:不能从 undefined 或 null 解构属性 name,因为在 undefined 中没有name属性。

5. 用 Array.every & Array.some 匹配全部/部分内容

我们能使用数组方法减少代码行。查看下面的代码,我们想要检查是否所有的水果都是红色的:

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
}

6. 使用可选链和空值合并

这有两个为编写更清晰的条件语句而即将成为 JavaScript 增强的功能。当写这篇文章时,它们还没有被完全支持,你需要使用 Babel 来编译。

可选链允许我们没有明确检查中间节点是否存在地处理 tree-like 结构,空值合并和可选链组合起来工作得很好,以确保为不存在的值赋一个默认值。

这有一个例子:

const car = {
  model: 'Fiesta',
  manufacturer: {
  name: 'Ford',
  address: {
   street: 'Some Street Name',
   number: '5555',
   state: 'USA'
   }
  }
 }

 // to get the car model
 const model = car && car.model || 'default model';

 // to get the manufacturer street
 const street = car && car.manufacturer && car.manufacturer.address && 
 car.manufacturer.address.street || 'default street';

 // request an un-existing property
 const phoneNumber = car && car.manufacturer && car.manufacturer.address 
 && car.manufacturer.phoneNumber;

 console.log(model) // 'Fiesta'
 console.log(street) // 'Some Street Name'
 console.log(phoneNumber) // undefined

所以,如果我们想要打印是否车辆生产商来自美国,代码将看起来像这样:

const isManufacturerFromUSA = () => {
  if(car && car.manufacturer && car.manufacturer.address && 
 car.manufacturer.address.state === 'USA') {
   console.log('true');
  }
 }


 checkCarManufacturerState() // 'true'

你能清晰地看到当有一个更复杂的对象结构时,这能变得多乱。有一些第三方的库有它们自己的函数,像 lodash 或 idx。例如 lodash 有 _.get 方法。然而,JavaScript 语言本身被引入这个特性是非常酷的。

这展示了这些新特性如何工作:

// to get the car model
 const model = car?.model ?? 'default model';

 // to get the manufacturer street
 const street = car?.manufacturer?.address?.street ?? 'default street';

 // to check if the car manufacturer is from the USA
 const isManufacturerFromUSA = () => {
  if(car?.manufacturer?.address?.state === 'USA') {
   console.log('true');
  }
 }

这看起来很美观并容易维护。它已经到 TC39 stage 3 阶段,让我们等待它获得批准,然后我们就能无处不在地看到这难以置信的语法的使用。

总结

让我们为了编写更清晰、易维护的代码,学习并尝试新的技巧和技术,因为在几个月后,长长的条件看起来像搬石头砸自己的脚。 ?

到此这篇关于如何利用JavaScript编写更好的条件语句的文章就介绍到这了,更多相关JavaScript条件语句内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
JS字符串截取函数实例
Dec 27 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
element中的$confirm的使用
Apr 26 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 #Javascript
js实现计算器功能
Aug 10 #Javascript
js实现盒子拖拽动画效果
Aug 09 #Javascript
js实现盒子移动动画效果
Aug 09 #Javascript
js实现弹窗效果
Aug 09 #Javascript
js实现表格数据搜索
Aug 09 #Javascript
js实现微信聊天界面
Aug 09 #Javascript
You might like
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
JavaScript中的私有成员
2006/09/18 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
python web基础之加载静态文件实例
2018/03/20 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
增员口号大全
2014/06/18 职场文书
企业公益活动策划方案
2014/08/24 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
授权委托书协议书
2014/10/16 职场文书
行为习惯主题班会
2015/08/14 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
全网非常详细的pytest配置文件
2022/07/15 Python