关于javascript:使用这些技巧优化-IF-语句

38次阅读

共计 4581 个字符，预计需要花费 12 分钟才能阅读完成。

作者：Damian Ciplat
译者：前端小智
起源：dev

点赞再看 ，微信搜寻【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。**

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588…

双 12 阿里服务器 27 块，通用点击这里购买能够找我返现 30，等于 27 块就能买到了，只限新用户，能够用家人的手机号购买！

最近在重构代码时，我发现晚期的代码应用太多的 if 语句，其水平是我从未见过的。这就是为什么我认为分享这些简略的技巧是十分重要的，这些技巧能够帮忙咱们防止过多的应用 if 语句。

接下来会介绍 6 种形式来代替 if 的应用，这样做不是坚定不应用 if 偏执狂，而是换个形式思考咱们的编码思路。

1. 三元运算符

事例 1

带有 IF 的代码：

function saveCustomer(customer) {if (isCustomerValid(customer)) {database.save(customer)
  } else {alert('customer is invalid')
  }
}

重构后代码：

function saveCustomer(customer) {return isCustomerValid(customer)
    ? database.save(customer)
    : alert('customer is invalid')
}

应用 ES6

const saveCustomer = customer =>
   isCustomerValid(customer)?
     database.save(customer) : alert('customer is invalid')

事例 2

带有 IF 的代码：

function customerValidation(customer) {if (!customer.email) {return error('email is require')
  } else if (!customer.login) {return error('login is required')
  } else if (!customer.name) {return error('name is required')
  } else {return customer}
}

重构后代码：

const customerValidation = customer =>
  !customer.email   ? error('email is required')
  : !customer.login ? error('login is required')
  : !customer.name  ? error('name is required')
                    : customer

事例 3

带有 IF 的代码：

function getEventTarget(evt) {if (!evt) {evt = window.event;}
    if (!evt) {return;}
    const target;
    if (evt.target) {target = evt.target;} else {target = evt.srcElement;}
    return target;
}

重构后代码：

function getEventTarget(evt) {
  evt = evt || window.event;
  return evt && (evt.target || evt.srcElement);
}

2. 短路运算符

事例 1

带有 IF 的代码：

const isOnline = true;
const makeReservation= ()=>{};
const user = {
    name:'Damian',
    age:32,
    dni:33295000
};

if (isOnline){makeReservation(user);
}

重构后代码：

const isOnline = true;
const makeReservation= ()=>{};
const user = {
    name:'Damian',
    age:32,
    dni:33295000
};

isOnline&&makeReservation(user);

事例 2

带有 IF 的代码：

const active = true;
const loan = {
    uuid:123456,
    ammount:10,
    requestedBy:'rick'
};

const sendMoney = ()=>{};

if (active&&loan){sendMoney();
}

重构后代码：

const active = true;
const loan = {
    uuid:123456,
    ammount:10,
    requestedBy:'rick'
};

const sendMoney = ()=>{};

active && loan && sendMoney();

3. 函数委托:

事例 1

带有 IF 的代码：

function itemDropped(item, location) {if (!item) {return false;} else if (outOfBounds(location) {
        var error = outOfBounds;
        server.notify(item, error);
        items.resetAll();
        return false;
    } else {animateCanvas();
        server.notify(item, location);
        return true;
    }
}

重构后代码：

function itemDropped(item, location) {const dropOut = function() {server.notify(item, outOfBounds);
        items.resetAll();
        return false;
    }

    const dropIn = function() {server.notify(item, location);
        animateCanvas();
        return true;
    }

    return !!item && (outOfBounds(location) ? dropOut() : dropIn());
}

大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。

我和阿里云单干服务器，折扣价比拟便宜：89/ 年，223/ 3 年，比学生 9.9 每月还便宜，买了搭建个我的项目，相熟技术栈比拟香（老用户用家人账号买就好了，我用我妈的)举荐买三年的划算点，点击本条就能够查看。

4. 非分支策略

此技巧尝试防止应用 switch 语句，相同是用键 / 值创立一个映射并应用一个函数拜访作为参数传递的键的值。

事例 1

带有 switch 的代码：

switch(breed){
    case 'border':
      return 'Border Collies are good boys and girls.';
      break;  
    case 'pitbull':
      return 'Pit Bulls are good boys and girls.';
      break;  
    case 'german':
      return 'German Shepherds are good boys and girls.';
      break;
    default:
      return 'Im default'
}

重构后代码：

const dogSwitch = (breed) =>({
  "border": "Border Collies are good boys and girls.",
  "pitbull": "Pit Bulls are good boys and girls.",
  "german": "German Shepherds are good boys and girls.",  
})[breed]||'Im the default';


dogSwitch("border xxx")

5. 作为数据的函数

咱们晓得在 JS 中函数是第一个类，所以应用它咱们能够把代码宰割成一个函数对象。

带有 IF 的代码：


const calc = {run: function(op, n1, n2) {
        const result;
        if (op == "add") {result = n1 + n2;} else if (op == "sub") {result = n1 - n2;} else if (op == "mult") {result = n1 * n2;} else if (op == "div") {result = n1 / n2;}
        return result;
    }
}

calc.run("sub", 5, 3); //2

重构后代码：

const calc = {add : function(a,b) {return a + b;},
    sub : function(a,b) {return a - b;},
    mult : function(a,b) {return a * b;},
    div : function(a,b) {return a / b;},
    run: function(fn, a, b) {return fn && fn(a,b);
    }
}

calc.run(calc.mult, 7, 4); //28

6. 多态性

多态性是对象具备多种形式的能力。OOP 中多态性最常见的用法是应用父类援用来援用子类对象。

带有 IF 的代码：

const bob = {
  name:'Bob',
  salary:1000,
  job_type:'DEVELOPER'
};

const mary = {
  name:'Mary',
  salary:1000,
  job_type:'QA'
};

const calc = (person) =>{if (people.job_type==='DEVELOPER')
        return person.salary+9000*0.10;

    if (people.job_type==='QA')
        return person.salary+1000*0.60;
}

console.log('Salary',calc(bob));
console.log('Salary',calc(mary));

重构后代码：


const qaSalary  = (base) => base+9000*0.10;
const devSalary = (base) => base+1000*0.60;

//Add function to the object.
const bob = {
  name:'Bob',
  salary:1000,
  job_type:'DEVELOPER',
  calc: devSalary
};

const mary = {
  name:'Mary',
  salary:1000,
  job_type:'QA',
  calc: qaSalary
};

console.log('Salary',bob.calc(bob.salary));
console.log('Salary',mary.calc(mary.salary));

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://dev.to/damxipo/avoid-…

交换

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。

正文完
javascript
发表至： javascript
2020-12-25
 0
React Hooks 从入门到上手
Object-对象的相关方法
在-Node-服务中发生-OOM-时如何监控内存
微信小程序内嵌H5