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 フォーム コントロールの無効な属性の読み取り専用と無効の概要

推薦する

Linux カーネル デバイス ドライバーのメモリ管理に関する注意事項

/************************ * Linux メモリ管理 *********...

yum を使用して rpm と関連する依存関係をダウンロードして、docker をオフラインでインストールします。

yum を使用してすべての依存関係を一緒にインストールできますが、–downloadonly –d...

JavaScript はモーダルボックスのドラッグ効果を実現します

これはモーダル ボックスのドラッグのケースです。ここで実装する関数は次のとおりです。 1. ポップア...

Reactの新バージョンのライフサイクルフック機能と使用方法の詳細な説明

旧ライフサイクルと比較して 3つのフックが廃止され、2つの新しいフックが追加されましたReact16...

クラウドネイティブテクノロジー Kubernetes (K8S) の紹介

目次01 Kubernetes とは何ですか? 02 KubernetesとCompost+Swar...

表のセルの内容が超過した場合に省略記号効果を表示する(実装コード)

例示するフロントエンド開発では、セルの幅を制限し、コンテンツが制限を超える部分に省略記号を表示する必...

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

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

Nginx proxy_pass の / スラッシュによって引き起こされた殺人事件の詳細な説明

背景nginx サーバー モジュールは 2 つのサーバーにプロキシする必要があるため、異なるサーバー...

React ルーティング リンク構成の詳細

1. 属性へのリンク(1)ルーティングパスを配置する(2)指定された形式でオブジェクトを配置する{パ...

Lua モジュールを使用して WAF を実装する Nginx の原理の分析

目次1. WAFの背景2. WAFとは3. 動作原理4. WAF機能5. WAFと従来のファイアウォ...

JS における ES6 継承と ES5 継承の違い

目次継承ES5 プロトタイプ継承ES6 クラス継承両者の違いES5プロトタイプ継承の内部実装ES6 ...

InnoDB エンジンのパフォーマンスを最適化するための my.cnf パラメータ構成

私はインターネット上で数え切れないほどの my.cnf 構成を読みましたが、言及されている構成のほと...

CSS における XHTML タグの対応する属性と使用法

XHTML CSS を使って Web ページをデザインし始めた頃は、タグの使用経験も少なく、あまり気...

mysql トリガーの作成と使用例

目次トリガーとは何かトリガーを作成するMySQL 作成構文のキーワードの説明: 1. MySQL ト...

乱数、文字列、日付、検証コード、UUIDを生成するMySQLメソッド

目次乱数を生成する0から1までの乱数を生成する指定された範囲内で乱数を生成します6桁のモバイル認証コ...