江苏龙网

  1. 主页 > 生活百科 > >

JS小知识，使用这6个小技巧，避免过多的使用 if 语句

JS

最近在重构我的代码时，我注意到早期的代码使用了太多的 if 语句，达到了我以前从未见过的程度 。这就是为什么我认为分享这些可以帮助我们避免使用过多 if 语句的简单技巧很重要 。
接下来我们介绍 6 种使用 if 的方法 。这不是抵制使用if的偏执 ， 也不是不让大家以后不要用IF了，而是换一种方式来思考我们的编码思路 。
1、条件运算符1.1、例子1：
使用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'): customer1.2、例子2：
【JS小知识，使用这6个小技巧，避免过多的使用 if 语句】使用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、&&逻辑运算符2.1、例子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.2、例子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、Function Delegation使用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());}4、非分支策略使用Case:
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); //286、多态性多态性是一个对象具有多种形式的能力 。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));重构代码：


推荐阅读


上一篇：18个JavaScript技巧：编写简洁高效的代码

下一篇：MySQL数据库如何生成分组排序的序号