Question

我有一个名为雇员的JSON，其中包含10个元素，如下所示

{
   "name" : "Prem",
   "dob"  : "10-10-1992"
},

三个按钮，每个按钮都有特定功能

document.getElementById('btn-25').addEventListener('click',ageCategory25)
document.getElementById('btn-50').addEventListener('click',ageCategory50)
document.getElementById('btn-100').addEventListener('click',ageCategory100)

const output = document.getElementById('result2')


function ageCategory25(){
    output.innerHTML =''
     employees.forEach(function(employee){
        const ageFilter = getAge(employee.dob)
        if(ageFilter < 25 ){
            output.innerHTML += `<h3> ${employee.name} </h3>`
        }
    })
}

function ageCategory50(){
    output.innerHTML =''
    employees.forEach(function(employee){
        const ageFilter = getAge(employee.dob)
         if(ageFilter >= 25 && ageFilter<=50){
            output.innerHTML += `<h3> ${employee.name} </h3>`
       }
    })
}

function ageCategory100(){
    output.innerHTML =''
    employees.forEach(function(employee){
        const ageFilter = getAge(employee.dob)
         if(ageFilter >= 50 && ageFilter<=100){
            output.innerHTML += `<h3> ${employee.name} </h3>`
       }
    })
}


function getAge(date){
    const currentAge = Math.floor((new Date() - new Date(date).getTime())/31556925994)
    return currentAge
}

上面的代码正常工作，我能够按照按钮中提到的年龄获得结果。但是，我要在所有函数中声明forEach循环，有没有一种方法可以全局声明一次forEach并在所有函数中使用它。预先感谢

Answer 1

您可以通过一个函数接收25,50,100。

document.getElementById('btn-25').addEventListener('click',()=>ageCategory(25))
document.getElementById('btn-50').addEventListener('click',()=>ageCategory(50))
document.getElementById('btn-100').addEventListener('click',()=>ageCategory(100))


function ageCategory(n){
    output.innerHTML =''
    employees.forEach(function(employee){
        const ageFilter = getAge(employee.dob)
        if(n === 25 && ageFilter < 25 ){
            output.innerHTML += `<h3> ${employee.name} </h3>`
        }
        else if(n === 50 && ageFilter >= 25 && ageFilter<=50){
            output.innerHTML += `<h3> ${employee.name} </h3>`
        }
        else if(n === 100 && ageFilter >= 50 && ageFilter<=100){
            output.innerHTML += `<h3> ${employee.name} </h3>`
        }
    })
}

更新：我认为可能会更好一点：

function ageCategory(n) {
    output.innerHTML = '';
    let filter;
    if      (n === 25)   { filter = (x) => (x < 25);            }
    else if (n === 50)   { filter = (x) => (x >= 25 && x <= 50) }
    else if (n === 100)  { filter = (x) => (x >= 50 && x<=100)  }
    employees.forEach(function(employee){
        const ageFilter = getAge(employee.dob);
        if(filter(ageFilter)){
            output.innerHTML += `<h3> ${employee.name} </h3>`
        }
    })
}

Answer 2

您可以创建如下功能：

function ageCategory(age){
  output.innerHTML =''
  employees.forEach(function(employee){
    const ageFilter = getAge(employee.dob)
    if(age == 25 && ageFilter < 25 ){
      output.innerHTML += `<h3> ${employee.name} </h3>`
    }
    else if(age == 50 && ageFilter >= 25 && ageFilter <= 50){
      output.innerHTML += `<h3> ${employee.name} </h3>`
    } 
    else if(age == 100 && ageFilter >= 50 && ageFilter <= 100){
      output.innerHTML += `<h3> ${employee.name} </h3>`
    }
  }    
}

然后通过类似以下方式传递年龄，将函数用作addEventListener()的回调：

document.getElementById('btn-25').addEventListener('click', ageCategory(25));
document.getElementById('btn-50').addEventListener('click', ageCategory(50));
document.getElementById('btn-100').addEventListener('click', ageCategory(100));

全局声明forEach并在函数中使用它

2 个答案: