JavaScript中常見的數(shù)據(jù)格式化方式詳解
前端一直被稱為項目開發(fā)的食物鏈底層，頁面出了問題，樣式不好看，數(shù)據(jù)格式不對，展示形式不對等等，第一反應被@的大都是前端。最常見的問題就是，接口返回的數(shù)據(jù)格式往往和產(chǎn)品要求的不符合，這時我們就要按照產(chǎn)品需求文檔和設計稿處理成他們需要的樣子。
1.JSON格式數(shù)據(jù)展示
在表單操作中，復雜的表單字段接口端會處理成JSON字符串格式。在表格展示中，為了能夠用戶直觀的查看JSON數(shù)據(jù)，我們要處理成格式化后的結(jié)構(gòu)。
例如：
數(shù)據(jù)返回格式如下
response = '{"title": "住址", "dataIndex": 'address',key: 'address'}'
但是當字段多的時候查看特別不方便，需要做如下處理
console.log(JSON.stringify(JSON.parse(reponse)) ; //先將接口相應數(shù)據(jù)轉(zhuǎn)為對象，再序列化。
// 打印結(jié)果如下
{
"title": "住址",
"dataIndex": "address",
"key": "address"
}
原理：JSON.stringify語法
JSON.stringify(value[, replacer[, space]]) space可選，表示文本添加縮進、空格和換行符，如果 space 是一個數(shù)字，則返回值文本在每個級別縮進指定數(shù)目的空格。 所以根據(jù)space不同，我們可以處理成各種各樣的展示形式。
console.log(JSON.stringify({"title": "住址",dataIndex: 'address',key: 'address'}, null, "---"))
{
---"title": "住址",
---"dataIndex": "address",
---"key": "address"
}
console.log(JSON.stringify({"title": "住址",dataIndex: 'address',key: 'address'}, null, "\t"))
{
"title": "住址",
"dataIndex": "address",
"key": "address"
}
console.log(JSON.stringify({"title": "住址",dataIndex: 'address',key: 'address'}, null, " "))
{
"title": "住址",
"dataIndex": "address",
"key": "address"
}
插一個題外話，同樣的項目如果不同后端開發(fā)可能對于同樣的數(shù)據(jù)結(jié)構(gòu)返回不同的數(shù)據(jù)格式，這個方法也能很好的處理 如：
//有些人按照習慣的方式將樹狀結(jié)構(gòu)的子結(jié)構(gòu)寫成children
{
a: 1,
children: [
{b: 1}
]
}
//但是有些人就隨心所欲慣了，非寫成childList
{
a: 1,
childList: [
{b: 1}
]
}
我們處理數(shù)據(jù)的時候得考慮將其處理成統(tǒng)一的格式
JSON.stringify({
a: 1,
childList: [
{b: 1}
]
}).replace("childList", "children")
2.使用<pre>標簽
開發(fā)中一般textarea類型的表單經(jīng)常返回如下格式數(shù)據(jù)
"此例演示如何使用 pre 標簽 \n對空行和 空格\n進行控制"
處理該類數(shù)據(jù)，直接在外層套一個pre標簽
var a = "此例演示如何使用 pre 標簽 \n對空行和 空格\n進行控制";
<pre>{a}</pre>
3. React中使用dangerouslySetInnerHTML
開發(fā)中不乏來自第三方編輯器的數(shù)據(jù)，格式如下：
<p>這是一段文本段落</p> <br/> <div>這是另一段</div>
處理該類數(shù)據(jù)，我們使用該屬性
var a = "<p>這是一段文本段落</p>
<br/>
<div>這是另一段</div>"
<div dangerouslySetInnerHTML={{__html: a}}></div>
到此這篇關(guān)于JavaScript中常見的數(shù)據(jù)格式化方式詳解的文章就介紹到這了,更多相關(guān)JavaScript數(shù)據(jù)格式化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家分享一篇移動web開發(fā)之touch事件實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
js中數(shù)組結(jié)合字符串實現(xiàn)查找(屏蔽廣告判斷url等)
這篇文章主要介紹了js中數(shù)組結(jié)合字符串實現(xiàn)查找(屏蔽廣告判斷url等),需要的朋友可以參考下2016-03-03
使用ionic在首頁新聞中應用到的跑馬燈效果的實現(xiàn)方法
在app中經(jīng)常會有滾動的跑馬燈效果的運用，接下來通過本文給大家介紹使用ionic在首頁新聞中應用到的跑馬燈效果的實現(xiàn)方法，需要的的朋友參考下2017-02-02
JS字符串累加Array不一定比字符串累加快(根據(jù)電腦配置)
言歸正傳：性能差異較大的機器運行結(jié)果會RT 出現(xiàn)大的差異,為了保險起見。還是推薦使用Array 來進行字符串拼接操作2012-05-05
項目中有個保存二維碼到相冊的功能，所以涉及到用戶是否授權(quán)相冊權(quán)限的問題。這篇文章主要介紹了微信小程序?qū)崿F(xiàn)保存圖片到相冊功能,需要的朋友可以參考下2018-11-11
JS中BroadcastChannel瀏覽器原生跨標簽頁通信
在現(xiàn)代Web應用開發(fā)中,跨標簽頁通信是一個常見需求,本文就來詳細的介紹一下JS中BroadcastChannel瀏覽器原生跨標簽頁通信,感興趣的可以了解一下2026-03-03
這篇文章主要介紹了js單線程的本質(zhì) Event Loop解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
JavaScript在控件上添加倒計時功能的實現(xiàn)代碼
JavaScript在控件上添加倒計時功能，主要原理是利用控件的setEnable(true)/setEnable(false)來進行設置控件的可用與不可用狀態(tài)，實現(xiàn)過程非常簡單，需要的的朋友參考下吧2017-07-07
這篇文章主要為大家詳細介紹了js+canvas代碼雨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
JavaScript創(chuàng)建對象方法實例小結(jié)
這篇文章主要介紹了JavaScript創(chuàng)建對象方法,結(jié)合實例形式總結(jié)了javascript創(chuàng)建對象的基本原理及使用工廠模式、構(gòu)造函數(shù)模式與原型模式創(chuàng)建對象的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-09-09