JavaScriptオブジェクトの作成、読み取り、ループ、コピーの方法と、ページに[object Object]と表示される理由、実際の値を表示する方法を解説します。任意のJSONを貼り付けてその場で確認できます。
JavaScriptのオブジェクトは、{ key: value }の形で書く名前付きの値の集まりです。値はobj.keyまたはobj['key']で読み取り、キーの一覧はObject.keys、ペアの一覧はObject.entriesで取得します。[object Object]という文字列は、オブジェクトが文字列に変換されたときに現れます。中身を表示するにはJSON.stringify(obj)を使いましょう。
オブジェクト操作の早見表
APIのレスポンス、設定ファイル、Reactのpropsのほとんどはオブジェクトの形で届きます。このガイドでは、日常的に使う少数の操作を説明したうえで、よくある2つの落とし穴を扱います。ページやalertに[object Object]と表示される問題と、コピーがネストしたデータを元のオブジェクトとこっそり共有している問題です。
何かがオブジェクトを文字列に変換しています。テキストとの+、テンプレートリテラル、alert、element.textContentやinnerTextなどです。プレーンなオブジェクトのデフォルトのtoStringは、固定の文字列[object Object]を返します。代わりにJSON.stringify(obj)を出力するか、obj.nameのように意図したプロパティを指定してください。
for (const [key, value] of Object.entries(obj)) { ... }を使います。プレーンなオブジェクトは反復可能ではないので、直接for...ofを使うとTypeErrorになります。for...inも使えますが、継承した列挙可能なキーも含まれます。
平坦なオブジェクトなら、{ ...obj }またはObject.assign({}, obj)で十分です。ネストしたオブジェクトや配列を含む場合は、すべての階層をコピーするstructuredClone(obj)を使います。Date、Map、Setには対応していますが、関数やDOMノードではDataCloneErrorを投げます。
Object.entries(obj)で[key, value]のペアの配列が得られます。mapやfilterで変換し、Object.fromEntries(pairs)でオブジェクトに組み立て直します。オブジェクトの値をmapするときの一般的な方法です。
Mapは任意の型をキーにでき、すべてのキーについて挿入順を記憶し、sizeプロパティを持ちます。プレーンなオブジェクトのキーは文字列かシンボルで、JSONから生成されるのはこちらです。JSON.stringifyはMapを{}にしてしまうので、先にObject.fromEntries(map)で変換してください。
[object Object]になるのは1行目だけです。ほかは読める形で中身を出力します。
pre要素を使うと、JSON.stringifyが3番目の引数で追加する改行とインデントが保たれます。
entriesでオブジェクトをペアにし、mapで各値を変更し、fromEntriesで新しいオブジェクトを作ります。
スプレッド構文によるコピーは内側のaddressオブジェクトを共有しますが、クローンは共有しません。
オブジェクトインスペクター
JSONを編集して、それぞれの方法でテキストや一覧にどう変換されるかを確認しましょう。
JSON形式のオブジェクト
有効なJSONではありません：{v}
有効なJSONですが、オブジェクトではありません。波括弧で囲んでください。
オブジェクトの表示方法
コード
出力
コピーの実験
コピーのcityを変更し、元のオブジェクトも変わったかを確認しましょう。
コピーに設定する新しいcity
スプレッド構文のコピーで変更
structuredCloneのコピーで変更
リセット
original.address.cityの現在の値：{v}
無料で始める · クレジットカード不要