国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

JavaScript核心技術(shù)之JSON詳解

2023-3-31    前端達(dá)人

JSON是什么?

JSON(JavaScript Object Notation, JS對象簡譜)是一種輕量級的數(shù)據(jù)交換格式。它基于 ECMAScript(European Computer Manufacturers Association, 歐洲計算機(jī)協(xié)會制定的js規(guī)范)的一個子集,采用完全獨(dú)立于編程語言的文本格式來存儲和表示數(shù)據(jù)。簡潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言。 易于人閱讀和編寫,同時也易于機(jī)器解析和生成,并有效地提升網(wǎng)絡(luò)傳輸效率。 

JSON源自于JavaScript,是一種輕量級(Light-Meight)、基于文本的(Text-Based)、可讀的(Human-Readable)格式。

在現(xiàn)在的開發(fā)中,能夠進(jìn)行數(shù)據(jù)交換格式的,包括兩個JSON   XML。

JSON是存儲和交換文本信息的語法,類似 XML,JSON比 XML更小、更快,更易解析。

 那么,簡而言之,對JSON的說明總結(jié)如下:

  • JSON是獨(dú)立于任何編程語言的數(shù)據(jù)格式
  • 是一種用于存儲和傳輸數(shù)據(jù)的輕量級格式
  • 語法是自描述的,便于人類閱讀和理解

JSON語法

基本語法:

  • 數(shù)組(Array)用方括號 "[]" 表示
  • 對象(0bject)用大括號 "{}" 表示
  • 名稱 / 值 對(name/value)組合成數(shù)組和對象
  • 名稱( name )置于雙引號中,值(value)有字符串、數(shù)值、布爾值、null、對象和數(shù)組
  • 并列的數(shù)據(jù)之間用逗號 "," 分隔
  • 名稱/值對包括字段名稱(在雙引號中),后面寫一個冒號,然后是值

需要注意的是:

JSON不支持注釋。向 JSON添加注釋無效

JSON文件的文件類型是 .json

JSON文本的 MIME 類型是 application/json

獲取JSON數(shù)據(jù)

 json是以對象的形式存在的,直接獲取JSON數(shù)據(jù)可通過如下方法:

1. json對象.鍵名

2. json對象["鍵名"]

3. 數(shù)組對象[索引]

4. 遍歷 

代碼示例:


  1. //定義基本格式
  2. var person = { name: "張三", age: 23, gender: true };
  3. var persons = [
  4. { name: "張三", age: 23, gender: true },
  5. { name: "李四", age: 24, gender: true },
  6. { name: "王五", age: 25, gender: false },
  7. ];
  8. //獲取person對象中所有的鍵和值
  9. //for in 循環(huán)
  10. /* for(var key in person){
  11. //這樣的方式獲取不行。因為相當(dāng)于 person."name"
  12. //alert(key + ":" + person.key);
  13. alert(key+":"+person[key]);
  14. }*/
  15. //獲取persons中的所有值
  16. for (var i = 0; i < persons.length; i++) {
  17. var p = persons[i];
  18. for (var key in p) {
  19. console.log(key + ":" + p[key]);
  20. }
  21. }

 輸出結(jié)果為:

 JSON 解析與序列化(在JavaScript中)

先在控制臺中打印一下JSON對象,看看有什么,如圖:

 顯而易見,在JavaScript中JSON對象僅有兩個方法:parse和stringify。后面會詳細(xì)介紹一下這兩個方法

序列化的概念:序列化是將對象轉(zhuǎn)化為字節(jié)序列的過程。對象序列化后可以在網(wǎng)絡(luò)上傳輸,或者保存到硬盤上。

將對象序列化成json字符串: JSON.stringify(json對象);

反序列化:將json字符串反序列化為對象:   JSON.parse(str)

JSON.parse

API介紹:用來解析 JSON字符串,構(gòu)造由字符串描述的 JavaScript 值或?qū)ο?,傳入的字符串不符?nbsp;JSON規(guī)范會報錯

語法:

JSON.parse(str, reviver);
  • str:要解析的 JSON字符串
  • reviver:可選的函數(shù) function(key,value),該函數(shù)的第一個參數(shù)和第二個參數(shù)分別代表鍵值對的鍵和值,并可以對值進(jìn)行轉(zhuǎn)換(函數(shù)返回值當(dāng)做處理后的value)

代碼示例:


  1. // JSON.parse() 解析JSON字符串, 將JSON轉(zhuǎn)換為對象
  2. let json = '{"name": ["js", "webpack"], "age": 22, "gridFriend": "ljj"}';
  3. console.log(JSON.parse(json));
  4. // {name: Array(2), age: 22, gridFriend: 'ljj'}
  5. // 第二個參數(shù)是一個函數(shù),key和value代表每個key/value對
  6. let result = JSON.parse(json, (key, value) => {
  7. if (key == "age") {
  8. return `年齡:${value}`;
  9. }
  10. return value;
  11. });
  12. console.log(result);
  13. //{name: Array(2), age: '年齡:22', gridFriend: 'ljj'}

 JSON.stringify

