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

推薦する

Vueコンポーネントの7つの通信方法についての深い理解

目次1. props/$emit導入コードサンプル2.Vスロット導入コードサンプル3.$refs/ ...

ウェブデザインのためのオンライン開発ツール10選の紹介

1. オンラインテキストジェネレーターBlindTextGenerator: デザイナーにとって、こ...

HTML コード例: ハイパーリンクの詳細な説明

ハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間を移動できるた...

ページネーションの例とベストプラクティス

<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...

MySQL データベースのパフォーマンス最適化の概要

目次なぜ最適化するのですか? ?どこから始めますか? ?解決策は何ですか? ? ?どうやって選ぶ? ...

Linux で実行中のすべてのプロセスを表示する方法

ps コマンドを使用できます。プロセスの PID など、現在実行中のプロセスに関する関連情報を表示で...

CentOS 7 で grub パスワードと単一ユーザー ログインを設定するサンプル コード

Centos7 と Centos6 では、GRUB パスワードの設定手順に大きな違いがあります。これ...

Nuxt.jsプロジェクトのDockerデプロイメントの実装

Docker 公式ドキュメント: https://docs.docker.com/ Docker は...

MySQL ログイン警告問題の解決策

1. はじめにMySQL にログインすると、次のような警告が表示されることがよくあります。警告: コ...

一般的なブラウザ互換性の問題(概要)

ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript...

202 無料の高品質 XHTML テンプレート (2)

前回の記事「202 個の無料高品質 XHTML テンプレート (1)」に続き、123WORDPRES...

MySQL 8.0.12 winx64 解凍バージョンのインストール グラフィック チュートリアル

mysql-8.0.12-winx64 解凍版のインストールを記録して、みんなで共有しました。 1....

Keepalived を使用して Nginx の自動再起動とデュアルアクティブ ホットスタンバイの高可用性を実現する方法について

目次1. 概要2. Keepalivedを使用してNginxを自動的に再起動する2.1 シェルスクリ...

Nginx プロセス管理とリロードの原則の詳細な説明

プロセス構造図Nginx はマルチプロセス構造です。マルチプロセス構造は、次のような Nginx の...

MySQL の自動インクリメント主キーが連続していないのはなぜですか?

目次1. はじめに2. 自己増分ストレージの説明3つの自己付加価値修正メカニズム4. 自己評価を修正...