基于JavaScript實(shí)現(xiàn)Json數(shù)據(jù)根據(jù)某個(gè)字段進(jìn)行排序
一.首先給大家介紹js中內(nèi)置的 sort() 方法
此方法默認(rèn)是按字母順序?qū)?shù)組中的元素進(jìn)行排序的,說(shuō)得更精確點(diǎn),是按照字符編碼的順序進(jìn)行排序。
看如下例子:
當(dāng)數(shù)組中元素為 數(shù)字類(lèi)型 時(shí),排序結(jié)果與我們?cè)O(shè)想的完全不同,因?yàn)槟J(rèn)是按照字符編碼的順序進(jìn)行排序的。
解決方案:sort() 方法接收一個(gè)可選參數(shù)(此參數(shù)必須是函數(shù)),我們可以自己定義排序規(guī)則,如下圖
二. 對(duì) json 排序的具體實(shí)現(xiàn)
/* * @description 根據(jù)某個(gè)字段實(shí)現(xiàn)對(duì)json數(shù)組的排序 * @param array 要排序的json數(shù)組對(duì)象 * @param field 排序字段(此參數(shù)必須為字符串) * @param reverse 是否倒序(默認(rèn)為false) * @return array 返回排序后的json數(shù)組 */ function jsonSort(array, field, reverse) { //數(shù)組長(zhǎng)度小于2 或 沒(méi)有指定排序字段 或 不是json格式數(shù)據(jù) if(array.length < 2 || !field || typeof array[0] !== "object") return array; //數(shù)字類(lèi)型排序 if(typeof array[0][field] === "number") { array.sort(function(x, y) { return x[field] - y[field]}); } //字符串類(lèi)型排序 if(typeof array[0][field] === "string") { array.sort(function(x, y) { return x[field].localeCompare(y[field])}); } //倒序 if(reverse) { array.reverse(); } return array; }
PS:JS中:json對(duì)象數(shù)組按對(duì)象屬性排序
var array = [ {name: 'a', phone: 1}, {name: 'b', phone: 5}, {name: 'd', phone: 3}, {name: 'c', phone: 4} ] array.sort(getSortFun('desc', 'phone')); function getSortFun(order, sortBy) { var ordAlpah = (order == 'asc') ? '>' : '<'; var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1'); return sortFun; } alert(JSON.stringify(array));
數(shù)組本身有sort方法,可以指定排序函數(shù),因此可以動(dòng)態(tài)生成一個(gè)排序函數(shù)來(lái)完成對(duì)按指定對(duì)象屬性排序的需求;
注意:sort后原數(shù)組序列會(huì)發(fā)生變化!!
- JS根據(jù)json數(shù)組多個(gè)字段排序及json數(shù)組常用操作
- JavaScript對(duì)JSON數(shù)組簡(jiǎn)單排序操作示例
- JS實(shí)現(xiàn)json對(duì)象數(shù)組按對(duì)象屬性排序操作示例
- json格式數(shù)據(jù)的添加,刪除及排序方法
- json數(shù)據(jù)處理技巧(字段帶空格、增加字段、排序等等)
- JavaScript對(duì)JSON數(shù)據(jù)進(jìn)行排序和搜索
- Json按某個(gè)鍵的值進(jìn)行排序
- JSON 數(shù)字排序多字段排序介紹
- JS實(shí)現(xiàn)對(duì)json對(duì)象排序并刪除id相同項(xiàng)功能示例
- JS實(shí)現(xiàn)json數(shù)組排序操作實(shí)例分析
相關(guān)文章
ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)
這篇文章主要介紹了ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)的相關(guān)資料,需要的朋友可以參考下2015-06-06Ant Design Blazor 組件庫(kù)的路由復(fù)用多標(biāo)簽頁(yè)功能
在 Ant Design Blazor 組件庫(kù)中實(shí)現(xiàn)多標(biāo)簽頁(yè)組件的呼聲日益高漲。于是,我利用周末時(shí)間,結(jié)合 Blazor 內(nèi)置路由組件實(shí)現(xiàn)了基于 Tabs 組件的 ReuseTabs 組件,需要的朋友跟隨小編一起看看吧2021-07-07用javascript實(shí)現(xiàn)的激活輸入框后隱藏初始內(nèi)容
用javascript實(shí)現(xiàn)的激活輸入框后隱藏初始內(nèi)容...2007-06-06JS實(shí)現(xiàn)Enter鍵跳轉(zhuǎn)及控件獲得焦點(diǎn)
想讓Enter鍵跳轉(zhuǎn)的同時(shí)讓控件獲得焦點(diǎn),具體實(shí)現(xiàn)js代碼如下,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08Locate a File Using a File Open Dialog Box
Locate a File Using a File Open Dialog Box...2007-06-06layui數(shù)據(jù)表格重載實(shí)現(xiàn)往后臺(tái)傳參
今天小編就為大家分享一篇layui數(shù)據(jù)表格重載實(shí)現(xiàn)往后臺(tái)傳參,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11基于javascript滾動(dòng)圖片具體實(shí)現(xiàn)
這篇文章主要介紹了javascript滾動(dòng)圖片具體實(shí)現(xiàn),有需要的朋友可以參考一下2013-11-11