JSON 形式 (JavaScript Object Notation の略) は、データ交換に使用されるテキスト形式で、簡単に記述できます。 JavaScript ネイティブ構文に基づいて、オブジェクト、配列、数値、文字列、ブール値、null をシリアル化できます。 ES5 では、JSON 形式のデータを処理するために特に使用される JSON オブジェクトが追加されました。 JSON はオブジェクトですが、 JSON の型 === 'オブジェクト' JSON.パース
JSON.parse('{}') // {} JSON.parse('true') // 真 JSON.parse('null') // null JSON.parse 構文JSON.parse(テキスト[, reviver])
戻り値:指定された JSON テキストのオブジェクト/値に対応する JavaScript オブジェクト/値。 リバイバーパラメータreviver 関数は、解析された JavaScript 値を変換および処理し、処理後の最終結果を返すために使用されます。 変換プロセス:
reviver 関数の 2 つのパラメータ、
基本的な型変換: 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.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 入力の予期しない終了
JSON.parse(未定義) // キャッチされない構文エラー: JSON の位置 0 に予期しないトークン u があります JSON.parse(シンボル()) // キャッチされない TypeError: シンボル値を文字列に変換できません JSON.parse('12n') // キャッチされない構文エラー: JSON の位置 2 に予期しないトークン n があります
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 に予期しないトークン } があります
JSON.parse('{"\u0066":333}') // {f: 333}
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 構文JSON.stringify(値[, 置換子[, スペース]])
戻り値:指定された値を表す JSON 形式の文字列。 置換パラメータreplacer パラメータは、次の 3 つの状況のいずれかになります。
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"}'
処理プロセス:
JSON.stringify({ json: 1, stringify: { val: 'rr'} }, (キー, 値) => { console.log(`キー: ${key}, 値:`, 値) 戻り値 }) // キー: ,値: {json: 1, stringify: {…}} // キー: json、値: 1 // キー: 文字列化、値: {val: 'rr'} // キー: val、値: rr // '{"json":1,"stringify":{"val":"rr"}}' 値の型処理:
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つあります。
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 機能
JSON.stringify(333) // '333' JSON.stringify(true) // 'true' JSON.stringify(新しい文字列('333')) //'"333"' JSON.stringify(Boolean(true)) // 'true'
JSON.stringify('json') === 'json' // false JSON.stringify('json') === '"json"' // true
JSON.stringify(Symbol()) // 未定義 JSON.stringify([Symbol(), Math.abs, undefined]) // '[null,null,null]' JSON.stringify({ [Symbol()]: Math.abs, キー: undefined }) // '{}'
JSON.stringify(null) // 'null' JSON.stringify(NaN) // 'null'
定数オブジェクト = {} オブジェクト.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}'
定数 a = { キー: 'json' } a.toJSON = () => 'JSON' JSON.stringify(a) // '"JSON"'
JSON.stringify(/\d/) // "{}" JSON.stringify(新しいエラー()) // "{}" 対応するオブジェクトをシリアル化する場合は、toJSON メソッドを設定して実装する必要があります。 RegExp.prototype.toJSON = RegExp.prototype.toString JSON.stringify(/\d/) // '"/\\\\d/"'
JSON.stringify(新しい日付()) // '"2021-12-31T02:24:05.477Z"'
定数a = {} a.キー = a JSON.stringify(a) // キャッチされない TypeError: 循環構造を JSON に変換しています
JSON.文字列化(12n) // キャッチされない TypeError: BigInt をシリアル化する方法がありません
定数a = {'\u0066': 333} JSON.stringify(a) // '{"f":333}' これで、JSON.parse と JSON.stringify の詳細な使用法に関するこの記事は終了です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援して頂ければ幸いです。 以下もご興味があるかもしれません:
|
<<: Html+Css を使用して、シンプルなナビゲーション バー機能を実装します (マウスに遭遇するとナビゲーション バーの背景色が切り替わります)
>>: HTML フォーム コントロールの無効な属性の読み取り専用と無効の概要
リストは、類似または関連する一連の項目をリストするために使用されます。順序なしリスト(箇条書きリスト...
MySQL の replace と replace into はどちらも頻繁に使用される関数です。r...
Linux バージョンに関する情報を表示および解釈するのは、見た目よりも少し複雑です。単純なバージョ...
tomcat を https アクセスに対応させる方法ステップ: (1)キーストアファイルを生成する...
目次序文webpack-deb サーバーwebpack-dev-server 起動エラー解決策1解決...
1 QPS 計算 (1 秒あたりのクエリ数) MyISAMエンジンベースのDBの場合 MySQL&g...
目次01 よくある故障 1 02 よくある欠陥 2 03 よくある欠陥 3 04 よくある欠陥 4 ...
最初の方法: skip-grant-tables: 非常に便利なmysql起動パラメータ非常に便利な...
この記事では、携帯電話のプルダウンリフレッシュを模倣したjsの具体的なコードを参考までに共有します。...
ご存知のとおり、コンピューターには 2 種類の画像があり、1 つはビットマップ、もう 1 つはベクタ...
この記事の例では、Reactカプセル化グローバルポップアップボックスの具体的なコードを参考までに共有...
ユーザーを作成します: 'oukele' によって識別されるユーザー 'ou...
これは、よく使われるけれども忘れられがちな CSS 実装方法のコレクションです。抜けや追加があれば、...
以下のように表示されます。 SELECT prod_name,prod_price FROM pro...
MySQL でメタデータ ロックがブロックされている場所を確認する方法手順: 1. セッション1の実...