JSON.parse と JSON.stringify の使い方の詳細な説明

JSON.parse と JSON.stringify の使い方の詳細な説明

JSON 形式 (JavaScript Object Notation の略) は、データ交換に使用されるテキスト形式で、簡単に記述できます。

JavaScript ネイティブ構文に基づいて、オブジェクト、配列、数値、文字列、ブール値、null をシリアル化できます。

ES5 では、JSON 形式のデータを処理するために特に使用される JSON オブジェクトが追加されました。

JSON はオブジェクトですが、 parsestringify 2 つのメソッドしかありません。コンストラクターとして使用できず、属性もありません。

 JSON の型 === 'オブジェクト'

JSON.パース

JSON.parse() JSON 文字列を解析し、対応する JavaScript 値またはオブジェクトを取得するために使用されます。

 JSON.parse('{}') // {}
JSON.parse('true') // 真
JSON.parse('null') // null

JSON.parse 構文

JSON.parse(テキスト[, reviver])
  • text: 解析する文字列。

    数値が渡された場合は、小数に変換されて出力されます。

    ブール値が渡された場合は、直接出力されます。

    null が渡された場合は null が出力されます。

    他のタイプの値はサポートされていません。サポートされていない場合はエラーが報告されます。

  • reviver: オプション。解析によって生成された元の値を変更するために使用できるコンバーター。

戻り値:指定された JSON テキストのオブジェクト/値に対応する JavaScript オブジェクト/値。

リバイバーパラメータ

reviver 関数は、解析された JavaScript 値を変換および処理し、処理後の最終結果を返すために使用されます。

変換プロセス:

  • 解析された値自体とそれに含まれるすべての属性は、特定のトラバーサル順序で呼び出されます。 reviver 関数は、 2 つのパラメーターkeyvalueとして渡されます。

    トラバーサル順序: 階層に従って内部から外部へトラバースし、最終的に解析された値そのものである最上位層に到達します。

  • reviver が undefined を返す場合、オブジェクトは削除されます。別の値を返す場合、その値が現在のプロパティの新しい値になります。
  • 最上位レベルに移動する場合、属性がないため、パラメータ キーは空の文字列''になり、パラメータ値は現在の解析値になります。

reviver 関数の 2 つのパラメータ、 keyvalueには、異なるデータ型があります。

  • 基本的な値型データ(文字列、数値、ブール値)と null、および空のオブジェクト{}と空の配列[] :

    その場合、キーは空の文字列となり、値は対応する解析された値となります。

    すでに最上位レベルであるため、他の属性はありません。

  • 物体:

    すると、属性名と値にそれぞれ対応するキーと値の両方が存在します。

    最上位レベルでは、パラメータ キーが空の値を返します。

  • 配列:

    キーは配列のインデックスに対応し、値は要素の値に対応します。

    最上位レベルでは、パラメータ キーが空の値を返します。

基本的な型変換:

 JSON.parse('5', 関数(キー, 値) {
  console.log(`キー:${key}, 値:${value}`)
})
// キー:、値:5
JSON.parse('null', 関数(キー, 値) {
  console.log(`キー:${key}, 値:${value}`)
})
// キー:、値:null
JSON.parse('{}', 関数(キー, 値) {
  console.log(`キー:${キー}, 値:`, 値)
})
// キー:、値:{}

オブジェクトオブジェクトと配列:

 JSON.parse('[1, 2]', 関数(キー, 値) {
  console.log(`キー:${キー}, 値:`, 値)
})
// キー:0、値:1
// キー:1、値:2
// キー:, 値: (2) [空 × 2]

JSON.parse('{ "user": "张三", "info": { "age": 25, "sex": 1 } }', function (key, value) {
  console.log(`キー:${キー}, 値::`, 値)
})
// キー:user、値:: Zhang San// キー:age、値:: 25
// キー:性別、値:: 1
// キー:情報、値:: {}
// キー:, 値:: {}

データ処理:

 JSON.parse('[1, 2]', 関数(キー, 値) {
  if(キー === '') {
    戻り値
  }
  戻り値 + 3
})
// [4, 5]

JSON.parse の機能

JSON 文字列を解析するときは、JSON 形式のいくつかの仕様に注意する必要があります。そうしないと、エラーが発生しやすくなります。

JSON データには、値の型と形式に関する厳格な規制があります。具体的なルールは次のとおりです。

  • このメソッドは、文字列型の JSON 形式のデータを使用します。

    このメソッドは、数値、ブール値、null の 3 種類の値もサポートし、それらを対応するリテラル値に変換します。

    他のタイプはサポートされていません。

 JSON.parse('"中国"')
// '中国'
JSON.parse(null) // null
JSON.parse(111.) // 111
JSON.parse(0x12) // 18
JSON.parse(true) // 真
JSON.parse([])
// キャッチされない構文エラー: JSON 入力の予期しない終了
  • 文字列は一重引用符ではなく二重引用符で囲む必要があります。
 JSON.parse('"文字列"')
