使用 javascript 简化具有多个变量的条件

Question

我正在开发 jquery 数据表格插件，需要根据某些条件过滤 table 数据。我主要有 2 个 select 框，每个框有 4 个选项。当我 select 下拉菜单时，我想根据 selected 值对数据 table 进行排序。在这里，我想从数据 table 中对年龄和薪水列进行排序。我可以通过检查一些条件来对数据进行排序，但我认为这不是正确的方法。如果有任何新选项出现，也需要检查一下。所以在这里我想知道是否有任何简单的方法可以通过减少条件的数量来实现这一目标。

这是我的下拉列表

Age:
<select id="min" name="min" class="filter">
    <option value="0">Select</option>
    <option value="1">20 and 30</option>
    <option value="2">30 and 40</option>
    <option value="3">>50</option>
</select>

Salary: 
<select id="max" name="max" class="filter">
    <option value="0">Select</option>
    <option value="1">50k and 80k</option>
    <option value="2">80k and 90k</option>
    <option value="3">>1 Lakh</option>
</select>

这是我写的条件，对我有用。

var min    = parseInt( $('#min').val());  
var max    = parseInt( $('#max').val()); 
var age    = parseFloat( data[3] ) || 0; 
var salary = parseFloat( data[5] ) || 0;

            if(min==0 && max==0){
                return true;
            }else if(min==1 && max==0){
                var maxAge = 30;
                var minAge = 20;               
                if ( (age >= minAge && age<=maxAge) ){
                    return true;
                }  
            }else if(min==2 && max==0){
                var maxAge = 40;
                var minAge = 30;
                if ( (age > minAge && age<=maxAge) ){
                    return true;
                }   
            }else if(min==3 && max==0){
                var maxAge = '';
                var minAge = 50;
                if ( (age >= minAge ) ){
                    return true;
                }
            }else if(min==0 && max==1){                
                var maxSal = 80000;
                var minSal = 50000;
                if ( (salary >= minSal && salary<=maxSal) ){
                    return true;
                } 

            }else if(min==0 && max==2){                
                var maxSal = 90000;
                var minSal = 80000;
                if ( (salary > minSal && salary<=maxSal) ){
                    return true;
                } 

            }else if(min==0 && max==3){                
                var maxSal = '';
                var minSal = 100000;
                if ( (salary >= minSal ) ){
                    return true;
                }

            }else if(min==1 && max==1){                
                var maxAge = 30;
                var minAge = 20;
                var maxSal = 80000;
                var minSal = 50000;
                if ( (age >= minAge && age<=maxAge) && (salary >= minSal && salary<=maxSal) ){
                    return true;
                }  

            }else if(min==1 && max==2){                
                var maxAge = 30;
                var minAge = 20;
                var maxSal = 90000;
                var minSal = 80000;
                if ( (age >= minAge && age<=maxAge) && (salary > minSal && salary<=maxSal) ){
                    return true;
                }  

            }
            else if(min==1 && max==3){                
                var maxAge = 30;
                var minAge = 20;
                var maxSal = '';
                var minSal = 100000;
                if ( (age >= minAge && age<=maxAge) && (salary >= minSal) ){
                    return true;
                }  

            }else if(min==2 && max==1){                
                var maxAge = 40;
                var minAge = 30;
                var maxSal = 80000;
                var minSal = 50000;
                if ( (age > minAge && age<=maxAge) && (salary >= minSal && salary<=maxSal) ){
                    return true;
                }  

            }
            else if(min==2 && max==2){                
                var maxAge = 40;
                var minAge = 30;
                var maxSal = 90000;
                var minSal = 80000;
                if ( (age > minAge && age<=maxAge) && (salary > minSal && salary<=maxSal) ){
                    return true;
                }  

            }else if(min==2 && max==3){                
                var maxAge = 40;
                var minAge = 30;
                var maxSal = '';
                var minSal = 100000;
                if ( (age > minAge && age<=maxAge) && (salary >= minSal) ){
                    return true;
                }  

            }else if(min==3 && max==1){                
                var maxAge = '';
                var minAge = 50;
                var maxSal = 80000;
                var minSal = 50000;
                if ( (age >= minAge) && (salary >= minSal && salary<=maxSal) ){
                    return true;
                }  

            }else if(min==3 && max==2){                
                var maxAge = '';
                var minAge = 50;
                var maxSal = 90000;
                var minSal = 80000;
                if ( (age >= minAge) && (salary > minSal && salary<=maxSal) ){
                    return true;
                }  

            }else if(min==3 && max==3){                
                var maxAge = '';
                var minAge = 50;
                var maxSal = '';
                var minSal = 100000;
                if ( (age >= minAge) && (salary >= minSal) ){
                    return true;
                }  

            }
            return false;
        }

除了写冗长的 if else 条件，你们能用任何简单的方法帮助我解决这个问题吗？

Answer 1

不知道这是否是您真正需要的。但是您可以通过将条件用作变量并稍后使用 &&.

返回它来减少 if 语句

年龄HTML：

<select id="ageRange" class="filter">
    <option value="0">Select</option>
    <option value="1">20 and 30</option>
    <option value="2">30 and 40</option>
    <option value="3">40 and 50</option>    
    <option value="4">>50</option>
</select>

工资HTML：

<select id="salRange" class="filter">
    <option value="0">Select</option>
    <option value="1">50k and 80k</option>
    <option value="2">80k and 90k</option>
    <option value="3">90k and 1 Lakh</option>
    <option value="4">>1 Lakh</option>
</select>

JS

var ageRange = parseInt($('#ageRange').val());  
var salRange = parseInt($('#salRange').val());
var age = parseFloat( data[3] ) || 0; 
var salary = parseFloat( data[5] ) || 0;
var ageCondition = true;
var salCondition = true;

// { Your loop code starts here

    switch (ageRange) {
        case 1:
            ageCondition = (age >= 20 && age <= 30);
            break;
        case 2:
            ageCondition = (age >= 30 && age <= 40);
            break;        
        case 3:
            ageCondition = (age >= 40 && age <= 50);
            break;  
        case 4:
            ageCondition = (age >= 50);
            break;
    }

    switch (salRange) {
        case 1:
            salCondition = (salary >= 50000 && salary <= 80000);
            break;
        case 2:
            salCondition = (salary >= 80000 && salary <= 90000);
            break;
        case 3:
            salCondition = (salary >= 90000 && salary <= 100000);
            break;                
        case 4:
            salCondition = (salary >= 100000);
            break;
    }

    return ageCondition && salCondition; // returns true if both conditions are true

// } your loop code ends here

Note: I've added age 40-50 & salary 90k-1lac which I thought was missing

使用 javascript 简化具有多个变量的条件

Simplify if condition with multiple variable using javascript

variables

conditional

if-statement