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

推薦する

Vue3+Vue-cli4 プロジェクトで Tencent スライダー検証コードを使用する方法

導入:従来の画像検証コードと比較して、スライダー検証コードには次の利点があります。サーバーは検証コー...

MySQL の sql_mode モード例の詳細な説明

この記事では、MySQL の sql_mode モードについて例を挙げて説明します。ご参考までに、詳...

JavaScriptでシンプルなスクロールウィンドウを実装する

この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...

支払いカウントダウンを実現し、ホームページに戻るためのjs

ホーム ページに戻るための支払いカウントダウン ケースの概要: シンプルな js 構文、getEle...

Dockerでのpython3.8イメージのインストールについて

Docker Hub公式サイト1. Pythonミラーを検索するdocker 検索 python 2...

SQL 文を使用してデータを収集する場合の sum 関数と count 関数の if 判定条件の使用法の説明

まず、例を挙げてみましょう(読みたくない場合は、以下の要約だけ読んでください)。 order_typ...

浮遊する雲のアニメーションを実現するCSS3

操作効果 html <ヘッド> <メタ文字セット='UTF-8'&...

Linux での crontab スケジュール実行コマンドの詳細な説明

LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | grep ...

VSCode 構成 Git メソッドの手順

Git は vscode に統合されており、git コマンドをいくつか記述しなくても、クリックするだ...

MySQL 接続クエリを本当に学びましたか?

1. 内部結合クエリの概要内部結合は、アプリケーションで非常に一般的な結合操作であり、通常はデフォ...

Canonical が Flutter で Linux デスクトップ アプリを有効化 (推奨)

Google の Flutter の目標は、どのプラットフォームを使用していても、ネイティブの速度...

Vueコンポーネントの再利用と拡張の詳細な説明

目次概要延長は必要ですか?スロットJavaScript ユーティリティ関数拡張コンポーネントの複数の...

nginxを使用してドメイン名ベースの仮想ホストを構成する

1. 仮想ホストとは何ですか?仮想ホストは、特殊なテクノロジーを使用して、実行中のサーバーを論理的に...

フロントエンドとバックエンドを分離した nginx 構成を展開するための完全な手順

序文決まり文句です。ここでは、フロントエンドとバックエンドの分離についての私の理解についてお話ししま...