迹忆客 专注技术分享

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

在 JavaScript 中使用 reduce 来过滤对象

现在让我们用 reduce 函数实现过滤对象的功能。

假设我们有以下对象。

var grades = {
    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 函数。

如果我们想用 ES6 的 箭头 语法重新创建上面的例子，我们可以把它改写成如下。

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}

它使用 逗号 操作符来返回 result 对象，也可以用 Object.assign 代替，它也会返回结果。所以代码可以改写如下。

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

使用 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]};
          }) );
}

我们用如上图所示的 map 函数替换了 reduce 函数，同时使用了 Object.assign，并使用 spread 语法将从 Object.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}