如何避免在 JS 脚本上过多使用 if 语句? 本篇文章给大家分享一些方法来我们在 JS 中过多的使用 if 语句. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
最近在重构代码时, 我发现早期的代码使用太多的 if 语句, 其程度是我从未见过的. 这就是为什么我认为分享这些简单的技巧是非常重要的, 这些技巧可以帮助我们避免过多的使用 if 语句.
接下来会介绍 6 种方式来代替 if 的使用, 这样做不是坚决不使用 if 偏执狂, 而是换个方式思考我们的编码思路.
1, 三元运算符
我们来谈谈这个 "条件 ? 表达式 1 : 表达式 2", 很简单的.
范例 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
- }}
重构后代码:
- // ES6 style custom formatted ternary magic
- 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 = Windows.event;
- }
- if (!evt) {
- return;
- }
- const target;
- if (evt.target) {
- target = evt.target;
- } else {
- target = evt.srcElement;
- }
- return target;
- }
重构后代码:
- function getEventTarget(evt) {
- evt = evt || Windows.event;
- return evt && (evt.target || evt.srcElement);
- }
2, 短路运算符
它是一种使用 AND 和 OR 运算符来计算表达式的技术.
- https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb
- true || true;
- // true
- true || false;
- // true
- false || false;
- // false
范例 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
- };
- //Apply the short circuit to avoid the if.
- 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 = ()=>{};
- //Apply short circuit in this case, the loan is evaluated true because !=undefined
- 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());
- }
4, 非分支策略
此技巧尝试避免使用 switch 语句. 其思想是用键 / 值创建一个映射并使用一个函数访问作为参数传递的键的值.
这个想法来自以下链接: https : //medium.com/chrisburgin/rewriting-JavaScript-replacing-the-switch-statement-cfff707cf045
范例 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 中函数是第一个类, 所以使用它我们可以把代码分割成一个函数对象.
范例 1
带有 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 中多态性最常见的用法是使用父类引用来引用子类对象.
范例 1
带有 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));
重构后代码:
- //Create function to different behaviour, same parameter call.
- 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
- };
- //Same call.
- console.log('Salary',bob.calc(bob.salary));
- console.log('Salary',mary.calc(mary.salary));
来源: http://www.css88.com/web/javascript/17974.html