ホームページ > ウェブフロントエンド > jsチュートリアル > ネイティブ プロトタイプを変更せずに JavaScript オブジェクトをフィルタリングする方法

ネイティブ プロトタイプを変更せずに JavaScript オブジェクトをフィルタリングする方法

Barbara Streisand
リリース: 2024-11-27 11:47:11
オリジナル
534 人が閲覧しました

How to Filter JavaScript Objects Without Modifying the Native Prototype?

プロトタイプ拡張を使用した JavaScript でのオブジェクト フィルタリング

ECMAScript 5 では、配列型に対して filter() メソッドが導入されましたが、オブジェクト型に対しては導入されませんでした。このため、JavaScript でオブジェクトの filter() メソッドを実装する方法について疑問が生じます。

カスタム オブジェクト フィルタの実装

1 つのアプローチは、次のように 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 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート