首頁 web前端 js教程 如何使用JS實作json物件陣列依物件屬性排序

如何使用JS實作json物件陣列依物件屬性排序

May 28, 2018 pm 03:33 PM
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中文網其它相關文章!

推薦閱讀:

vuex入門教學步奏詳解

#怎麼對vuex進階使用

使用vue-admin-template優化步驟詳解

#

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

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++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的效能最佳化方法包括:使用JSON擴充和json_encode()函數;新增JSON_UNESCAPED_UNICODE選項以避免字元轉義;使用緩衝區提高循環編碼效能;快取JSON編碼結果;考慮使用第三方JSON編碼庫。

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

Jackson庫中的註解可控制JSON序列化和反序列化:序列化:@JsonIgnore:忽略屬性@JsonProperty:指定名稱@JsonGetter:使用獲取方法@JsonSetter:使用設定方法反序列化:@JsonIgnoreProperties:忽略屬性@ JsonProperty:指定名稱@JsonCreator:使用建構子@JsonDeserialize:自訂邏輯

如何將 MySQL 查詢結果陣列轉換為物件? 如何將 MySQL 查詢結果陣列轉換為物件? Apr 29, 2024 pm 01:09 PM

將MySQL查詢結果陣列轉換為物件的方法如下:建立一個空物件陣列。循環結果數組並為每一行建立一個新的物件。使用foreach迴圈將每一行的鍵值對賦給新物件的對應屬性。將新物件加入到物件數組中。關閉資料庫連線。

深入了解PHP:JSON Unicode轉中文的實作方法 深入了解PHP:JSON Unicode轉中文的實作方法 Mar 05, 2024 pm 02:48 PM

深入了解PHP:JSONUnicode轉中文的實作方法在開發中,我們經常會遇到需要處理JSON資料的情況,而JSON中的Unicode編碼在一些場景下會為我們帶來一些問題,特別是當需要將Unicode編碼轉換為中文字元時。在PHP中,有一些方法可以幫助我們實現這個轉換過程,以下將介紹常用的方法,並提供具體的程式碼範例。首先,讓我們先來了解一下JSON中Un

PHP 函數如何傳回物件? PHP 函數如何傳回物件? Apr 10, 2024 pm 03:18 PM

PHP函數可以透過使用return語句後接物件實例來傳回對象,從而將資料封裝到自訂結構中。語法:functionget_object():object{}。這允許創建具有自訂屬性和方法的對象,並以對象的形式處理資料。

C++ 函式回傳物件時有什麼需要注意的? C++ 函式回傳物件時有什麼需要注意的? Apr 19, 2024 pm 12:15 PM

在C++中,函數傳回物件需要注意三點:物件的生命週期由呼叫者負責管理,以防止記憶體洩漏。避免懸垂指針,透過動態分配記憶體或返回物件本身來確保物件在函數返回後仍然有效。編譯器可能會最佳化傳回物件的副本生成,以提高效能,但如果物件是值語義傳遞的,則無需副本生成。

數組和物件在 PHP 中的差異是什麼? 數組和物件在 PHP 中的差異是什麼? Apr 29, 2024 pm 02:39 PM

PHP中,數組是有序序列,以索引存取元素;物件是具有屬性和方法的實體,透過new關鍵字建立。數組存取透過索引,物件存取通過屬性/方法。數組值傳遞,物件參考傳遞。

PHP 數組轉 JSON 的快捷技巧 PHP 數組轉 JSON 的快捷技巧 May 03, 2024 pm 06:33 PM

PHP陣列可透過json_encode()函數轉換為JSON字串(例如:$json=json_encode($array);),反之亦可用json_decode()函數從JSON轉換為陣列($array=json_decode($json);) 。其他技巧還包括:避免深度轉換、指定自訂選項以及使用第三方程式庫。

See all articles