// '弦'
JSON.parse('\'文字列\'')
// キャッチされない構文エラー: JSON の位置 0 に予期しないトークン ' があります
  • 小数文字列のみがサポートされますが、小数点の後には数字が続く必要があります。
 JSON.parse('111') // 111
JSON.parse('0x12')
// キャッチされない構文エラー: JSON の位置 1 に予期しないトークン x があります
JSON.parse('111.232') // 111.232
JSON.parse('111.')
// キャッチされない構文エラー: JSON 入力の予期しない終了
  • Undefined、Symbol、BigInt は使用できません。数値は NaN、Infinity、-Infinity をサポートしていないため、エラーが報告されます。
 JSON.parse(未定義)
// キャッチされない構文エラー: JSON の位置 0 に予期しないトークン u があります
JSON.parse(シンボル())
// キャッチされない TypeError: シンボル値を文字列に変換できません
JSON.parse('12n')
// キャッチされない構文エラー: JSON の位置 2 に予期しないトークン n があります
  • 複合型には[]{}などのリテラルのみを使用できます。

    オブジェクト コンストラクターは実行ステートメントとして扱われ、サポートされていないため、使用できません。

    オブジェクトと配列は使用できません。また、関数、RegExp オブジェクト、Date オブジェクト、Error オブジェクトなどは使用できません。

 JSON.parse('[]')
// []
JSON.parse('オブジェクト()')
// キャッチされない構文エラー: JSON の位置 0 に予期しないトークン O があります
  • オブジェクト属性名は二重引用符で囲む必要があります。
 JSON.parse('{"キー": 1 }')
// {キー: 1}
JSON.parse('{キー: 1 }')
// キャッチされない構文エラー: JSON の位置 1 に予期しないトークン k があります
  • 配列またはオブジェクトの最後のメンバーの後にはコンマを配置できません。
 JSON.parse('[1, 2, 3, 4, ]')
// VM2771:1 キャッチされない構文エラー: JSON の位置 13 に予期しないトークン ] があります
JSON.parse('{"キー" : 1, }')
// VM2779:1 キャッチされない構文エラー: JSON の位置 12 に予期しないトークン } があります
  • Unicode エスケープをサポートします。
 JSON.parse('{"\u0066":333}')
// {f: 333}
  • 「\n」や「\t」などの一部の制御文字とエスケープ文字はサポートされていません。
 JSON.parse('"\n"')
// キャッチされない構文エラー: 予期しないトークン 

その他の解析方法

json 文字列を json オブジェクト (js オブジェクト値) に変換するには、他の方法を使用することもできますが、それらは安全なコードではありません。

 const str = '{"name":"json","age":18}'
  定数 json = JSON.parse(str)
  const json = eval("(" + str + ")")
  const json = (新しい関数("return " + str))()

JSON.文字列化

JSON.stringify() JavaScript オブジェクトまたは値を JSON 形式の文字列に変換します。

JSON.stringify 構文

JSON.stringify(値[, 置換子[, スペース]])
  • value: JSON 文字列にシリアル化される JavaScript オブジェクトまたは値。
  • replacer オプション。シリアル化される値を処理するために使用されます。
  • スペースはオプションであり、出力を美しくするために使用されるインデント用の空白文字列を指定します。

戻り値:指定された値を表す JSON 形式の文字列。

置換パラメータ

replacer パラメータは、次の 3 つの状況のいずれかになります。

  • null、undefined、またはその他の型の場合は無視され、処理されません。
 JSON.stringify({key: 'json'}, null, null) // '{"key":"json"}'
JSON.stringify({key: 'json'}, true) // '{"key":"json"}'
  • 配列の場合、この配列に含まれる属性名のみが結果文字列にシリアル化されます。

    オブジェクトのプロパティに対してのみ有効であり、配列に対しては有効ではありません。

定数オブジェクト = {
  json: 'JSON',
  解析: 'PARSE'、
  文字列化: '文字列化'
}
JSON.stringify(obj, ['parse', 'stringify'])
// '{"parse":"PARSE","stringify":"STRINGIFY"}'
  • 関数の場合、シリアル化された値の各属性は関数によって変換され、処理されます。

処理プロセス:

  • この関数には、属性名 (キー) と属性値 (値) の 2 つのパラメーターがあり、どちらもシリアル化されます。
  • 初めて呼び出されたとき、キーは空の文字列であり、値はシリアル化されるオブジェクト全体です。
  • 2 番目の処理では、最初の処理の結果が渡され、後続の各処理では前の処理の結果が受け取られます。
  • その後、各属性名と属性値が順番に処理され、完了後に返されます。
 JSON.stringify({ json: 1, stringify: { val: 'rr'} }, (キー, 値) => {
  console.log(`キー: ${key}, 値:`, 値)
  戻り値
}) 
// キー: ,値: {json: 1, stringify: {…}}
// キー: json、値: 1
// キー: 文字列化、値: {val: 'rr'}
// キー: val、値: rr
// '{"json":1,"stringify":{"val":"rr"}}'

