json.stringify() と json.parse() の違いと使い方

json.stringify() と json.parse() の違いと使い方

1. JSON.stringify() と JSON.parse() の違い

私たちは皆、JSON.stringify()とJSON.parse()を使ったことがあるでしょう。名前からわかるように
JSON.stringify() は、JavaScript オブジェクトを JSON 文字列に変換するために使用されます。
JSON.parse() は JSON 文字列をオブジェクトに変換できます。

わかりやすいバージョン:

  • JSON.stringify() はオブジェクト a を文字列 s に変換します。
  • JSON.parse() は文字列 s をオブジェクト a に変換します。

簡単に言えば、それらの機能は相対的です。JSON.stringify() を使用してオブジェクト a を文字列 c に変換した場合、JSON.parse() を使用して文字列 c をオブジェクト a に復元できます。

arr = [1,2,3]とします。
JSON.stringify(arr); //'[1,2,3]'
typeof JSON.stringify(arr);//文字列

文字列を '[1,2,3]' とします。
console.log(JSON.parse(文字列)) //[1,2,3]
console.log(typeof JSON.parse(string))//オブジェクト

JSON.parse() を使用する際に注意すべき点は、このメソッドは JSON 文字列をオブジェクトに変換するため、文字列は JSON 形式に準拠している必要がある、つまりキーと値の両方を二重引用符で囲む必要があるということです。

a = '["1","2"]'とします。
b = "['1','2']"とします。
console.log(JSON.parse(a)); // 配列 [1,2]
console.log(JSON.parse(b)); // エラー

2. JSON.stringify() の便利な使い方

1. 配列にオブジェクトが含まれているかどうか、またはオブジェクトが等しいかどうかを判断します。

//配列にオブジェクトが含まれているかどうかを判断します。let data = [
  {name:'ナゲッツ'},
  {name:'CSS 学習'},
  {name:'js 学習'},
  ]、
  val = {name:'ナゲット'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1; // 真

// 2つの配列/オブジェクトが等しいかどうかを判定する let a = [1,2,3],
  1,2,3 は 1 です。
JSON.stringify(a) === JSON.stringify(b); //true

2. localStorage/sessionStorage にオブジェクトの保存を許可します。

デフォルトでは、localStorage/sessionStorage は文字列しか保存できません。実際の開発では、オブジェクトを保存する必要がある場合がよくあります。この場合、保存時に json.stringify() を使用してオブジェクトを文字列に変換できます。キャッシュを取得するときは、json.parse() を使用してオブジェクトに戻すだけです。

//ストレージ関数 setLocalStorage(key,val){
  window.localStorage.setItem(キー、JSON.stringify(val));
};
//関数 getLocalStorage(key){ を取得する
  val = JSON.parse(window.localStorage.getItem(key)); とします。
 window.localStorage.removeItem(キー)
  戻り値:
};
//テストlet data = [
  {name:'ナゲッツ'},
  {name:'CSS 学習'},
  {name:'js 学習'},
  ];
setLocalStorage('STORAGEDATE',データ);
a = getLocalStorage('STORAGEDATE'); とします。 

3. オブジェクトのディープコピーを実装する

実際の開発では、元のデータに影響を与えることを恐れる場合は、任意の操作のためにデータのディープコピーを作成することがよくあります。実際、ディープコピーを実現するために JSON.stringify() と JSON.parse() を使用するのは良い選択です。

//ディープコピー関数 deepClone(data) {
  _data = JSON.stringify(データ) とします。
    dataClone = JSON.parse(_data);
  dataClone を返します。
};
//テストlet arr = [1,2,3],
  _arr = deepClone(arr);
ar[0] = 2;
console.log(arr,_arr) //[2,2,3] [1,2,3]

json.stringify() と json.parse() の違いと使い方についての記事はこれで終わりです。json.stringify() と json.parse() についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JSON.parse() と JSON.stringify() のパフォーマンステストの詳細な説明
  • JSはJSON.parse()とJSON.stringify()を使用してオブジェクトのディープコピー関数解析を実装します。
  • JavaScript の JSON.parse 関数と JSON.stringify 関数
  • JSON での動的キー設定と JSON.parse と JSON.stringify() の違い
  • JSON.stringify() と JOSN.parse() の違いについて簡単に説明します。
  • JSON.parse()、JSON.stringify()、jQuery.parseJSON() の使用について
  • JSON オブジェクトと文字列間の変換について説明します。JSON.stringify(obj) と JSON.parse(string)
  • JSON.parse() と JSON.stringify() についての簡単な説明
  • JSON.parse() と JSON.stringify() の紹介
  • JSON.parse と JSON.stringify の使い方の詳細な説明

<<:  mysql5.7.17 zip の解凍とインストールの詳細な手順

>>:  MySQL レプリケーション テーブルの詳細とサンプル コード

推薦する

Linux でファイルを削除するさまざまな方法の効率の比較

Linux で大量のファイルを削除する効率をテストします。まず500,000個のファイルを作成する$...

JavaScript進捗管理の詳しい説明

目次序文質問原理テスト序文プログラムを作成するときに、読み込みの進行状況やアップロードの進行状況など...

JavaScript Proxyオブジェクトの詳細な説明

目次1. プロキシとは何ですか? 2. 使い方は? 1. プロキシを使用する簡単な例2. 対象オブジ...

CSS3 を使用して 3D テキスト ホバー効果を実装するサンプル コード

この記事では、3D テキストのホバー変更効果を実現するための CSS3 のサンプル コードを紹介しま...

検証例 MySQL | 同じ値を持つフィールドを更新すると、binlog に記録されます

1. はじめに数日前、開発仲間から、フィールドを同じ値に更新すると binlog が記録されるかどう...

シームレスなカルーセルを実現するjQueryプラグイン

シームレス カルーセルは非常に一般的なエフェクトであり、ロジックを理解すれば非常に簡単です。効果は以...

Linuxルートの初期値を設定する方法の簡単な分析

Ubuntu ではデフォルトで root ログインが許可されていないため、初期の root アカウン...

Ubuntu LinuxにOracle Java 14をインストールする方法

最近、Oracle は Java 14 (または Oracle JDK 14) の一般公開を発表しま...

IE6 で CSS スタイルの div または li の背景のタイリングと境界の破損を解決する方法

IE6 で CSS スタイルの div または li の背景のタイリングや境界の破壊を解決するには、...

フロートをクリアするための CSS メソッドの概要

フロートはWebページのレイアウトでよく使用されますが、フローティングブロックレベル要素は標準のドキ...

クラウドサーバーパゴダパネルの詳細なインストール手順

目次0x01. パゴダパネルをインストールする0x02. サーバーポートを開く0x03. ブラウザを...

JSにおける4つのデータ型判定方法

目次1. 型2. インスタンス3. コンストラクター4.toString() この記事では、4 つの...

Linux 上の Nginx に複数のバージョンの PHP をインストールする

サーバーの LNPM 環境をインストールして構成する場合、複数のバージョンの PHP の共存を考慮す...

Win10 64 ビットで圧縮パッケージを使用して最新の MySQL 8.0.18 をインストールするチュートリアル (画像とテキスト付き)

WIN10 64ビットに最新のMySQL8.0.18をインストールダウンロード公式サイトから最新バ...