3分鐘掌握常用的JS操作JSON方法總結(jié)
工作中做了幾款自動(dòng)化測(cè)試工具都是跟日志讀取相關(guān),日志格式又大多數(shù)都是JSON,所以這里把常用的JS操作JSON的方法做了總結(jié)~~
一、概要簡(jiǎn)介
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式,同時(shí),JSON是 JavaScript 原生格式,這意味著在 JavaScript 中處理 JSON數(shù)據(jù)不須要任何特殊的 API 或工具包。
在JSON中,有兩種結(jié)構(gòu):對(duì)象和數(shù)組
1、對(duì)象以“{”開始,“}”結(jié)束,“key/value”之間運(yùn)用 “,”分隔。
2、數(shù)組以“[”開始,“]”結(jié)束。值之間運(yùn)用 “,”分隔。
二、JSON對(duì)象和JSON字符串的轉(zhuǎn)換
在數(shù)據(jù)傳輸過程中,JSON是以字符串的形式傳遞的,而JS操作的是JSON對(duì)象,所以,JSON對(duì)象和JSON字符串之間的相互轉(zhuǎn)換是關(guān)鍵。如下:
JSON字符串:
JSON對(duì)象:
1、將String轉(zhuǎn)化為JSON
2、將JSON轉(zhuǎn)化為String
三、JSON的輸出美化
上一節(jié)我們講到了將JSON對(duì)象轉(zhuǎn)化為JSON字符串可以用JSON.stringify() 方法,stringify還有個(gè)可選參數(shù)space(1<=space<=10),可以指定縮進(jìn)的空格數(shù),用于美化輸出;
我們看下代碼:
待美化的JSON:
美化后的輸出,是不是看得更清晰了:
四、JSON字符串的替換
日志處理中常常有這樣的字符串,如下:
需要經(jīng)過替換后,才能變成標(biāo)準(zhǔn)的JSON字符串格式,從而轉(zhuǎn)化成JSON對(duì)象。這里我們需要用JS實(shí)現(xiàn)replaceAll的功能,將所有的 ' \\" ' 替換成 ' " ' 。
代碼如下,這里的gm是固定的,g表示global,m表示multiple:
替換后的效果如下:
五、遍歷JSON對(duì)象和數(shù)組
1、遍歷JSON對(duì)象,代碼如下:
2、遍歷JSON數(shù)組,代碼如下:
六、遞歸遍歷JSON對(duì)象
為了實(shí)現(xiàn)一些復(fù)雜功能常常需要遞歸遍歷JSON對(duì)象,這里給出一個(gè)遞歸的例子,希望能給大家作為參考。
例子中要求處理JSON字符串,遇到數(shù)組的時(shí)候,數(shù)組中有超過一個(gè)對(duì)象,刪除第一個(gè)對(duì)象之后的所有對(duì)象,假設(shè)原始JSON如下:
要求處理后的數(shù)組中只保留第一個(gè)對(duì)象,處理完成后應(yīng)該如下圖所示:
遞歸代碼如下:
以上所述是小編給大家介紹的3分鐘掌握常用的JS操作JSON方法總結(jié),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
javaScript合并對(duì)象的多種方式及知識(shí)擴(kuò)展
眾所周知JavaScript中有多種方法可以合并對(duì)象,下面這篇文章主要給大家介紹了關(guān)于javaScript合并對(duì)象的多種方式及知識(shí)擴(kuò)展,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02Node.js中AES加密和其它語(yǔ)言不一致問題解決辦法
這篇文章主要介紹了Node.js中AES加密和其它語(yǔ)言不一致問題解決辦法,例如和C#、JAVA語(yǔ)言相互通信時(shí),需要的朋友可以參考下2014-03-03JS實(shí)現(xiàn)可關(guān)閉的對(duì)聯(lián)廣告效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)可關(guān)閉的對(duì)聯(lián)廣告效果代碼,涉及JavaScript針對(duì)滾動(dòng)事件動(dòng)態(tài)設(shè)置頁(yè)面元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09實(shí)現(xiàn)lightBox時(shí)的樣式與行為分離減少JS
本教程旨在實(shí)現(xiàn)lightBox時(shí)的樣式與行為分離,減少JS在各方面(全屏遮蔽、ie6中遮蔽select、雙向居中、高度自適應(yīng)內(nèi)容等)的工作。2009-07-07JavaScript設(shè)計(jì)模式之觀察者模式實(shí)例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之觀察者模式,結(jié)合實(shí)例形式詳細(xì)分析了javascript觀察者模式的概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-01-01CodeMirror實(shí)現(xiàn)代碼對(duì)比功能(插件react vue)
這篇文章主要介紹了CodeMirror實(shí)現(xiàn)代碼對(duì)比功能,用到的插件有vue或者react都需要這一步且同樣的下載方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(1)
這篇文章主要為大家詳細(xì)介紹了bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06javascript原始值和對(duì)象引用實(shí)例分析
這篇文章主要介紹了javascript原始值和對(duì)象引用的方法,實(shí)例分析了javascript原始值和對(duì)象引用的功能、定義與相關(guān)技巧,需要的朋友可以參考下2015-04-04