首頁 web前端 js教程 JS實作json物件陣列依物件屬性排序步驟詳解

JS實作json物件陣列依物件屬性排序步驟詳解

May 23, 2018 am 10:06 AM
javascript json 陣列

這次帶給大家JS實作json物件陣列依物件屬性排序步驟詳解,JS實作json物件陣列依物件屬性排序的注意事項有哪些,下面就是實戰案例,一起來看一下。

在實際工作經常會出現這樣一個問題:後台回傳一個數組中有i個json數據,需要我們根據json中某一項進行數組的排序。

例如傳回的資料結構大概是這樣:

{
  result:[
   {id:1,name:'中国银行'},
   {id:3,name:'北京银行'},
   {id:2,name:'河北银行'},
   {id:10,name:'保定银行'},
   {id:7,name:'涞水银行'}
  ]
}
登入後複製

現在我們依照業務需要,要依照id的大小進行排序,依照id小的json到id大的json順序重新排列數組的順序

在js中加入排序的方法:

這裡使用JavaScript sort() 方法,先解釋下這個sort的方法

語法:arrayObject.sort(sortby)

#sortby:可選,規定排序順序。必須是函數。

如果呼叫該方法時沒有使用參數,將按字母順序對數組中的元素進行排序,說得更精確點,是按照字元編碼的順序進行排序。要實現這一點,首先應把數組的元素都轉換成字串(如有必要),以便進行比較。

如果想按照其他標準進行排序,就需要提供比較函數,該函數要比較兩個值,然後傳回一個用於說明這兩個值的相對順序的數字。比較函數應該有兩個參數 a 和 b,其傳回值如下:

若 a 小於 b,在排序後的陣列中 a 應該會出現在 b 之前,則傳回一個小於 0 的值。
若 a 等於 b,則回傳 0。
若 a 大於 b,則傳回大於 0 的值。

下面開始使用sort(sortby) 來進行這個排序,並列印到控制台:

function sortId(a,b){
  return a.id-b.id
}
result.sort(sortId);
console.log(result);
登入後複製

完整測試範例程式碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net json数组排序</title>
</head>
<body>
<script>
var result = [
   {id:1,name:'中国银行'},
   {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>
登入後複製

然後查看控制台,排序成功:

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

vue元件發佈到npm步驟分析

Vue多層元件provide/inject使用詳解

以上是JS實作json物件陣列依物件屬性排序步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

PHP 數組轉 JSON 的效能最佳化技巧 PHP 數組轉 JSON 的效能最佳化技巧 May 04, 2024 pm 06:15 PM

PHP 數組轉 JSON 的效能最佳化技巧

Jackson庫中註解如何控制JSON序列化和反序列化? Jackson庫中註解如何控制JSON序列化和反序列化? May 06, 2024 pm 10:09 PM

Jackson庫中註解如何控制JSON序列化和反序列化?

PHP 陣列鍵值翻轉:不同方法的效能比較分析 PHP 陣列鍵值翻轉:不同方法的效能比較分析 May 03, 2024 pm 09:03 PM

PHP 陣列鍵值翻轉:不同方法的效能比較分析

PHP數組深度複製的藝術:使用不同方法完美複製 PHP數組深度複製的藝術:使用不同方法完美複製 May 01, 2024 pm 12:30 PM

PHP數組深度複製的藝術:使用不同方法完美複製

PHP數組多維排序實戰:從簡單到複雜場景 PHP數組多維排序實戰:從簡單到複雜場景 Apr 29, 2024 pm 09:12 PM

PHP數組多維排序實戰:從簡單到複雜場景

PHP 數組分組函數在資料整理的應用 PHP 數組分組函數在資料整理的應用 May 04, 2024 pm 01:03 PM

PHP 數組分組函數在資料整理的應用

深度複製PHP數組的最佳實踐:探索高效的方法 深度複製PHP數組的最佳實踐:探索高效的方法 Apr 30, 2024 pm 03:42 PM

深度複製PHP數組的最佳實踐:探索高效的方法

PHP 陣列分組函數在尋找重複元素中的作用 PHP 陣列分組函數在尋找重複元素中的作用 May 05, 2024 am 09:21 AM

PHP 陣列分組函數在尋找重複元素中的作用

See all articles