値の型処理:

  • プリミティブ型の文字列、数値、ブール値、または null が返された場合、それはシリアル化された JSON 文字列に直接追加されます。
  • その他のオブジェクトが返された場合は、オブジェクトのプロパティが後で順番にシリアル化されます。関数の場合は、処理は行われません。
  • true または undefined を返す場合、プロパティは出力されません。
  • 配列をシリアル化するときに、値が undefined または関数を返す場合は、null に置き換えられます。
 JSON.stringify({ json: 1, stringify: 'rr' }, (キー, 値) => {
  if (typeof value === 'number') {
    'ss'を返す
  }
  戻り値
}) 
// '{"json":"ss","stringify":"rr"}'

JSON.stringify({ json: 1, stringify: 'rr' }, (キー, 値) => {
  if (typeof value === 'number') {
    値 = 未定義
  }
  戻り値
}) 
// '{"文字列化":"rr"}'

次の例は、オブジェクト値を返す方法を示しています。

 JSON.stringify({ json: 1, stringify: 'rr' }, (キー, 値) => {
  if (typeof value === 'object') { // 最初にオブジェクト全体が返されるとき、型は object です
    戻り値 { 解析: 'dd' }
  }
  戻り値
}) 
'{"解析":"dd"}'

スペースパラメータ

スペース パラメータは、結果文字列内の間隔を制御し、出力を美しくするために使用されます。入力できる値は3つあります。

  • 数値の場合、シリアル化時に、各レベルは、前のレベルよりも数値に対応するスペース数を増やしてインデントされます。範囲は 1 から 10 で、最小 1 スペース、最大 10 スペースです。
  • 文字列の場合、シリアル化中に各行の先頭に追加され、各レベルは最大 文字まで前のレベルよりもインデントされます。これを超える場合、文字列は切り捨てられます。
  • null、undefined、またはその他の型の場合は無視され、処理されません。
 JSON.stringify({キー: 'json'}, null, 2)
// '{\n "キー": "json"\n}'
JSON.stringify({キー: 'json', リスト: { str: 'str' } }, null, '|-')
// '{\n|-"key": "json",\n|-"list": {\n|-|-"str": "str"\n|-}\n}'
JSON.stringify({キー: 'json'}, null, null)
// '{"キー":"json"}'

JSON.stringify 機能

  • 文字列、数値、ブール値などの基本型の値、および String、Boolean、Number オブジェクトの値は、プリミティブ値の文字列に変換されて出力されます。
 JSON.stringify(333) // '333'
JSON.stringify(true) // 'true'
JSON.stringify(新しい文字列('333')) //'"333"'
JSON.stringify(Boolean(true)) // 'true'
  • 基本的な文字列型の場合、変換結果は二重引用符で囲まれます。

    復元するときに、二重引用符によって JavaScript にそれが変数ではなく文字列であることを認識させるためです。

 JSON.stringify('json') === 'json' // false
JSON.stringify('json') === '"json"' // true
  • 未定義、関数、シンボル、および XML オブジェクト:
  • Object オブジェクト内に出現した場合は無視されます。
  • 配列内に表示される場合は null としてシリアル化されます。
  • 単独で使用した場合、undefined を返します。
 JSON.stringify(Symbol()) // 未定義
JSON.stringify([Symbol(), Math.abs, undefined]) // '[null,null,null]'
JSON.stringify({ [Symbol()]: Math.abs, キー: undefined }) // '{}'
  • NaN、Infinity、-Infinity などの値や null は null としてシリアル化されます。
 JSON.stringify(null) // 'null'
JSON.stringify(NaN) // 'null'
  • Object オブジェクト、およびMap/Set/WeakMap/WeakSetなどの複合型オブジェクトは、シリアル化中にオブジェクトの非トラバース プロパティを無視します。
定数オブジェクト = {}
オブジェクト.defineProperties(obj, {
  'json': { 値: 'JSON'、列挙可能: true },
  'stringify': { 値: 'STRINGIFY'、列挙可能: false }
})
JSON.stringify(オブジェクト)
// '{"json":"JSON"}'
  • 名前にシンボルが含まれる属性は無視されます。
 JSON.stringify({[シンボル()]: 333}) // '{}'
  • 配列に加えて、他のオブジェクトのプロパティもシリアル化時に順序が乱れる可能性があります。
