まず、JS オブジェクトを JSON 文字列にシリアル化する際の JS の一般的な問題を見てみましょう。JSON.stringify を渡した後、次の JS オブジェクトの文字列はどのように見えるでしょうか。急いでコンソールにコピーして貼り付ける必要はありません。まず、コード エディターまたはペーパーを開いて書いて読み、記述後にコンソールの出力を注意深く比較してください。間違いがある場合は、必ずテキスト全体を読んでコメントしてください。ははは。
2 番目の質問です。最終的な JSON 文字列の「友達」の名前をすべて大文字に変更したい場合、つまり、「Good」を「GOOD」に、「Man」を「MAN」に変更します。やれ？
上記の 2 つの質問に基づいて、ソースに戻って、JSON とは一体何なのかを考えてみましょう。 JSON はなぜデータ交換が簡単なのでしょうか? JSON オブジェクトと JS オブジェクトの違いは何ですか? JS、JSON.parse、JSON.stringify、および一般的ではない toJSON では、これらの関数のパラメーターと処理の詳細は何ですか?
フォーマットとは何ですか?たとえば、身長「160cm」、体重「60kg」の「Two Hundred Six」という人がいて、この人の情報を他の人に伝えたいとします。または他にもたくさんの選択肢があります:
4. データ交換に広く使用されています
軽量であることはデータ交換にとってすでに利点ですが、さらに重要なのは、JSON は読み取り、書き込み、マシンの解析が簡単であることです。つまり、この JSON は人間とマシンの両方に優しく、軽量で言語に依存しません (テキストベースであるため)。 ）そのため、JSON はデータ交換に広く使用されています。
フロントエンドは、送信されるデータをラップする JS オブジェクトを構築し、その JS オブジェクトを JSON 文字列に変換して、リクエストをバックエンドに送信します。
バックエンド PHP は、この JSON 文字列を受信し、JSON 文字列を PHP オブジェクトに変換して、リクエストを処理します。
ご覧のとおり、ここでは同じデータに 3 つの異なる表現形式があります。つまり、フロントエンド JS オブジェクト、送信される JSON 文字列、バックエンド PHP オブジェクトは明らかに同じものではありません。なぜなら、誰もがデータを送信するために JSON を使用しているため、誰もがこのデータ形式を理解でき、他のさまざまな言語環境でデータを交換するのに便利です。
「JSON は JS のサブセットである」という文をよく聞きますが、JSON 形式に準拠するすべての文字列は js に解析できると、後から発見するまではそう思っていました。
1. 本質的に異なる 2 つのものがなぜこれほど密接に結びついているのですか
「横断歩道」と「横断歩道」は「横断歩道」の縞模様に基づいて表示され、名前が付けられているのと同じように、JSON オブジェクトと JS オブジェクトは本質的にまったく同じものではありません。しかし、横断歩道は生きており、横断歩道は生きています。非生物。
同様に、「JSON」の正式名称は「JavaScript Object Notation」なので、その形式（構文）はJSをベースにしていますが、あくまで形式であり、JSオブジェクトはインスタンス、つまりメモリ上に存在するものです。
冗談ですが、JSON が PHP に基づいている場合、それは PON と呼ばれる可能性があり、その形式は次のようになります ['propertyOne' => 'foo', 'propertyTwo' => 42,]。そうであれば、JSON になるかもしれません。現在では PHP とより密接に関連しています。
2. JS オブジェクトと比較した JSON 形式の厳密な構文は何ですか
まず、「キーと値のペアとして表現されるオブジェクト」の形式で 2 つの違いを比較してみます。JSON が他の形式でどのように表現されるかについては、比較の後にリストします。
コンテンツを比較する |
|
ジェソン
|
JSオブジェクト
|
|
キー名
|
二重引用符で囲む必要があります
|
付けないこと、シングルクォーテーションを付けること、ダブルクォーテーションを付けることは許可されています
|
|
属性値
|
数値 (10 進数)、文字列 (二重引用符)、ブール値、null のみを指定できます。
JSON 要件を満たす配列またはオブジェクトにすることもできます。
関数、NaN、無限大、-無限大、未定義は使用できません
|
何でも大好き
|
|
カンマの問題
|
最後の属性の後にカンマを入れることはできません
|
はい
|
|
価値
|
先頭の 0 は使用できません。小数点の後に数字が必要です
|
制限なし
|
可以看到，相对于JS对象，JSON的格式更严格，所以大部分写的JS对象是不符合JSON的格式的。
以下代码引用自这里
var obj1 = {}; // 这只是 JS 对象
// 可把这个称做：JSON 格式的 JavaScript 对象
var obj2 = {"width":100,"height":200,"name":"rose"};
// 可把这个称做：JSON 格式的字符串
var str1 = '{"width":100,"height":200,"name":"rose"}';
// 这个可叫 JSON 格式的数组，是 JSON 的稍复杂一点的形式
var arr = [
{"width":100,"height":200,"name":"rose"},
{"width":100,"height":200,"name":"rose"},
{"width":100,"height":200,"name":"rose"},
];
// 这个可叫稍复杂一点的 JSON 格式的字符串
var str2='['+
'{"width":100,"height":200,"name":"rose"},'+
'{"width":100,"height":200,"name":"rose"},'+
'{"width":100,"height":200,"name":"rose"},'+
']';ログイン後にコピー
另外，除了常见的“正常的”JSON格式，要么表现为一个对象形式{...}，要么表现为一个数组形式[...]，任何单独的一个10进制数值、双引号字符串、布尔值和null都是有效符合JSON格式的。
这里有完整的JSON语法参考
3. 一个有意思的地方，JSON不是JS的子集
首先看下面的代码，你可以copy到控制台执行下：
var code = '"\u2028\u2029"';
JSON.parse(code); // works fine
eval(code); // fails
ログイン後にコピー
这两个字符\u2028和\u2029分别表示行分隔符和段落分隔符，JSON.parse可以正常解析，但是当做js解析时会报错。
三、这几个JS中的JSON函数，弄啥嘞
在JS中我们主要会接触到两个和JSON相关的函数，分别用于JSON字符串和JS数据结构之间的转化，一个叫JSON.stringify，它很聪明，聪明到你写的不符合JSON格式的JS对象都能帮你处理成符合JSON格式的字符串，所以你得知道它到底干了什么，免得它只是自作聪明，然后让你Debug long time；另一个叫JSON.parse，用于转化json字符串到JS数据结构，它很严格，你的JSON字符串如果构造地不对，是没办法解析的。
而它们的参数不止一个，虽然我们经常用的时候只传入一个参数。
此外，还有一个toJSON函数，我们较少看到，但是它会影响JSON.stringify。
1. 将JS数据结构转化为JSON字符串——JSON.stringify
这个函数的函数签名是这样的：
JSON.stringify(value[, replacer [, space]])
ログイン後にコピー
下面将分别展开带1~3个参数的用法，最后是它在序列化时做的一些“聪明”的事，要特别注意。
1.1 基本使用——仅需一个参数
这个大家都会使用，传入一个JSON格式的JS对象或者数组，JSON.stringify({"name":"Good Man","age":18})返回一个字符串"{"name":"Good Man","age":18}"。
可以看到本身我们传入的这个JS对象就是符合JSON格式的，用的双引号，也没有JSON不接受的属性值，那么如果像开头那个例子中的一样，how to play？不急，我们先举简单的例子来说明这个函数的几个参数的意义，再来说这个问题。
1.2 第二个参数可以是函数，也可以是一个数组
如果第二个参数是一个函数，那么序列化过程中的每个属性都会被这个函数转化和处理
如果第二个参数是一个数组，那么只有包含在这个数组中的属性才会被序列化到最终的JSON字符串中
如果第二个参数是null，那作用上和空着没啥区别，但是不想设置第二个参数，只是想设置第三个参数的时候，就可以设置第二个参数为null
这第二个参数若是函数
var friend={
"firstName": "Good",
"lastName": "Man",
"phone":"1234567",
"age":18
};
var friendAfter=JSON.stringify(friend,function(key,value){
if(key==="phone")
return "(000)"+value;
else if(typeof value === "number")
return value + 10;
else
return value; //如果你把这个else分句删除，那么结果会是undefined
});
console.log(friendAfter);
//输出：{"firstName":"Good","lastName":"Man","phone":"(000)1234567","age":28}ログイン後にコピー
如果制定了第二个参数是函数，那么这个函数必须对每一项都有返回，这个函数接受两个参数，一个键名，一个是属性值，函数必须针对每一个原来的属性值都要有新属性值的返回。
那么问题来了，如果传入的不是键值对的对象形式，而是方括号的数组形式呢？，比如上面的friend变成这样：friend=["Jack","Rose"]，那么这个逐属性处理的函数接收到的key和value又是什么？如果是数组形式，那么key是索引，而value是这个数组项，你可以在控制台在这个函数内部打印出来这个key和value验证。
这第二个参数若是数组
var friend={
"firstName": "Good",
"lastName": "Man",
"phone":"1234567",
"age":18
};
//注意下面的数组有一个值并不是上面对象的任何一个属性名
var friendAfter=JSON.stringify(friend,["firstName","address","phone"]);
console.log(friendAfter);
//{"firstName":"Good","phone":"1234567"}
//指定的“address”由于没有在原来的对象中找到而被忽略ログイン後にコピー
如果第二个参数是一个数组，那么只有在数组中出现的属性才会被序列化进结果字符串，只要在这个提供的数组中找不到的属性就不会被包含进去，而这个数组中存在但是源JS对象中不存在的属性会被忽略，不会报错。
1.3 第三个参数用于美化输出——不建议用
指定缩进用的空白字符，可以取以下几个值：
var friend={
"firstName": "Good",
"lastName": "Man",
"phone":{"home":"1234567","work":"7654321"}
};
//直接转化是这样的：
//{"firstName":"Good","lastName":"Man","phone":{"home":"1234567","work":"7654321"}}
var friendAfter=JSON.stringify(friend,null,4);
console.log(friendAfter);
/*
{
"firstName": "Good",
"lastName": "Man",
"phone": {
"home": "1234567",
"work": "7654321"
}
}
*/
var friendAfter=JSON.stringify(friend,null,"HAHAHAHA");
console.log(friendAfter);
/*
{
HAHAHAHA"firstName": "Good",
HAHAHAHA"lastName": "Man",
HAHAHAHA"phone": {
HAHAHAHAHAHAHAHA"home": "1234567",
HAHAHAHAHAHAHAHA"work": "7654321"
HAHAHAHA}
}
*/
var friendAfter=JSON.stringify(friend,null,"WhatAreYouDoingNow");
console.log(friendAfter);
/* 最多只取10个字符
{
WhatAreYou"firstName": "Good",
WhatAreYou"lastName": "Man",
WhatAreYou"phone": {
WhatAreYouWhatAreYou"home": "1234567",
WhatAreYouWhatAreYou"work": "7654321"
WhatAreYou}
}
*/ログイン後にコピー
笑笑就好，别这样用，序列化是为了传输，传输就是能越小越好，加莫名其妙的缩进符，解析困难（如果是字符串的话），也弱化了轻量化这个特点。。
1.4 注意这个函数的“小聪明”（重要）
如果有其他不确定的情况，那么最好的办法就是"Have a try"，控制台做下实验就明了。
键名不是双引号的（包括没有引号或者是单引号），会自动变成双引号；字符串是单引号的，会自动变成双引号
最后一个属性后面有逗号的，会被自动去掉
非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中
这个好理解，也就是对非数组对象在最终字符串中不保证属性顺序和原来一致
布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值
也就是你的什么new String("bala")会变成"bala"，new Number(2017)会变成2017
undefined、任意的函数（其实有个函数会发生神奇的事，后面会说）以及 symbol 值（symbol详见ES6对symbol的介绍）
JSON.stringify({x: undefined, y: function(){return 1;}, z: Symbol("")});
//出现在非数组对象的属性值中被忽略："{}"
JSON.stringify([undefined, Object, Symbol("")]);
//出现在数组对象的属性值中，变成null："[null,null,null]"ログイン後にコピー
2. 将JSON字符串解析为JS数据结构——JSON.parse
这个函数的函数签名是这样的：
JSON.parse(text[, reviver])
ログイン後にコピー
如果第一个参数，即JSON字符串不是合法的字符串的话，那么这个函数会抛出错误，所以如果你在写一个后端返回JSON字符串的脚本，最好调用语言本身的JSON字符串相关序列化函数，而如果是自己去拼接实现的序列化字符串，那么就尤其要注意序列化后的字符串是否是合法的，合法指这个JSON字符串完全符合JSON要求的严格格式。
值得注意的是这里有一个可选的第二个参数，这个参数必须是一个函数，这个函数作用在属性已经被解析但是还没返回前，将属性处理后再返回。
var friend={
"firstName": "Good",
"lastName": "Man",
"phone":{"home":"1234567","work":["7654321","999000"]}
};
//我们先将其序列化
var friendAfter=JSON.stringify(friend);
//'{"firstName":"Good","lastName":"Man","phone":{"home":"1234567","work":["7654321","999000"]}}'
//再将其解析出来，在第二个参数的函数中打印出key和value
JSON.parse(friendAfter,function(k,v){
console.log(k);
console.log(v);
console.log("----");
});
/*
firstName
Good
----
lastName
Man
----
home
1234567
----
0
7654321
----
1
999000
----
work
[]
----
phone
Object
----
Object
----
*/ログイン後にコピー
仔细看一下这些输出，可以发现这个遍历是由内而外的，可能由内而外这个词大家会误解，最里层是内部数组里的两个值啊，但是输出是从第一个属性开始的，怎么就是由内而外的呢？
这个由内而外指的是对于复合属性来说的，通俗地讲，遍历的时候，从头到尾进行遍历，如果是简单属性值（数值、字符串、布尔值和null），那么直接遍历完成，如果是遇到属性值是对象或者数组形式的，那么暂停，先遍历这个子JSON，而遍历的原则也是一样的，等这个复合属性遍历完成，那么再完成对这个属性的遍历返回。
本质上，这就是一个深度优先的遍历。
有两点需要注意：
3. 影响 JSON.stringify 的神奇函数——object.toJSON
如果你在一个JS对象上实现了toJSON方法，那么调用JSON.stringify去序列化这个JS对象时，JSON.stringify会把这个对象的toJSON方法返回的值作为参数去进行序列化。
var info={
"msg":"I Love You",
"toJSON":function(){
var replaceMsg=new Object();
replaceMsg["msg"]="Go Die";
return replaceMsg;
}
};
JSON.stringify(info);
//出si了，返回的是：'"{"msg":"Go Die"}"',说好的忽略函数呢ログイン後にコピー
这个函数就是这样子的。
其实Date类型可以直接传给JSON.stringify做参数，其中的道理就是，Date类型内置了toJSON方法。
4. 互換性に関する概要と問題点
ここで、ようやく JSON と JS の JSON を整理し、JSON が文法的に JS 言語から派生した軽量のデータ交換形式であることを理解し、その違いも理解しました。 JSON と一般的な JS データ構造 (特にオブジェクト) との関係を説明し、JS における JSON 処理の 3 つの機能と詳細についてさらに詳しく説明します。
残念ながら、上記で使用した 3 つの機能は、IE7 および IE7 以前のブラウザーとは互換性がありません。互換性に関する議論は後ほど残されます。互換性の問題をアプリケーション内で直接解決したい場合は、JSON 公式 js を適用することで解決できます。
間違いがある場合は、メッセージを残して指摘してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
