如何在 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}