カテゴリー
コンピューター

【JavaScript】オブジェクトの中身を知る方法4種

JavaScript オブジェクトのプロパティ名とその値を表示するコード例

// JavaScript オブジェクト
var dog = {
    name: "Fido",
    dob:  new Date(),
    legs: [1, 2, 3, 4],
    getName: function () {
        return this.name;
    }
};

// メソッドが見える。その内容はわからない。
// Object { name: "Fido", dob: Date 2015-09-18T20:10:00.060Z, legs: Array[4], getName: dog.getName() }
console.log(dog);

// メソッドは見えない。
// {"name":"Fido","dob":"2015-07-25T08:43:37.999Z","legs":[1,2,3,4]}
console.log(JSON.stringify(dog));

/**
 * オブジェクトのプロパティとその値を文字列化して連結したテキストを返却します。
 *
 * @param  {object} obj オブジェクト
 * @return {string} プロパティとその値を文字列化して連結したテキスト
 */
function getProperties(obj) {
    var properties = '';
    for (var prop in obj){
        properties += prop + ': ' + obj[prop] + '\n';
    }
    return properties;
}

// メソッドが見え、その内容もわかる。
// name: Fido
// dob: Sat Sep 19 2015 05:00:04 GMT+0900 (JST)
// legs: 1,2,3,4
// getName: function () {
//         return this.name;
//     }
console.log(getProperties(dog));

// メソッドが見え、その内容もわかる。Chrome だとエラー
// ({name:"Fido", dob:(new Date(1442607000060)), legs:[1, 2, 3, 4], getName:(function () {
//         return this.name;
//     })})
console.log(dog.toSource());

オブジェクトの中身のウェブブラウザ Firefox での表示

JavaScript オブジェクトの中身のウェブブラウザ Firefox で表示

おわりに

次のページが参考になりました。ありがとう存じます！

また、Chrome では toSource メソッドが使えなかったため、Firefox をインストールして Web デベロッパーツールのコンソールを使用して確認いたしました。

デベロッパーツールのコンソールの開き方、そしてアンインストール方法のページをメモしておきます。

以上です。

コメントを残す