如何在不修改原生原型的情況下過濾 JavaScript 物件？

使用原型擴展在JavaScript 中進行物件過濾

ECMAScript 5 引入了針對數組類型的filter() 方法，但沒有針對物件類型。這就提出瞭如何在 JavaScript 中為物件實作 filter() 方法的問題。

自訂物件過濾器實作

一種方法是擴充Object.prototype自訂filter() 方法：

Object.prototype.filter = function (predicate) {
    var result = {};

    for (var key in this) {
        if (this.hasOwnProperty(key) && !predicate(this[key])) {
            result[key] = this[key];
        }
    }

    return result;
};

此實作使用迴圈來迭代物件自己的屬性並檢查是否謂詞函數為每個值傳回true 或false。如果為 false，鍵值對將會加入到結果物件中。

但是，擴展原生 Object.prototype 被認為是不好的做法，因為它可能會導致與其他函式庫或程式碼發生衝突。

替代方法

除了擴充 Object.prototype之外，還有幾種替代方法來過濾物件JavaScript:

• 使用reduce和Object.keys :

Object.filter = (obj, predicate) =>
    Object.keys(obj)
        .filter((key) => predicate(obj[key]))
        .reduce((res, key) => (res[key] = obj[key], res), {});

• 使用map和spread語法:

Object.filter = (obj, predicate) => {
    const filteredValues = Object.keys(obj).map((key) => {
        if (predicate(obj[key])) {
            return [key, obj[key]];
        }
    }).filter(Boolean);

    return Object.fromEntries(filteredValues);
};

• 使用Object.entries 和Object.fromEntries:

Object.filter = (obj, predicate) => {
    const filteredEntries = Object.entries(obj).filter(
        ([key, value]) => predicate(value)
    );

    return Object.fromEntries(filteredEntries);
};

例子用法

讓我們使用以下替代方法之一來過濾物件：

const scores = { John: 2, Sarah: 3, Janet: 1 };

// Using the `reduce` and `Object.keys` approach:
const filteredScores = Object.filter(scores, (score) => score > 1);

console.log(filteredScores); // { Sarah: 3 }

透過使用這些替代方法，您可以在JavaScript中過濾對象，而無需擴展本機原型。

以上是如何在不修改原生原型的情況下過濾 JavaScript 物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！