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 カーネル デバイス ドライバー キャラクタ デバイス ドライバー ノート

推薦する

JavaScriptプロトタイプとプロトタイプチェーンを徹底的に理解する

目次序文基礎を築くプロトタイプコンストラクタのプロパティ__プロト__プロトタイプチェーン改善する要...

HTML の色に関する参考資料

HTML では、色は 2 つの方法で表現されます。 1 つは、青の場合は blue のように色の名前...

vueプロジェクトは特定の領域に透かしを描くことを実現する

この記事では、Vueを使用して特定の領域に透かしを描く方法を紹介します。具体的な内容は次のとおりです...

CSS のフローティング サンプル コードをクリアする方法

概要この記事のフレームワーク図は次のとおりです。 1. フローティングとは一体何でしょうか? W3s...

MySQL 5.7.17 インストール グラフィック チュートリアル (Windows)

最近データベースを学び始めたのですが、とても興味深いコースだと感じていますが、含まれる内容の多くは私...

Ajax の JavaScript ソリューションにおける parsererror エラー ケースの詳細な説明

ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...

Linux 上の Vim で色とテーマを変更する方法

Vim は Linux でよく使用されるテキスト エディターです。 Vim は、Sublime や ...

Vueの監視プロパティの詳細な説明

目次Vue モニターのプロパティリスナープロパティとは何ですか?リスニングプロパティと計算プロパティ...

Docker ビルド kubectl イメージ実装手順

プログラムサービスがgitlab ci/cdと統合されたk8sを使用してデプロイされている場合、gi...

MySQLにおけるMTRの概念

MTR は Mini-Transaction の略です。名前が示すように、これは「最小のトランザクシ...

ビジュアルデザインとインタラクションデザインについて

<br />製品設計プロセス全体において、ビジュアルデザインとインタラクションデザインの...

TypeScript マッピング型の詳細

目次1. マップされた型2. マッピング修飾子3. キーの再マッピング4. さらなる探究序文: Ty...

超大型フォントを使用した 40 の Web ページ デザイン

今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...

CSS で実装された円形のプログレスバー

成果を達成する 実装コードhtml <div class="wrap"&g...