JavaScriptオブジェクトのプロパティを印刷または列挙する方法は?

この記事では、JavaScriptオブジェクトのプロパティを反復・印刷するすべてのオプションを探っていきます。私は通常、以下の要件に出会います。

• オブジェクトのすべてのプロパティの名前をどうやって印刷すればいいですか?
• オブジェクトのメソッドだけを印刷するにはどうすればいいですか?
• オブジェクトの列挙不可なプロパティさえもどう印刷すればいいですか?

以下のリストに示すように、対象猫を考えてみましょう。

var cat= {
    name : 'foo',
    age : 12,
    canRun : function() {
        console.log("can run");
    }
}

デフォルトでは、対象のすべての性質に対して列挙可能はtrueに設定されています。 現在、catのcanRunの記述とプロパティ名をObject.getOwnPropertyDescriptorを使って印刷すると、両方のプロパティで列挙可能な値が真であることがわかります。

console.log(Object.getOwnPropertyDescriptor(cat,"canRun"));
console.log(Object.getOwnPropertyDescriptor(cat,'name'));

ご覧の通り、enumerable、configurable、writableもtrueに設定されています。

まず、列挙可能なすべての性質を真に印刷することから始めましょう。

Printing all enumerable properties using for..in loop

JavaScript for.. を使えば、cat オブジェクトの所有または継承のすべての列挙可能なプロパティを印刷できます。ループ中。

for (var prop in cat) {
    console.log(prop);
}

使って...ループでは、すべての列挙可能な性質を反復処理できます。 上記のforループはcatオブジェクトのすべての列挙可能なプロパティを出力します。

JavaScriptで...ループでは、列挙可能でない性質や列挙可能がfalseに設定されている性質を反復しません。よりよく理解するために、Object.defineProperty関数を使ってcatの名前プロパティの可算化をfalseにしよう。

Object.defineProperty(cat, 'name', {
    enumerable: false
});

for (var prop in cat) {
    console.log(prop);
}

上記のリストでは、名前のenumerableプロパティをfalseに設定し、JavaScriptのforループを使ってプロパティに反復処理しています。出力時には、JavaScriptが名前プロパティを省略しており、下の画像のように出力が出されます

JavaScriptで...in loop は、オブジェクト自身のプロパティであろうと継承されたプロパティであろうと、オブジェクトのすべての列挙可能なプロパティに反復します。 例を見てみましょう...ループでは、継承された列挙可能な性質も返します。私は「animal」という物体を作りました。

var animal= {
    color: "blue"
}

動物オブジェクトを猫オブジェクトの親としてリンクしています。。は、__proto__ を使っています。つまり、下記のリストのように、猫オブジェクトと動物オブジェクトの間に継承を作っています。

cat.__proto__ = animal;

さて、catオブジェクトには3つの列挙可能な性質があります。独自のageやcanRunプロパティ、そして継承されたカラープロパティを持っています。だから...ループ内で猫オブジェクトのage、canRun、colorプロパティを印刷します。

for (var prop in cat) {
    console.log(prop);
}

上に...ループでは、Age と canRun プロパティのほかに US Color プロパティを印刷します。

以下に、上記の議論で使われたコード全体をまとめて示します。

var animal= {
    color: "blue"
}

var cat= {
    name: 'foo',
    age: 12,
    canRun: function () {
        console.log("can run");
    }
}
cat.__proto__=animal;

Object.defineProperty(cat, 'name', {
    enumerable: false
});

for (var prop in cat) {
    console.log(prop);
}

だからまとめてみようか...ループ内の次の点、

• オブジェクト自身のすべての列挙可能なプロパティを返します
• オブジェクトのすべての継承可能な性質を返します
• 非列挙可能な性質は返しません

Object.keysを使ってすべての列挙可能なプロパティを印刷すること

ECMA 5ではObject.keys()が導入され、JavaScriptオブジェクトのすべての列挙可能なプロパティを含む配列を返します。返すのはオブジェクト自身のプロパティのみです。継承されたプロパティは返しません。

以下のリストに示すように、Objecy.keysを使ってcatオブジェクトのすべての列挙可能なプロパティを印刷できます。

var cat= {

    name: 'foo',
    age: 12,
    canRun: function () {
        console.log("can run");
    }
}

console.log(Object.keys(cat));

オブジェクトのすべての方法の印刷

他にも、オブジェクトのすべての独自のメソッドを印刷するという要求があるかもしれません。 そのために、オブジェクトのすべてのメソッドを返す関数を作成しましょう。

function getAllMethods(object) {
    return Object.getOwnPropertyNames(object).filter(function (p) {
            return typeof object[p]=='function';
        });
}

getAllMethods() 関数は渡されたオブジェクトのすべてのメソッドを返します。次のリストに示すようにオブジェクトcatがあるとします。

var cat= {
    name: 'foo',
    age: 12,
    canRun: function () {
        console.log("can run");
    }
}

catオブジェクトのメソッドをprintするにはgetAllMethods()関数に渡し、関数はcanRunメソッドを返します。

console.log(getAllMethods(cat));

出力ではcanRunが印刷されているのが確認できます。

結論

この記事では、オブジェクト自身や継承した性質や方法を印刷・列挙するさまざまな方法について学びました。この投稿が役に立てば幸いです。読んでくださってありがとうございます。