JavaScript 中的过滤对象

 本教程将介绍如何在 JavaScript 中过滤对象。我们将学习如何filter在数组数据类型中实现与ObjectJavaScript 中类似的方法。

目录

1.用reduce在javaScript中过滤对象

 2.使用map函数过滤JavaScript对象

---

1.用reduce在javaScript中过滤对象

现在让我们实现该函数以使用该函数过滤对象reduce。

假设我们有以下对象：

s = {
    linearAlgebra : 90,
    chemistry : 95
    biology :90
    languages : 96
}

 上述对象代表学生的成绩；我们需要过滤那个对象，只得到95分以上的科目。

var grades = {
    linearAlgebra : 90,
    chemistry : 95,
    biology :90,
    languages : 96
 };

Object.filter = function(mainObject, filterFunction){
    return Object.keys(mainObject)
          .filter( function(ObjectKey){
              return filterFunction(mainObject[ObjectKey])
          } )
          .reduce( function (result, ObjectKey){
              result[ObjectKey] = mainObject[ObjectKey];
              return result;
            }, {} );
}

console.log("The grades are ",grades);

var targetSubjects = Object.filter(grades, function(grade){
    return grade>=95;
});

console.log("Target Subjects are ",targetSubjects);

 输出：

"The grades are ", {
  biology: 90,
  chemistry: 95,
  languages: 96,
  linearAlgebra: 90
}
"Target Subjects are ", {
  chemistry: 95,
  languages: 96
}

我们按照上面的例子来实现这个Object.filter功能。Object.filter = function(mainObject, filterFunction)我们可以简化该示例代码，如下所示。

 

Object.filter = function(mainObject, filterFunction){
    return Object.keys(mainObject)
          .filter(innerFilterFunction )
          .reduce(reduceFunction, {} );
}

它有 3 个主要步骤来实现该Object.filter功能：

1. Object.keys()key-value从对象中的对中返回一个键数组。在linearAlgebra, chemistry, biology, languages我们的示例中。
2. 的结果Object.keys()被发送到回调函数innerFilterFunction，它也是过滤函数的一个参数，该函数的输出innerFilterFunction将是过滤后的键。输出chemistry, languages在我们的示例中。
3. 过滤器的结果现在传递给我们的reduce()函数，该函数将每个值添加到其键中，并返回一个包含所有这些对的新对象。所以我们例子中的结果是{chemistry: 95, languages: 96}。

如果我们想用arrowES6 的语法重新创建上面的例子，我们可以重写如下。

var grades = {
    linearAlgebra : 90,
    chemistry : 95,
    biology :90,
    languages : 96
 };

Object.filter = (mainObject, filterFunction)=>
    Object.keys(mainObject)
          .filter( (ObjectKey)=>filterFunction(mainObject[ObjectKey]))
          .reduce( (result, ObjectKey)=> ( result[ObjectKey] = mainObject[ObjectKey], result ), {} );

console.log("The grades are ",grades);

var targetSubjects = Object.filter(grades, (grade)=> grade>=95 );

console.log("Target Subjects are ",targetSubjects);

 输出：

 

The grades are  {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96}
Target Subjects are  {chemistry: 95, languages: 96}

它使用comma运算符返回result对象，也可以替换为Object.assign，它也返回结果。所以代码可以改写如下。 

Object.filter = (mainObject, filterFunction)=>
          Object.keys(mainObject)
          .filter( (ObjectKey)=>filterFunction(mainObject[ObjectKey]))
          .reduce( (result, ObjectKey)=> Object.assign(result , {[ObjectKey]: mainObject[ObjectKey] } ), {} );

 2.使用map函数过滤JavaScript对象

 正如我们reduce在上述解决方案中使用函数一样，我们也可以使用该map函数来过滤 JavaScript 对象。

 

Object.filter = function(mainObject, filterFunction){
    return Object.assign(...Object.keys(mainObject)
          .filter( function(ObjectKey){
              return filterFunction(mainObject[ObjectKey])
          } )
          .map( function (ObjectKey){
              return {[ObjectKey]: mainObject[ObjectKey]};
          }) );
}

我们将reduce函数替换map为如上所示的函数，并使用从to开始的所有操作的语法Object.assign使用和发送给它，所以完整的实现现在应该如下所示：spreadObject.keys().map() 

 

var grades = {
    linearAlgebra : 90,
    chemistry : 95,
    biology :90,
    languages : 96
 };

Object.filter = function(mainObject, filterFunction){
    return Object.assign(...Object.keys(mainObject)
          .filter( function(ObjectKey){
              return filterFunction(mainObject[ObjectKey])
          } )
          .map( function (ObjectKey){
              return {[ObjectKey]: mainObject[ObjectKey]};
          }) );
}

console.log("The grades are ",grades);

var targetSubjects = Object.filter(grades, (grade)=> grade>=95 );

console.log("Target Subjects are ",targetSubjects);

输出： 

The grades are  {linearAlgebra: 90, chemistry: 95, biology: 90, languages: 96}
Target Subjects are  {chemistry: 95, languages: 96}