文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript多级判定代码如何优化

2023-07-05 05:26

关注

本篇内容介绍了“JavaScript多级判定代码如何优化”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

一、场景

业务代码里, 一次操作可能会前置多个判定, 我以前只是在函数的开头使用if语句去做这些事情, 虽然只是拦截一下不需要做else, 但是好多个判定堆在一起看着会有点…low, 而且, 如果这些东西堆在函数开头的话, 看起来就像这样:

xxx () {  xxx  xxx  xxx  xxx  xxxxxxxxxxxxxxxxxxxxxxx  xxxxxxxxxxxxxxxxxxxxxxxxxxx  xxxxxxxxxxxxxxxxxxxxxxxxxxxxx  xxxxxxxxxxxxxxxxxxxxxxxxxx  xxxxxxxxxxxxxxxxxxxxxxxx  xxxxxxxxxxxxx}

像在竖大拇指 ), 咳…说回这种方法.

这其实是使用二元运算符 "&&"完成的一种简化写法, 可以理解为一种没有else的三元运算(因为我的逻辑里需要这种没有处理办法的写法), 我原本以为它需要void来驱动…的确可以在这种表达式外围包裹void, 我的确是这么做的, 整整一天.

void 运算符对给定的表达式进行求值,然后返回 undefined。

但其实根本没必要, void与否并不干扰执行.

在Vue源码(此处仅指Vue2.6版, 我最近在看这个)里有大量的运用逻辑运算符来表达 “那么” 或者 “so” 的写法, 比如

src/core/vdom/patch.js中的这个函数.

function sameInputType (a, b) {  if (a.tag !== 'input') return true  let i  const typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type  const typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type  return typeA === typeB || isTextInputType(typeA) && isTextInputType(typeB)}

二、优化多级判定

最初我在使用这种改进后的if结构, 不再使用包裹式, 而是这种像闸口一样的结构.

当然特殊情况也还是要用if-else结构, 能优化就优化, 不能也不要强求.

1.优化if-else结构

就像这样:

if() {
  if() {

  } else if() {
  
  } else if() {

  }
} else if () {
  if() {

  } else if() {

  } else {

  }
}

再复杂一些, 再在内部加入各种逻辑, 就有些头疼了.

完全可以把每个条件单独分出一个if, 顺序不变, 比如以上可以优化为:

if () {
  if () {

  }
  if () {

  }
  if() {

  }
}
if () {
  if () {

  }
  if () {

  } else { // else一般没什么办法...

  }
}

else if里的"或"关系也可以单独拆一个 if 出来, 在看起来很复杂的情况下, 提升可读性.

图示一下的话, if-else-if结构就像深墙老院:

JavaScript多级判定代码如何优化

优化后的if结构更像是关隘:

JavaScript多级判定代码如何优化

有一个专有名词validation gatekeeping(验证守护), 即是描述这种验证结构.

但是一定注意判定条件的次序, 有些地方是必须用else if的, 否则会出现一个条件同时执行了多套处理方案的情况比如下面这个例子:

for (const key in newWorld) {  if (key === 'webglGroup') {    this.worldList[oldWorldIndex][key]['children'] = this.worldList[oldWorldIndex][key]['children'].filter((ele) => { return ele.type !== 'Group' });    this.worldList[oldWorldIndex][key]['children'].push(...newWorld[key]['children'].filter((ele) => { return ele.type === 'Group' }));    for (const pro in newWorld[key]) pro !== 'children' && pro !== 'position' && pro !== 'rotation' && pro !== 'quaternion' && pro !== 'scale' && (this.worldList[oldWorldIndex][key][pro] = newWorld[key][pro]);  } else if (key !== 'frameInfo') this.worldList[oldWorldIndex][key] = newWorld[key];}

这里把else if替换成if就会导致keywebglGroup时两条逻辑均会被执行.

所以原则还是能优化的优化.

2.二元运算符简化

嵌套else-if结构不太好用这种方式, 对于优化后的if结构用二元运算符重写, 个人觉得外层的大判定还是用if可读性会更好, 内部小判定用二元符简洁, 但其实你要是用二元运算符做嵌套判定结构的话, 层级问题会难以处理, 多个’&&'运算连在一起的时候JavaScript会将其解析为 仅最后一个&&为判定, 其他&&全表示 ‘和’ 关系.

当然如果你愿意在里面写函数的话是可以解决这个问题的, 用三元运算符做大判定也是可以的, 但是不好…

重写成如下:

if (10 > a > 0) {  a > 1 && b > 3 && console.log('HelloWorld_1');  (a > 2 && b > 4  ||  a === 100 && b > 10) && console.log('HelloWorld_2')  // 这句可以再拆一个if出来的, 只是为了说明判定原理, 括号需要加  // a大于2并b大于4 或 a等于100并b大于10 均可输出HelloWorld_2}if (a > 10) {  // 可以结合三元运算符  a === 12 ? c === 3 && console.log("a") : (b === 6 || c === 3 && a !== 15) && console.log("b")  // 如何让前端同事追杀自己  // 如果a等于12, 判定如果c等于3输出a  // 如果a不等于12, 判定b等于6或c等于3并且a不为15,输出b}

但是这种逻辑运算符我现在没有找到能在判定完成之后跳出执行的方法, 也就是说你可以用这个方法沿路做一些顺手的操作, 但是不能像在if里那样做完判定可以return跳出函数.

const a = 3 < 4 && 1console.log(a)

然后, 额, 你可以用这种方法返回值。目的是提升可读性和简洁化代码, 如果一个很长的处理方案或者很长的条件就这样安插在二元运算符中间, 适得其反.

“JavaScript多级判定代码如何优化”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