JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明

JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明

プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な JavaScript オブジェクトを JSON.stringify を通じて JSON 文字列にシリアル化し、その後の特定の分析のためにローカルに保存する必要があることがよくあります。

ただし、JavaScript オブジェクト自体に循環参照が含まれている場合、JSON.stringify は正しく動作せず、次のエラー メッセージが表示されます。

VM415:1 キャッチされない TypeError: 循環構造を JSON に変換しています

解決策は、この Web サイトの次のコードを使用してグローバル キャッシュ配列を定義することです。シリアル化される JavaScript オブジェクトのプロパティが走査されるたびに、プロパティに対応する値がキャッシュ配列に格納されます。

トラバーサル中にキャッシュ配列に属性値がすでに存在することが判明した場合、循環参照が検出されたことを意味します。この場合、単に return してループを終了することができます。

var キャッシュ = [];
var str = JSON.stringify(o, 関数(キー, 値) {
  if (typeof 値 === 'object' && 値 !== null) {
    (cache.indexOf(値) !== -1)の場合{
      // 削除 return;
    }
    // すべての値を収集します ​​cache.push(value);
  }
  戻り値;
});
cache = null; // ガベージコレクションを容易にするために変数をクリアします

この方法を使用して、循環参照を持つ JavaScript オブジェクトを文字列にシリアル化することに成功しました。

これで、JSON.stringify 使用時に発生する循環参照問題の解決方法についての記事は終了です。JSON.stringify 循環参照の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Iframe の内外のページで JS がどのように動作するかの概要
  • JS で if 判定をスムーズに行う方法
  • JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明
  • JSON.stringify のさまざまな用途のまとめ
  • Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)
  • JavaScript JSON.stringify() の使用法の概要
  • json.stringify() と json.parse() の違いと使い方
  • Selenium+BeautifulSoup+jsonはスクリプトタグ内のjsonデータを取得します
  • JavaScript のカンマ式が含まれている場合について

<<:  Centos7.3 に mysql5.7.18 をインストールするための詳細なチュートリアル

>>:  Linux カーネル デバイス ドライバー キャラクタ デバイス ドライバー ノート

推薦する

複合主キーと複数列インデックスに遭遇した場合の MySQL 行ロックの詳細な説明

背景今日、他のプロジェクト チームと協力してシス​​テムのストレス テストを実施しているときに、プロ...

マークアップ言語 - HTML を学んだ後に何を学ぶべきか?

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

ライフゲームの JavaScript 実装

目次コンセプト紹介論理的ルール完全なコード主な実装コンセプト紹介セルオートマトンとは、コンピュータの...

div ボックス モデルの使用経験の概要

ボックスモデルの計算<br />マージン + ボーダー + パディング + コンテンツC...

適応幅(パーセンテージ)に応じて Div の高さを調整する純粋な CSS

今日のレスポンシブ レイアウトの要件では、サイズを自動的に調整できる多くの要素で高さと幅の適応を実現...

IE8 と Chrome でテーブルの幅を修正する方法

IE8 や Chrome で上記の設定を使用すると、画面の最大幅に合わせて表示が統一され、各列の幅は...

一般的な XHTML タグの紹介

<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...

MySQLのインストールと設定方法のグラフィックチュートリアル(CentOS7)

1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...

CSS ウェイト値(カスケード)の例の詳細な説明

•CSSには多くのセレクターがあります。複数のセレクターを同じ要素に適用するとどうなるでしょうか? ...

Win7 で IIS7 Web および FTP サービスを完全にアンインストールする方法

昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...

Centos6にMysql5.7をインストールする方法

環境セントロス6.6 MySQL 5.7インストールシステムがインストールされている場合は、まずアン...

JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明

JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明MySQL データベースを使用して、...

Vueのミックスインと継承について詳しく説明します

目次序文ミキシンMixin ノート (重複名)ローカルミックスイングローバル ミックスイン継承するミ...

レイアウトサイズを変更するために左右にドラッグする純粋なCSS

ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使...

MySQL 文字セットの概要

目次文字セット比較ルール4つのレベルの文字セットと比較規則3つのシステム変数このノートは主にMySQ...