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

【问题标题】：Declaring forEach globally and using it in functions全局声明 forEach 并在函数中使用它
【发布时间】：2018-11-13 14:55:09
【问题描述】：

我有一个名为 employees 的 10 个元素的 JSON，如下所示

{
   "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 并在所有函数中使用它。提前致谢

【问题讨论】：

是的，你可以从你的所有按钮调用一个函数，只要你告诉它每次需要做不同的事情。在这种情况下，if 语句的参数似乎是唯一变化的东西，因此这些值将用作单个函数的输入参数。（P.S. 像这样抽象代码并挑选出可变的事物和每次都相同的事物的能力是一项关键技能，如果您希望能够编写精益、非重复的代码）。
@ADyson 非常感谢您的宝贵意见 :)

标签： javascript json foreach

【解决方案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>`
        }
    })
}

【讨论】：

非常感谢，我期待的那个。 :-)

【解决方案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));

【讨论】：