API介紹:將一個 JavaScript 對象或值轉(zhuǎn)換為 JSON字符串

如果指定了一個 replacer 函數(shù),則可以選擇性地替換值,或者指定的 replacer 是數(shù)組,則可選擇性地僅包含數(shù)組指定的屬性

語法:

JSON.stringify(value, replacer, space)

value:將要序列化成 一個 JSON 字符串的值

replacer:

  • 如果該參數(shù)是一個函數(shù),則在序列化過程中,被序列化的值的每個屬性都會經(jīng)過該函數(shù)的轉(zhuǎn)換和處理
  • 如果該參數(shù)是一個數(shù)組,則只有包含在這個數(shù)組中的屬性名才會被序列化到最終的 JSON 字符串中
  • 如果該參數(shù)為 null 或者未提供,則對象所有的屬性都會被序列化

space:指定縮進(jìn)用的空白字符串,用于美化輸出

  • 如果參數(shù)是個數(shù)字,它代表有多少的空格;上限為10。該值若小于1,則意味著沒有空格
  • 如果該參數(shù)為字符串(當(dāng)字符串長度超過10個字母,取其前10個字母),該字符串將被作為空格
  • 如果該參數(shù)沒有提供(或者為 null),將沒有空格

代碼示例:


  1. let obj = {
  2. name: "jsx",
  3. age: 22,
  4. lesson: ["html", "css", "js"],
  5. };
  6. let json = JSON.stringify(obj);
  7. console.log(json);
  8. // {"name":"jsx","age":22,"lesson":["html","css","js"]}
  9. // 第二個參數(shù)replacer 為函數(shù)時,被序列化的值得屬性都會經(jīng)過該函數(shù)轉(zhuǎn)換處理
  10. function replacer(key, value) {
  11. if (typeof value === "string") {
  12. return undefined;
  13. }
  14. return value;
  15. }
  16. let result = JSON.stringify(obj, replacer);
  17. console.log(result);
  18. // {"age":22,"lesson":[null,null,null]}
  19. // 當(dāng)replacer參數(shù)為數(shù)組,數(shù)組的值代表將被序列化成 JSON 字符串的屬性名
  20. let result1 = JSON.stringify(obj, ["name", "lesson"]);
  21. // 只保留 “name” 和 “l(fā)esson” 屬性值
  22. console.log(result1);
  23. // {"name":"jsx","lesson":["html","css","js"]}
  24. // 第三個參數(shù)spcae,用來控制結(jié)果字符串里面的間距
  25. let result2 = JSON.stringify(obj, null, 4);
  26. console.log(result2);
  27. /*{
  28. "name": "jsx",
  29. "age": 22,
  30. "lesson": [
  31. "html",
  32. "css",
  33. "js"
  34. ]
  35. }*/

 注意:如果replacer是一個函數(shù),則該函數(shù)會進(jìn)行深處理,即如果鍵值對的值也是一個數(shù)組,則也會執(zhí)行該函數(shù)

JSON.stringify()原理

  • 轉(zhuǎn)換值如果有 toJSON() 方法,該方法定義什么值將被序列化
  • 非數(shù)組對象的屬性不能保證以特定的順序出現(xiàn)在序列化后的字符串中
  • 布爾值、數(shù)字、字符串的包裝對象在序列化過程中會自動轉(zhuǎn)換成對應(yīng)的原始值,undefined、任意的函數(shù)以及 symbol 值,在序列化過程中會被忽略(出現(xiàn)在非數(shù)組對象的屬性值中時)或者被轉(zhuǎn)換成 null(出現(xiàn)在數(shù)組中時)。函數(shù)、undefined 被單獨(dú)轉(zhuǎn)換時,會返回 undefined,如JSON.stringify(function(){}) or JSON.stringify(undefined)
  • 對包含循環(huán)引用的對象(對象之間相互引用,形成無限循環(huán))執(zhí)行此方法,會拋出錯誤
  • 所有以 symbol 為屬性鍵的屬性都會被完全忽略掉,即便 replacer 參數(shù)中強(qiáng)制指定包含了它們
  • Date 日期調(diào)用了 toJSON() 將其轉(zhuǎn)換為了 string 字符串(同Date.toISOString()),因此會被當(dāng)做字符串處理
  • NaN 和 Infinity 格式的數(shù)值及 null 都會被當(dāng)做 null
  • 其他類型的對象,包括 Map/Set/WeakMap/WeakSet,僅會序列化可枚舉的屬性


藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計paul-jarrel.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

日歷

鏈接

個人資料

存檔