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