Javascript 开发中 if/else 的正确开启方式

引言

代码中嵌套太多的 if/else 语句首先代码不美观,其次是不易于理解。以下将从 ① 优化 ②switch/case ③ 策略模式 3 个方面来进行阐释如何优化 JS 开发中 if/else 语句的使用。

优化 篇

if/else 的存在是有一定意义的,不能全盘否定或杜绝使用 if/else 语句,适当的时候进行一些必要的优化也是允许的。

let a = true,
  b = false;

// Bad
if (a) {
  a = a;
} else {
  a = b;
}

// Good
a = a || b;
// Bad
if (a == b) {
  a = c;
} else {
  a = d;
}

// Good
a = a == b ? c : d;

假定某商店有 5 种水果,现在店主需要统计各水果带来的收益,进而考虑下一次进货各水果的比重,此时我们可能会这样进行代码的编写:

// fruit 为后台返回的数据
if (fruit === "苹果") {
  // ...
} else if (fruit === "梨子") {
  // ...
} else if (fruit === "桔子") {
  // ...
} else if (fruit === "柠檬") {
  // ...
} else {
  // ...
}

这样写虽然能满足计算各水果的收益,但是欠缺日常生活的思考。水果店水果的销售是会产生畅销与滞销这 2 种情况的,代码应该优先将畅销的水果放在前面进行统计,滞销的水果放在后面进行统计,这样程序将会减少不必要的判断来采取是否执行区块代码。假定畅销排行为:桔子 > 苹果 > 梨子 > 柠檬 > 芒果,我们应该这样子进行书写 if/else 语句:

// fruit 为后台返回的数据
if (fruit === "桔子") {
  // ...
} else if (fruit === "苹果") {
  // ...
} else if (fruit === "梨子") {
  // ...
} else if (fruit === "柠檬") {
  // ...
} else {
  // ...
}

如果我们保持原来的代码不变,则滞销的水果在进行统计的时候就必须进行多次判断方能执行统计,导致整个 if/else 表达式的平均运算时间增加。if 中的条件体应该总是按照从最大概率到最小概率排列,以保证理论速度最快。

我们也可以使用 Hash 表来进行优化上面的代码:

const fruitArr = ["桔子", "苹果", "梨子", "柠檬", "芒果"];
const profitArr = [0.9, 0.8, 0.7, 0.6, 0.5];
const countArr = [300, 280, 260, 240, 220];

// fruit 为后台返回的数据
const fruitIndex = fruitArr.indexOf(fruit);

return profitArr[fruitIndex] * countArr[fruitIndex];

这里定义了 3 个数组,分别来存储水果的类型,水果的收益率与水果的销售量,它们之间的 index 是一一对应的,因此只需要知道是什么类型的水果我们就能计算出该类型的水果收益,这可以说直接将 if/else 语句杜绝了。当然如果再进一步优化我们可以将收益率与销售量这 2 个值先存于 Object 中,后再将这些 Object 都存放在一个 Array 里,这样子代码的关联性就更好了

还有一种优化的手段是尽量减少 else 的使用,如果在函数中,可以使用 if + return,先判断错误条件,后立马结束函数,防止进入 else 分支。比如请求后台数据时:

if (data.status === 'success') {
  // ...
} else if (data.status === 'fail')) {
  // ...
} else {
  // ...
}

switch/case 篇

switch/case 与 if/else 在性能上没有什么区别,需要根据需求进行分析和选择。如果条件数量较小的话选用 if/else 比较合适,如果条件数量较大的话 switch/case 比较合适。一般来说,if/else 适用于两个离散的值或不同的值域,switch/case 适用于多个离散值。在大多数情况下 switch/case 与 if/else 都能能达到完全一样的效果,只不过使用 switch/case 要比 if/else 方便不少,比如匹配一些状态常量的时候,switch/case 比 if/else 方便许多,不用反复写等值判断(如 a === b)

const requestUrl = "";
try {
  const result = await $axios.get(requestUrl);

  switch (result.data.stateCode) {
    case 200:
      // ...
      break;
    case 500:
      // ...
      break;
    default:
    // ...
  }
} catch (err) {
  console.error(JSON.stringify(err));
}

需要注意的是每一个 case 语句后面需要跟随一个 break 语句或者一个 return 语句或者一个 throw 语句。case 语句匹配表达式用的是全等(===)而不是部分等(==)。

策略模式 篇

策略模式(Strategy),定义了一组算法,将每个算法都封装起来,并且使它们之间可以互换。

在 Hash 表的优化中我们发现统计收益并不是这么简单的事情,这时既可以采用 switch/case 来解决,也可以采用策略模式来解决

const fruitStrategies = {
  '桔子': fruit => {
    // ...
  },
  '苹果': fruit => {
    // ...
  },
  '梨子': fruit => {
    // ...
  },
  '柠檬': fruit => {
    // ...
  },
  '芒果': fruit => {
    // ...
  }
};

// fruit 为后台返回的数据
const calculateProfitByFruit = fruit => fruitStrategies[fruit]

引入策略模式看似增加了不少的代码量,但却让整个代码的逻辑变得更加清晰,它使得我们的代码更具有可读性与可维护性,同时对单元测试更友好,因为每一个策略就是一个函数,这样子大大减小了测试的粒度与复杂性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容