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

推薦する

レスポンシブ Web デザインが価値のない 5 つの理由

この記事は Tom Ewer の Managewp ブログからのもので、現在人気のレスポンシブ デザ...

MySql8.0バージョンに接続するMyBatisの設定問題について

mybatis を学習しているときにエラーが発生しました。エラーの内容は次のとおりです。データベース...

Linuxファイルの基本属性の知識ポイントのまとめ

Linux システムは典型的なマルチユーザー システムです。異なるユーザーは異なる立場にあり、異なる...

MySQL SQL文の特殊処理文のまとめ(必読)

1.テーブル全体を更新します。データ行の列の値が空の場合は、別の列フィールドの値と同じにします。 ...

vue3 のさまざまなファイルタイプのプレビュー機能の例

目次序文1. オフィス文書の種類のプレビュー2. PDF形式のプレビュー3. 画像の種類4. ビデオ...

CSS エラスティック ボックス flex-grow、flex-shrink、flex-basis の詳細な説明

3 つの属性 flex-grow、flex-shrink、flex-basis の機能は次のとおりで...

2 つの MySQL ユーザー削除ステートメント (delete user と drop user) の違い

ヒント: MySQL では、ユーザーの作成と削除が頻繁に必要になります。ユーザーを作成するときは、通...

Docker Enterprise Edition を使用して独自のプライベート レジストリ サーバーを構築する

Docker は本当に素晴らしいです。特に、仮想マシンを使用する場合に比べて、Docker イメージ...

vscodeカスタムvueテンプレートの実装

vscode エディタを使用して vue テンプレートを作成すると、新しい vue ファイルを作成す...

2列の水平タイムラインを実装するためのVueサンプルコード

目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...

JavaScript のマクロタスクとマイクロタスクの詳細

目次1. マイクロタスクとは何ですか? 2. マクロタスクとは何ですか? 3. 事例3.1 結論4....

Vueコンポーネントの詳細な説明

<本文> <div id="ルート"> <h2&...

MySQL 一時テーブルの簡単な使用法

MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...

カスタムスクロールバー効果を実現するJavaScript

実際のプロジェクトでは、上下のスクロール バーと左右のスクロール バーは DIV 内にないため、右の...

MySQL における := と = の違いをグラフィカルに紹介

:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...