如何在 JavaScript 中过滤对象
Moataz Farid
2023年1月30日
2020年11月24日
本教程将介绍如何在 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}