Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain "what are the ways to avoid excessive use of if statements in JS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the ways to avoid excessive use of if statements in JS?"

1. Ternary operator

(1) case 1

Code with IF:

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

The refactored code:

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

Use ES6

Const saveCustomer = customer = > isCustomerValid (customer)? Database.save (customer): alert ('customer is invalid')

(2) case 2

Code with 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}}

The refactored code:

Const customercustomerValidation = customer = >! customer.email? Error ('email is required'):! customer.login? Error ('login is required'):! customer.name? Error ('name is required'): customer

(3) case 3

Code with 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;}

The refactored code:

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

two。 Short circuit operator

(1) case 1

Code with IF:

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

The refactored code:

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

(2) case 2

Code with IF:

Const active = true; const loan = {uuid:123456, ammount:10, requestedBy:'rick'}; const sendMoney = () = > {}; if (active&&loan) {sendMoney ();}

The refactored code:

Const active = true; const loan = {uuid:123456, ammount:10, requestedBy:'rick'}; const sendMoney = () = > {}; ctive & & loan & & sendMoney ()

3. Function delegation

Case 1

Code with 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;}

The refactored code:

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. Non-branching strategy

This technique attempts to avoid using switch statements, instead creating a mapping with a key / value and using a function to access the value of the key passed as a parameter.

(1) case 1

Code with 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'}

The refactored code:

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. As a function of data

We know that a function is the first class in JS, so with it we can split the code into a function object.

Code with 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

The refactored code:

Const calc = {add: function (apeny b) {return a + b;}, sub: function (areco b) {return a-b;}, mult: function (areco b) {return a * b;}, div: function (areco b) {return a / b }, run: function (fn, ameme b) {return fn & & fn (arecom b);}} calc.run (calc.mult, 7,4); / / 28

6. Polymorphisms

Polymorphism is the ability of an object to have many forms. The most common use of polymorphism in OOP is to use parent class references to reference subclass objects.

Code with 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))

The refactored code:

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)) At this point, I believe you have a deeper understanding of "what are the ways to avoid excessive use of if statements in JS?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.