如何使用 array.filter() 方法过滤 JavaScript 数组？

Question

我有一个 JavaScript 对象 ( filters)，它具有布尔值。我还有一个对象数组 ( mainSubArray)。基于 JavaScript Object，filteredArray如果布尔值为真，我想返回一个新数组 ( )，如果布尔值为假，我想不返回新数组。到目前为止，我已经尝试了以下方法：// The main array that needs to be filteredconst mainSubArray = [{    MenB_Classification: "NOT Required",    CONTROL: "Public",    Enrollment: "892"  },  {    MenB_Classification: "Required",    CONTROL: "Private",    Enrollment: "1601"  },  {    MenB_Classification: "NOT Required",    CONTROL: "Private",    Enrollment: "447"  },  {    MenB_Classification: "NOT Required",    CONTROL: "Public",    Enrollment: "1203"  },  {    MenB_Classification: "Required",    CONTROL: "Private",    Enrollment: "32"  },  {    MenB_Classification: "NOT Required",    CONTROL: "Public",    Enrollment: "98"  },  {    MenB_Classification: "Recommended",    CONTROL: "Private",    Enrollment: "654"  },  {    MenB_Classification: "NOT Required",    CONTROL: "Private",    Enrollment: "345318"  },  {    MenB_Classification: "NOT Required",    CONTROL: "Private",    Enrollment: "13324"  },  {    MenB_Classification: "Recommended",    CONTROL: "Private",    Enrollment: "39"  },  {    MenB_Classification: "NOT Required",    CONTROL: "Private",    Enrollment: "4"  },  {    MenB_Classification: "NOT Required",    CONTROL: "Private",    Enrollment: "910"  },  {    MenB_Classification: "NOT Required",    CONTROL: "Private",    Enrollment: "23453"  }]// Object with boolean valuesvar filters = {  required: true,  recomended: true,  notRequired: false,  publics: true,  privates: true,  ennrollmentOne: true,  ennrollmentTwo: false,  ennrollmentThree: false,  ennrollmentFour: false,}// New Array using array.filter() methodvar filteredArray = mainSubArray.filter(function(d) {    return true;  } else {    return false;  }});console.log(filteredArray);当 I 时console.log(filteredArray)，我取回原始数组。输出应该是一个新数组，其中只有filters对象中设置为 true 的值。

Answer 1

您可以使用一组字符串作为过滤器对象的键，并根据函数检查对象的所需键及其所需值。

在过滤器函数中，如果需要一个函数并且结果是 ，则迭代关键函数数组并提前退出true。

结果是来自原始 13 个对象的 12 个对象的数组。

var data = [{ MenB_Classification: "NOT Required", CONTROL: "Public", Enrollment: "892" }, { MenB_Classification: "Required", CONTROL: "Private", Enrollment: "1601" }, { MenB_Classification: "NOT Required", CONTROL: "Private", Enrollment: "447" }, { MenB_Classification: "NOT Required", CONTROL: "Public", Enrollment: "1203" }, { MenB_Classification: "Required", CONTROL: "Private", Enrollment: "32" }, { MenB_Classification: "NOT Required", CONTROL: "Public", Enrollment: "98" }, { MenB_Classification: "Recommended", CONTROL: "Private", Enrollment: "654" }, { MenB_Classification: "NOT Required", CONTROL: "33033764030", Enrollment: "345318" }, { MenB_Classification: "NOT Required", CONTROL: "Private", Enrollment: "13324" }, { MenB_Classification: "Recommended", CONTROL: "Private", Enrollment: "39" }, { MenB_Classification: "NOT Required", CONTROL: "Private", Enrollment: "4" }, { MenB_Classification: "NOT Required", CONTROL: "Private", Enrollment: "910" }, { MenB_Classification: "NOT Required", CONTROL: "Private", Enrollment: "23453" }],

    filters = {

        required: true,

        recomended: true,

        notRequired: false,

        publics: true,

        privates: true,

        ennrollmentOne: true,

        ennrollmentTwo: false,

        ennrollmentThree: false,

        ennrollmentFour: false,

    },

    fn = [

        ['required', o => o.MenB_Classification === 'Required'],

        ['recomended', o => o.MenB_Classification === 'Recommended'],

        ['notRequired', o => o.MenB_Classification === 'NOT Required'],

        ['publics', o => o.CONTROL === 'Public'],

        ['privates', o => o.CONTROL === 'Private'],

        ['ennrollmentOne', o => o.Enrollment < 100],

        ['ennrollmentTwo', o => o.Enrollment >= 100 && o.Enrollment < 1000],

        ['ennrollmentThree', o => o.Enrollment >= 1000 && o.Enrollment < 5000],

        ['ennrollmentFour', o => o.Enrollment >= 5000]

    ],

    result = data.filter(o => fn.some(([k, f]) => filters[k] && f(o)));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

