如何在 JavaScript 中过滤对象
Moataz Farid
2023年10月12日
JavaScript
JavaScript Filter
JavaScript Object
本教程将介绍如何在 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 函数。
Object.keys()从对象中的key-value对中返回一个键数组。在我们的例子中是linearAlgebra、化学、生物、语言。
Object.keys()的结果被发送到回调函数innerFilterFunction，该函数也是过滤器function的一个参数，该innerFilterFunction函数的输出将是过滤后的键值。在我们的例子中，输出的是化学、语言。- 过滤的结果现在传递给我们的
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}
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe