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

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>`
        }
    })
}