它有效，但您的条件几乎涵盖了所有情况。

即使在您的情况下，它也能工作，因为结果包含 12 个元素而不是 13 个。它不包含：

{

    MenB_Classification: "NOT Required",

    CONTROL: "33033764030",

    Enrollment: "345318"

  },

Answer 3

我假设你想这样做：

var data = [{ MenB_Classification: "NOT Required", CONTROL: "Public", Enrollment: "892" }, { MenB_Classification: "Required", CONTROL: "Private", Enrollment: "1601" }, { MenB_Classification: "NOT Required", CONTROL: "Private", Enrollment: "447" }, { MenB_Classification: "NOT Required", CONTROL: "Public", Enrollment: "1203" }, { MenB_Classification: "Required", CONTROL: "Private", Enrollment: "32" }, { MenB_Classification: "NOT Required", CONTROL: "Public", Enrollment: "98" }, { MenB_Classification: "Recommended", CONTROL: "Private", Enrollment: "654" }, { MenB_Classification: "NOT Required", CONTROL: "33033764030", Enrollment: "345318" }, { MenB_Classification: "NOT Required", CONTROL: "Private", Enrollment: "13324" }, { MenB_Classification: "Recommended", CONTROL: "Private", Enrollment: "39" }, { MenB_Classification: "NOT Required", CONTROL: "Private", Enrollment: "4" }, { MenB_Classification: "NOT Required", CONTROL: "Private", Enrollment: "910" }, { MenB_Classification: "NOT Required", CONTROL: "Private", Enrollment: "23453" }],

    filters = {

        required: true,

        recomended: true,

        notRequired: false,

        publics: true,

        privates: true,

        ennrollmentOne: true,

        ennrollmentTwo: false,

        ennrollmentThree: false,

        ennrollmentFour: false,

    },

    filteredArray = data.filter(function (d) {

      return ( // check MenB_Classification

           (filters.required && d.MenB_Classification === "Required")

        || (filters.recomended && d.MenB_Classification === "Recommended")

        || (filters.notRequired && d.MenB_Classification === "NOT Required")

      ) && ( // check CONTROL

           (filters.publics && d.CONTROL === "Public")

        || (filters.privates && d.CONTROL === "Private")

      ) && ( // check Enrollment

           (filters.ennrollmentOne && d.Enrollment < 100)

        || (filters.ennrollmentTwo && d.Enrollment >= 100 && d.Enrollment < 1000)

        || (filters.ennrollmentThree && d.Enrollment >= 1000 && d.Enrollment < 5000)

        || (filters.ennrollmentFour && d.Enrollment > 5000)

      );

    });

console.log(filteredArray);

这里有一个更详细的版本。我已将过滤器分离为每个属性的一个函数：

我不知道这是否与您相关，但我还添加了没有为属性设置过滤器的情况。

function filterByClassification(d){

    return (filters.required && d.MenB_Classification === "Required")

        || (filters.recomended && d.MenB_Classification === "Recommended")

        || (filters.notRequired && d.MenB_Classification === "NOT Required")

        // or no filter set for MenB_Classification

        || (!filters.required && !filters.recomended && !filters.notRequired);

}

function filterByControl(d){

    return (filters.publics && d.CONTROL === "Public")

        || (filters.privates && d.CONTROL === "Private")

        // or no filter set for CONTROL

        || (!filters.publics && !filters.privates);

}

function filterByEnrollment(d){

    return (filters.ennrollmentOne && d.Enrollment < 100)

        || (filters.ennrollmentTwo && d.Enrollment >= 100 && d.Enrollment < 1000)

        || (filters.ennrollmentThree && d.Enrollment >= 1000 && d.Enrollment < 5000)

        || (filters.ennrollmentFour && d.Enrollment > 5000)

        // or no filter set for Enrollment

        || (!filters.ennrollmentOne && !filters.ennrollmentTwo && !filters.ennrollmentThree && !filters.ennrollmentFour); 

}

filteredArray = data.filter(function (d) {

    // for every property, there must be one filter fulfilled

    return filterByClassification(d) 

        && filterByControl(d) 

        && filterByEnrollment(d);

});

而您的代码相当于：

filteredArray = data.filter(function (d) {

    // if any condition at all is fulfilled, keep the item

    return filterByClassification(d) 

        || filterByControl(d) 

        || filterByEnrollment(d);

});`