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 をよろしくお願いいたします。

以下もご興味があるかもしれません: