JS實(shí)現(xiàn)json對(duì)象數(shù)組按對(duì)象屬性排序操作示例
本文實(shí)例講述了JS實(shí)現(xiàn)json對(duì)象數(shù)組按對(duì)象屬性排序操作。分享給大家供大家參考,具體如下:
在實(shí)際工作經(jīng)常會(huì)出現(xiàn)這樣一個(gè)問題:后臺(tái)返回一個(gè)數(shù)組中有i個(gè)json數(shù)據(jù),需要我們根據(jù)json中某一項(xiàng)進(jìn)行數(shù)組的排序。
例如返回的數(shù)據(jù)結(jié)構(gòu)大概是這樣:
{ result:[ {id:1,name:'中國(guó)銀行'}, {id:3,name:'北京銀行'}, {id:2,name:'河北銀行'}, {id:10,name:'保定銀行'}, {id:7,name:'淶水銀行'} ] }
現(xiàn)在我們根據(jù)業(yè)務(wù)需要,要根據(jù)id的大小進(jìn)行排序,按照id小的json到id大的json順序重新排列數(shù)組的順序
在js中添加排序的方法:
這里使用JavaScript sort()
方法,首先解釋下這個(gè)sort的方法
語(yǔ)法:arrayObject.sort(sortby)
sortby:可選,規(guī)定排序順序。必須是函數(shù)。
如果調(diào)用該方法時(shí)沒有使用參數(shù),將按字母順序?qū)?shù)組中的元素進(jìn)行排序,說得更精確點(diǎn),是按照字符編碼的順序進(jìn)行排序。要實(shí)現(xiàn)這一點(diǎn),首先應(yīng)把數(shù)組的元素都轉(zhuǎn)換成字符串(如有必要),以便進(jìn)行比較。
如果想按照其他標(biāo)準(zhǔn)進(jìn)行排序,就需要提供比較函數(shù),該函數(shù)要比較兩個(gè)值,然后返回一個(gè)用于說明這兩個(gè)值的相對(duì)順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個(gè)參數(shù) a 和 b,其返回值如下:
若 a 小于 b,在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前,則返回一個(gè)小于 0 的值。
若 a 等于 b,則返回 0。
若 a 大于 b,則返回一個(gè)大于 0 的值。
下面開始使用sort(sortby)
來進(jìn)行這個(gè)排序,并打印到控制臺(tái):
function sortId(a,b){ return a.id-b.id } result.sort(sortId); console.log(result);
完整測(cè)試示例代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.dbjr.com.cn json數(shù)組排序</title> </head> <body> <script> var result = [ {id:1,name:'中國(guó)銀行'}, {id:3,name:'北京銀行'}, {id:2,name:'河北銀行'}, {id:10,name:'保定銀行'}, {id:7,name:'淶水銀行'} ] function sortId(a,b){ return a.id-b.id } result.sort(sortId); console.log(result); </script> </body> </html>
然后查看控制臺(tái),排序成功:
PS:關(guān)于json操作,這里再為大家推薦幾款比較實(shí)用的json在線工具供大家參考使用:
在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具:
http://tools.jb51.net/code/json
JSON在線格式化工具:
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.jb51.net/code/jsoncodeformat
在線json壓縮/轉(zhuǎn)義工具:
http://tools.jb51.net/code/json_yasuo_trans
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JS對(duì)象數(shù)組排序方法測(cè)試代碼示例
- JavaScript將對(duì)象數(shù)組按字母順序排序的方法詳解
- JavaScript中好用的數(shù)組對(duì)象排序方法分享
- javascript中的Array對(duì)象(數(shù)組的合并、轉(zhuǎn)換、迭代、排序、堆棧)
- JS sort方法基于數(shù)組對(duì)象屬性值排序
- JS深入學(xué)習(xí)之?dāng)?shù)組對(duì)象排序操作示例
- js 根據(jù)對(duì)象數(shù)組中的屬性進(jìn)行排序?qū)崿F(xiàn)代碼
- JS實(shí)現(xiàn)給數(shù)組對(duì)象排序的方法分析
- JS實(shí)現(xiàn)根據(jù)數(shù)組對(duì)象的某一屬性排序操作示例
- js中的數(shù)組對(duì)象排序分析
- JavaScripts數(shù)組里的對(duì)象排序的24個(gè)方法(最新整理收藏)
相關(guān)文章
JavaScript數(shù)據(jù)類型檢測(cè)實(shí)現(xiàn)方法詳解
Javascript中檢查數(shù)據(jù)類型一直是老生常談的問題,類型判斷在web開發(fā)中也有著非常廣泛的應(yīng)用,所以下面這篇文章主要給大家介紹了關(guān)于JS數(shù)據(jù)類型檢測(cè)的那些事,需要的朋友可以參考下2022-11-11詳解JavaScript中的Unescape()和String() 函數(shù)
這篇文章主要介紹了詳解JavaScript中的unescape()和String() 函數(shù),JavaScript unescape() 函數(shù)可對(duì)通過 escape() 編碼的字符串進(jìn)行解碼,String() 函數(shù)把對(duì)象的值轉(zhuǎn)換為字符串,對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-11-11基于JavaScript實(shí)現(xiàn)在新的tab頁(yè)打開url
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)在新的tab頁(yè)打開url 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能
這篇文章主要為大家詳細(xì)介紹了AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-04-04javascript實(shí)現(xiàn)仿銀行密碼輸入框效果的代碼
這篇文章通過實(shí)例代碼給大家介紹了javascript實(shí)現(xiàn)仿銀行密碼輸入框效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2007-12-12JavaScript暫時(shí)性死區(qū)以及函數(shù)作用域
這篇文章主要為大家介紹了JavaScript暫時(shí)性死區(qū)以及函數(shù)作用域示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07Bootstrap教程JS插件滾動(dòng)監(jiān)聽學(xué)習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap教程JS插件滾動(dòng)監(jiān)聽學(xué)習(xí)筆記,內(nèi)容很詳細(xì),感興趣的小伙伴們可以參考一下2016-05-05