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 レプリケーション テーブルの詳細とサンプル コード

推薦する

Vue コンポーネント ライブラリ ElementUI はテーブル読み込みツリー データのチュートリアルを実装します

ElementUIは、参考のためにテーブルツリーリストの読み込みチュートリアルを実装しています。具体...

Docker ログが多すぎてディスクがいっぱいになる場合の対処方法

複数の Docker コンテナがデプロイされたサーバーがあり、各 Docker コンテナが stde...

MySQL のデータ型とフィールド属性の原理と使用法の詳細な説明

この記事では、MySQL のデータ型とフィールド属性について説明します。ご参考までに、詳細は以下の通...

NextCloud プライベート クラウド ストレージ ネットワーク ディスクの構築に関する詳細なチュートリアル

Nextcloud は、オープンソースで無料のプライベート クラウド ストレージ ネットワーク ディ...

mysql5.7 のエンコーディングを utf8mb4 に設定する方法

最近、問題に遭遇しました。モバイル端末の絵文字や一部の絵文字は 4 バイトですが、UTF-8 は 3...

CSSを使用して中央に固定された2つの列と適応型列を実現する方法

1. 絶対位置とマージンを使用するこの方法の原則は、左側と右側をドキュメントの流れから外れるように配...

MySQL グループレプリケーションの設定手順 (推奨)

MySQL-Group-Replication は、MySQL-5.7.17 で開発された新しい機...

MySQLの遅いクエリ問題の詳細な分析データ送信

例を通して、MySQL のデータ テーブル送信のクエリが遅い問題の解決策を共有しました。最近、コード...

いくつかのMySQL更新操作のケース分析

目次ケーススタディアカウント残高を更新する直接更新楽観的ロック方式ロックフリーソリューションキューイ...

MySQL ファントムリードとその排除方法の詳細な説明

目次トランザクション分離レベルファントムリーディングとは何ですか?ファントムリードを排除する方法要約...

Vue 父子価値移転、兄弟価値移転、子父価値移転の詳細な説明

目次1. 親コンポーネントが子コンポーネントに値を渡す1. 親コンポーネント.vue 2. サブコン...

Docker ケース分析: Redis サービスの構築

目次1 マウントディレクトリとファイルを作成する2 Redisイメージを取得する3 コンテナを作成し...

Maxwell を使用して MySQL データをリアルタイムで同期する方法

目次マクスウェルについてMaxwellの設定と使用1. Maxwellインストールパッケージをダウン...

追加、削除、変更、クエリを実行するための JS 操作オブジェクト配列のサンプルコード

1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...

ウェブページでmp3またはフラッシュプレーヤーコードを再生する

コードをコピーコードは次のとおりです。 <オブジェクト id="player1&qu...