如何在 JavaScript 中过滤对象

Moataz Farid 2023年10月12日
  1. 在 JavaScript 中使用 reduce 来过滤对象
  2. 使用 map 函数过滤 JavaScript 对象
如何在 JavaScript 中过滤对象

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

在 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 函数。

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

如果我们想用 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}

相关文章 - JavaScript Filter

相关文章 - JavaScript Object