作者：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和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。