这些优化技巧可以避免我们在 JS 中过多的使用 IF 语句

最近在重构代码时，我发现早期的代码使用太多的 if 语句，其程度是我从未见过的。这就是为什么我认为分享这些简单的技巧是非常重要的，这些技巧可以帮助我们避免过多的使用 if 语句。

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

1. 三元运算符

事例1

带有IF的代码：

1function saveCustomer(customer) {
2  if (isCustomerValid(customer)) {
3    database.save(customer)
4  } else {
5    alert('customer is invalid')
6  }
7}

重构后代码：

1function saveCustomer(customer) {
2  return isCustomerValid(customer)
3    ? database.save(customer)
4    : alert('customer is invalid')
5}    

使用 ES6

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

1

事例2

带有IF的代码：

 1function customerValidation(customer) {
 2  if (!customer.email) {
 3    return error('email is require')
 4  } else if (!customer.login) {
 5    return error('login is required')
 6  } else if (!customer.name) {
 7    return error('name is required')
 8  } else {
 9    return customer
10  }
11}

重构后代码：

1const customerValidation = customer =>
2  !customer.email   ? error('email is required')
3  : !customer.login ? error('login is required')
4  : !customer.name  ? error('name is required')
5                    : customer

事例3

带有IF的代码：

 1function getEventTarget(evt) {
 2    if (!evt) {
 3        evt = window.event;
 4    }
 5    if (!evt) {
 6        return;
 7    }
 8    const target;
 9    if (evt.target) {
10        target = evt.target;
11    } else {
12        target = evt.srcElement;
13    }
14    return target;
15}

重构后代码：

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

2.短路运算符

事例1

带有IF的代码：

 1const isOnline = true;
 2const makeReservation= ()=>{};
 3const user = {
 4    name:'Damian',
 5    age:32,
 6    dni:33295000
 7};
 8
 9if (isOnline){
10    makeReservation(user);
11}

重构后代码：

1const isOnline = true;
2const makeReservation= ()=>{};
3const user = {
4    name:'Damian',
5    age:32,
6    dni:33295000
7};
8
9isOnline&&makeReservation(user);

事例2

带有IF的代码：

 1const active = true;
 2const loan = {
 3    uuid:123456,
 4    ammount:10,
 5    requestedBy:'rick'
 6};
 7
 8const sendMoney = ()=>{};
 9
10if (active&&loan){
11    sendMoney();
12}

重构后代码：

 1const active = true;
 2const loan = {
 3    uuid:123456,
 4    ammount:10,
 5    requestedBy:'rick'
 6};
 7
 8const sendMoney = ()=>{};
 9
10active && loan && sendMoney();

3.函数委托:

事例1

带有IF的代码：

 1function itemDropped(item, location) {
 2    if (!item) {
 3        return false;
 4    } else if (outOfBounds(location) {
 5        var error = outOfBounds;
 6        server.notify(item, error);
 7        items.resetAll();
 8        return false;
 9    } else {
10        animateCanvas();
11        server.notify(item, location);
12        return true;
13    }
14}

重构后代码：

 1function itemDropped(item, location) {
 2    const dropOut = function() {
 3        server.notify(item, outOfBounds);
 4        items.resetAll();
 5        return false;
 6    }
 7
 8    const dropIn = function() {
 9        server.notify(item, location);
10        animateCanvas();
11        return true;
12    }
13
14    return !!item && (outOfBounds(location) ? dropOut() : dropIn());
15}

4.非分支策略

此技巧尝试避免使用switch语句，相反是用键/值创建一个映射并使用一个函数访问作为参数传递的键的值。

事例1

带有switch的代码：

 1switch(breed){
 2    case 'border':
 3      return 'Border Collies are good boys and girls.';
 4      break;  
 5    case 'pitbull':
 6      return 'Pit Bulls are good boys and girls.';
 7      break;  
 8    case 'german':
 9      return 'German Shepherds are good boys and girls.';
10      break;
11    default:
12      return 'Im default'
13}

重构后代码：

1const dogSwitch = (breed) =>({
2  "border": "Border Collies are good boys and girls.",
3  "pitbull": "Pit Bulls are good boys and girls.",
4  "german": "German Shepherds are good boys and girls.",  
5})[breed]||'Im the default';
6
7
8dogSwitch("border xxx")

5.作为数据的函数

我们知道在JS中函数是第一个类，所以使用它我们可以把代码分割成一个函数对象。

带有IF的代码：

 1const calc = {
 2    run: function(op, n1, n2) {
 3        const result;
 4        if (op == "add") {
 5            result = n1 + n2;
 6        } else if (op == "sub" ) {
 7            result = n1 - n2;
 8        } else if (op == "mult" ) {
 9            result = n1 * n2;
10        } else if (op == "div" ) {
11            result = n1 / n2;
12        }
13        return result;
14    }
15}
16
17calc.run("sub", 5, 3); //2

重构后代码：

 1const calc = {
 2    add : function(a,b) {
 3        return a + b;
 4    },
 5    sub : function(a,b) {
 6        return a - b;
 7    },
 8    mult : function(a,b) {
 9        return a * b;
10    },
11    div : function(a,b) {
12        return a / b;
13    },
14    run: function(fn, a, b) {
15        return fn && fn(a,b);
16    }
17}
18
19calc.run(calc.mult, 7, 4); //28

6.多态性

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

带有IF的代码：

 1const bob = {
 2  name:'Bob',
 3  salary:1000,
 4  job_type:'DEVELOPER'
 5};
 6
 7const mary = {
 8  name:'Mary',
 9  salary:1000,
10  job_type:'QA'
11};
12
13const calc = (person) =>{
14
15    if (people.job_type==='DEVELOPER')
16        return person.salary+9000*0.10;
17
18    if (people.job_type==='QA')
19        return person.salary+1000*0.60;
20}
21
22console.log('Salary',calc(bob));
23console.log('Salary',calc(mary));

重构后代码：

 1const qaSalary  = (base) => base+9000*0.10;
 2const devSalary = (base) => base+1000*0.60;
 3
 4//Add function to the object.
 5const bob = {
 6  name:'Bob',
 7  salary:1000,
 8  job_type:'DEVELOPER',
 9  calc: devSalary
10};
11
12const mary = {
13  name:'Mary',
14  salary:1000,
15  job_type:'QA',
16  calc: qaSalary
17};
18
19console.log('Salary',bob.calc(bob.salary));
20console.log('Salary',mary.calc(mary.salary));

---

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

原文：https://dev.to/damxipo/avoid-use-if-on-our-js-scripts-1b95

---

交流

10个必须知道的Chrome开发工具和技巧

适合前端开和UI设计的20多个最佳;ICON库

27个CSS面试的高频考点助力金三银四

纯CSS特效，5分钟带你学会制作有个性的滚动条

将多个属性传递给 Vue 组件的几种方式