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>
執行上述指令碼後,事件被觸發,並在網頁上根據字母順序按升序對給定的陣列物件進行排序。
廣告
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP