本文主要是介绍这些优化技巧可以避免我们在 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:332950007};89if (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};78const sendMoney = ()=>{};9
10if (active&&loan){
11 sendMoney();
12}
重构后代码：
1const active = true;2const loan = {3 uuid:123456,4 ammount:10,5 requestedBy:'rick'6};78const 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 }78 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};67const 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;34//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 组件的几种方式
这篇关于这些优化技巧可以避免我们在 JS 中过多的使用 IF 语句的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
