JavaScript – 基於值排序鍵值對物件?
透過使用 JavaScript 的原生陣列方法和函式,我們可以輕鬆建立適用於任何型別物件的自定義排序演算法。在本文中,我們將討論如何使用這些技術來根據值對物件的鍵值對進行排序。
JavaScript 中的鍵值對,例如對映、字典,儲存一個與另一個值(“值”)關聯的值(“鍵”)。它可以用於快速儲存和訪問資料,因為每個元素都有其唯一的識別符號。
為了基於值對鍵值對物件進行排序,我們使用 JavaScript 中的`sort()`方法。
在 JavaScript 中使用 sort()
JavaScript 中的 `sort()` 方法用於就地對陣列的元素進行排序,並返回已排序的陣列。預設排序順序為升序。
語法
以下是 `sort()` 的語法
array.sort(compareFunction)
示例
在下面的示例中,我們首先將內容儲存為物件的陣列,然後執行常規的 `sort()` 方法後執行 `sort()` 方法。
<!DOCTYPE html> <html> <body> <script> var obj = { "1": "Apple", "2": "Yatch", "3": "Ducati", "4": "Benz", }; var arr = []; for (var key in obj) { if (obj.hasOwnProperty(key)) { arr.push(obj[key]); } } document.write(arr.sort()); </script> </body> </html>
當指令碼執行時,它將生成一個輸出,其中包含根據執行指令碼時觸發的事件按升序列印的物件陣列。
示例
考慮到這個例子,我們使用 `Object.keys(obj)` 來訪問陣列中的物件鍵,然後根據其中每個 `item.value` 的長度對該物件陣列進行排序。
<!DOCTYPE html> <html> <body> <p id="tutorial"></p> <script> const obj = { "1": [11, 234, 343], "2": [3], "3": [123, 245], "4": [1111, 2222, 3333, 4444] }; const array = Object.keys(obj).reduce((array, key) => { array.push({ key: key, value: obj[key] }); return array; }, []) const sortedArray = array.sort((x, y) => x.value.length - y.value.length); document.getElementById("tutorial").innerHTML=JSON.stringify(sortedArray); </script> </body> </html>
執行上述指令碼後,網頁瀏覽器將顯示根據長度按升序排序的網頁上的陣列,這是由執行時觸發的事件引起的。
示例
考慮以下示例,我們正在執行指令碼以根據值對鍵值對物件進行排序。
<!DOCTYPE html> <html> <body> <script> var myObj = { 'U': 'avatar', 'J': 'bheem', 'M': 'tilak' }, keys = [], k, i, len; for (k in myObj) { if (myObj.hasOwnProperty(k)) { keys.push(k); } } keys.sort(); len = keys.length; for (i = 0; i < len; i++) { k = keys[i]; document.write(k + ':' + myObj[k]+"<br>"); } </script> </body> </html>
當指令碼執行時,事件被觸發,使陣列物件在網頁瀏覽器上根據其鍵值對按升序排序。
示例
執行以下程式碼以根據其值對鍵值對物件進行排序。
<!DOCTYPE html> <html> <body> <p id="tutorial"></p> <script> var details = [ { studentId: 100, name: "John" }, { studentId: 110, name: "Adam" }, { studentId: 120, name: "Carol" }, { studentId: 130, name: "Bob" }, { studentId: 140, name: "David" } ]; details = details.sort(function (obj1, obj2) { return obj1.name.localeCompare(obj2.name); }); document.getElementById("tutorial").innerHTML=JSON.stringify(details); </script> </body> </html>
執行上述指令碼後,事件被觸發,並在網頁上根據字母順序按升序對給定的陣列物件進行排序。
廣告