JavaScript中常見的數(shù)據(jù)格式化方式詳解
前端一直被稱為項目開發(fā)的食物鏈底層，頁面出了問題，樣式不好看，數(shù)據(jù)格式不對，展示形式不對等等，第一反應(yīng)被@的大都是前端。最常見的問題就是，接口返回的數(shù)據(jù)格式往往和產(chǎn)品要求的不符合，這時我們就要按照產(chǎn)品需求文檔和設(shè)計稿處理成他們需要的樣子。
1.JSON格式數(shù)據(jù)展示
在表單操作中，復(fù)雜的表單字段接口端會處理成JSON字符串格式。在表格展示中，為了能夠用戶直觀的查看JSON數(shù)據(jù)，我們要處理成格式化后的結(jié)構(gòu)。
例如：
數(shù)據(jù)返回格式如下
response = '{"title": "住址", "dataIndex": 'address',key: 'address'}'
但是當(dāng)字段多的時候查看特別不方便，需要做如下處理
console.log(JSON.stringify(JSON.parse(reponse)) ; //先將接口相應(yīng)數(shù)據(jù)轉(zhuǎn)為對象，再序列化。
// 打印結(jié)果如下
{
"title": "住址",
"dataIndex": "address",
"key": "address"
}
原理：JSON.stringify語法
JSON.stringify(value[, replacer[, space]]) space可選，表示文本添加縮進(jìn)、空格和換行符，如果 space 是一個數(shù)字，則返回值文本在每個級別縮進(jìn)指定數(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ù)格式，這個方法也能很好的處理 如：
//有些人按照習(xí)慣的方式將樹狀結(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>標(biāo)簽
開發(fā)中一般textarea類型的表單經(jīng)常返回如下格式數(shù)據(jù)
"此例演示如何使用 pre 標(biāo)簽 \n對空行和 空格\n進(jìn)行控制"
處理該類數(shù)據(jù)，直接在外層套一個pre標(biāo)簽
var a = "此例演示如何使用 pre 標(biāo)簽 \n對空行和 空格\n進(jì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)文章
這篇文章主要給大家介紹了關(guān)于微信小程序請求前置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要針對微信jssdk用法進(jìn)行匯總，通過ready接口處理成功驗證、通過error接口處理失敗驗證等內(nèi)容介紹，感興趣的小伙伴們可以參考一下2016-07-07
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對 HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗證。接下來通過本文給大家介紹Javascript的表單驗證-初識正則表達(dá)式，對js表單驗證正則表達(dá)式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-03-03
這篇文章主要為大家詳細(xì)介紹了Cocos2d實現(xiàn)刮刮卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12![純JS實現(xiàn)出生日期[年月日]下拉菜單效果](http://img.jbzj.com/images/xgimg/bcimg4.png)
這篇文章主要介紹了基于純JS實現(xiàn)出生日期[年月日]下拉菜單效果，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-06-06
深入淺析ES6 Class 中的 super 關(guān)鍵字
本文給大家收藏整理了ES6 Class 中的 super 關(guān)鍵字，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-10-10
這篇文章主要介紹了JS實現(xiàn)的簡單拖拽購物車功能,涉及javascript事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,并附帶完整實例源碼供讀者下載參考,需要的朋友可以參考下2018-01-01
由于<input type="file">的value屬性石只讀的，所以要取消選擇只能通過其他途徑，此處有2種方法2013-03-03
Chrome插件(擴(kuò)展)開發(fā)全攻略(完整demo)
Chrome插件是一個用Web技術(shù)開發(fā)、用來增強(qiáng)瀏覽器功能的軟件，它其實就是一個由HTML、CSS、JS、圖片等資源組成的一個.crx后綴的壓縮包，本文給大家分享一個Chrome插件(擴(kuò)展)開發(fā)全攻略完整demo，感興趣的朋友跟隨小編一起學(xué)習(xí)下吧2021-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)之使用云函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05