定数a = { '1': 911, 'r': 822, '11': 9922}
JSON.stringify(a)
// '{"1":911,"11":9922,"r":822}'
  • 変換されたオブジェクトがtoJSON()メソッドを定義している場合、このメソッドの戻り値は変換されたオブジェクトのシリアル化結果になります。

    プロセスは他の属性を無視します。

定数 a = { キー: 'json' }
a.toJSON = () => 'JSON'
JSON.stringify(a)
// '"JSON"'
  • RegExp オブジェクトと Error オブジェクトは、空のオブジェクト文字列としてシリアル化されます。
 JSON.stringify(/\d/) // "{}"
JSON.stringify(新しいエラー()) // "{}"

対応するオブジェクトをシリアル化する場合は、toJSON メソッドを設定して実装する必要があります。

 RegExp.prototype.toJSON = RegExp.prototype.toString
JSON.stringify(/\d/) // '"/\\\\d/"'
  • Date オブジェクトには toJSON() が定義されており、これにより文字列に変換され、シリアル化できるようになります。

    Date.toISOString()と同じです。

 JSON.stringify(新しい日付())
// '"2021-12-31T02:24:05.477Z"'
  • 循環参照オブジェクトに対してこのメ​​ソッドを実行すると、エラーが発生します。

    オブジェクトは相互に参照し、無限ループを形成します。

定数a = {}
a.キー = a
JSON.stringify(a)
// キャッチされない TypeError: 循環構造を JSON に変換しています
  • BigInt 値を変換すると TypeError がスローされます。

    BigInt 値は JSON シリアル化できません

JSON.文字列化(12n)
// キャッチされない TypeError: BigInt をシリアル化する方法がありません
  • ユニコードエスケープのサポート強化
定数a = {'\u0066': 333}
JSON.stringify(a)
// '{"f":333}'

これで、JSON.parse と JSON.stringify の詳細な使用法に関するこの記事は終了です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援して頂ければ幸いです。

以下もご興味があるかもしれません:
  • json.stringify() と json.parse() の違いと使い方
  • 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() の紹介

<<:  Html+Css を使用して、シンプルなナビゲーション バー機能を実装します (マウスに遭遇するとナビゲーション バーの背景色が切り替わります)

>>:  HTML フォーム コントロールの無効な属性の読み取り専用と無効の概要

推薦する

XHTML 入門チュートリアル: リストタグの使用

リストは、類似または関連する一連の項目をリストするために使用されます。順序なしリスト(箇条書きリスト...

MySQL での replace と replace into の使い方の説明

MySQL の replace と replace into はどちらも頻繁に使用される関数です。r...

Linuxのバージョン情報を復号化する方法

Linux バージョンに関する情報を表示および解釈するのは、見た目よりも少し複雑です。単純なバージョ...

Tomcat が https アクセスをサポートするための手順の説明

tomcat を https アクセスに対応させる方法ステップ: (1)キーストアファイルを生成する...

ローカルサーバーを構築するためのwebpack-dev-serverの実装

目次序文webpack-deb サーバーwebpack-dev-server 起動エラー解決策1解決...

MySQL の重要なパフォーマンス インデックスの計算と最適化方法の概要

1 QPS 計算 (1 秒あたりのクエリ数) MyISAMエンジンベースのDBの場合 MySQL&g...

MySQL MGR 構築時の一般的な問題と解決策

目次01 よくある故障 1 02 よくある欠陥 2 03 よくある欠陥 3 04 よくある欠陥 4 ...

Ubuntu システムにおける Mysql ERROR 1045 (28000): ユーザー root@localhost へのアクセスが拒否される問題の解決方法

最初の方法: skip-grant-tables: 非常に便利なmysql起動パラメータ非常に便利な...

ネイティブ js が携帯電話のプルダウン更新を模倣

この記事では、携帯電話のプルダウンリフレッシュを模倣したjsの具体的なコードを参考までに共有します。...

ウェブページ制作でウェブフォントファイルにベクターアイコンを追加する方法

ご存知のとおり、コンピューターには 2 種類の画像があり、1 つはビットマップ、もう 1 つはベクタ...

Reactはグローバル箇条書きボックスメソッドをカプセル化します

この記事の例では、Reactカプセル化グローバルポップアップボックスの具体的なコードを参考までに共有...

新しいユーザーを作成し、MySQLに権限を付与する最も簡単な方法

ユーザーを作成します: 'oukele' によって識別されるユーザー 'ou...

よく忘れられがちな CSS のヒント 26 選

これは、よく使われるけれども忘れられがちな CSS 実装方法のコレクションです。抜けや追加があれば、...

MySQLでANDとORを組み合わせる問題を解決する

以下のように表示されます。 SELECT prod_name,prod_price FROM pro...

MySQL でメタデータ ロックがブロックされている場所を確認する方法

MySQL でメタデータ ロックがブロックされている場所を確認する方法手順: 1. セッション1の実...