資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 JavaScript 物件中排序/排列鍵？
在 JavaScript 中，物件包含鍵值對。有時，我們可能需要對物件鍵進行排序。我們不能像陣列一樣直接對物件使用 sort() 方法，因為我們需要對物件的鍵值對一起排序，而不僅僅是對鍵進行排序。
下面，我們將學習幾種方法來按升序和降序對物件鍵進行排序。
使用 sort() 方法對 JavaScript 物件中的鍵進行排序
我們可以使用 Object.keys() 方法獲取陣列中物件的全部鍵。之後，我們可以使用 array.sort() 方法對所有鍵進行排序，並可以根據排序後的鍵建立一個新物件。
語法
使用者可以按照以下語法使用 sort() 方法對 JavaScript 物件中的鍵進行排序。
allKeys.sort(); let temp_obj = {}; for (iterate through keys) { temp_obj[allKeys[i]] = test_obj[allKeys[i]] }
在上述語法中，我們首先對物件的全部鍵進行了排序，並使用排序後的鍵建立了另一個物件。
步驟
步驟 1 − 使用 Object.keys() 方法獲取陣列中物件的全部鍵。
步驟 2 − 使用 sort() 方法按預設升序對所有鍵進行排序。
步驟 3 − 建立一個 temp_obj 物件並將其初始化為空物件。
步驟 4 − 使用 for 迴圈迭代所有排序後的鍵，並在 temp_obj 物件中新增鍵值對。
步驟 5 – for 迴圈迭代完成後，temp_obj 物件包含原始物件中所有鍵值對，並按排序順序排列。
示例
在下面的示例中，當用戶按下按鈕時，它會呼叫 sort_obj_keys() 函式。之後，我們建立了 test_obj 物件，它包含按隨機順序排列的鍵值對。
在 sort_obj_key() 函式中，我們獲取陣列中的鍵，對陣列進行排序，將排序後的鍵值對新增到 temp_obj 物件中。在輸出中，使用者可以看到所有鍵值對都按升序排列。
<html>
<body>
<h2>Sorting the <i> keys of the object in ascending order </i> in JavaScript </h2>
<div id = "output"> </div>
<button id = "btn"> Sort object keys </button>
</body>
<script>
let output = document.getElementById('output');
let test_obj = {
prop1: "value1",
prop7: "Value7",
prop4: "Value4",
prop5: "Value5",
prop6: "Value6",
prop3: "Value3",
prop2: "Value2",
}
function sort_obj_keys() {
let allKeys = Object.keys(test_obj);
allKeys.sort();
let temp_obj = {};
for (let i = 0; i < allKeys.length; i++) {
temp_obj[allKeys[i]] = test_obj[allKeys[i]]
}
output.innerHTML += "The sorted object is <br>";
for (let key in temp_obj) {
output.innerHTML += "Key - " + key + " , value - " + temp_obj[key] + " <br> ";
}
}
let button = document.getElementById('btn');
button.addEventListener('click', () => { sort_obj_keys() })
</script>
</html>
示例
在下面的示例中，我們按相反的順序對所有物件的鍵值對進行了排序。我們首先使用 sort() 方法對物件的所有鍵進行了排序。之後，我們使用 reverse() 方法反轉陣列，並按降序對物件鍵進行排序。
在輸出中，使用者可以看到 test_obj 物件的所有鍵值對都按降序排列。
<html>
<body>
<h2>Sorting the <i>keys of the object in descending order</i> in JavaScript</h2>
<div id = "output"> </div>
<button id = "btn" onclick = "sort_obj_keys()"> Sort object keys </button>
<script>
let output = document.getElementById('output');
let test_obj = {
a: 10,
b: 30,
z: 50,
x: 40,
h: 21,
t: 20
}
function sort_obj_keys() {
let allKeys = Object.keys(test_obj);
// sort keys
allKeys.sort();
// reverse array to sort in descending order
allKeys.reverse();
let temp_obj = {};
for (let key of allKeys) {
temp_obj[key] = test_obj[key]
}
output.innerHTML += "The sorted object is <br>";
for (let key in temp_obj) {
output.innerHTML += "Key - " + key + " , value - " + temp_obj[key] + " <br> ";
}
}
</script>
</body>
</html>
使用 sort() 和 reduce() 方法對 JavaScript 物件中的鍵進行排序
正如我們在上面的示例中看到的，sort() 方法用於對所有物件鍵的陣列進行排序，我們可以使用 Object.keys() 方法獲取該陣列。
reduce() 方法將排序後的鍵陣列簡化為單個物件。
語法
使用者可以按照以下語法使用 sort() 和 reduce() 方法對物件鍵進行排序。
let sorted_obj = Object.keys(house_obj) .sort().reduce((temp_obj, key) => { temp_obj[key] = house_obj[key]; return temp_obj; }, {});
在上述語法中，Object.keys() 用於獲取鍵，sort() 用於對鍵陣列進行排序，reduce() 方法與排序後的陣列一起使用。reduce() 方法的回撥函式將當前鍵值對儲存在 temp_obj 物件中並返回該物件。
示例
在下面的示例中，我們建立了 house_obj 物件，其中包含房子的各種屬性。之後，我們使用 sort() 和 reduce() 方法對物件鍵進行排序。
reduce() 方法返回儲存在 sorted_obj 變數中的最終排序物件。
<html>
<body>
<h2>Sorting the <i>keys of an object using sort() and reduce() methods</i> in JavaScript</h2>
<div id = "output"> </div>
<button id = "btn" onclick = "sort_obj_keys()"> Sort object keys </button>
</body>
<script>
let output = document.getElementById('output');
let house_obj = {
rooms: 4,
color: "aqua",
solar: true,
window: 6,
kitchen: true,
bedRooms: 2,
storeRoom: 1,
}
function sort_obj_keys() {
let sorted_obj = Object.keys(house_obj)
.sort().reduce((temp_obj, key) => {
temp_obj[key] = house_obj[key];
return temp_obj;
}, {});
output.innerHTML += "The sorted object is <br>";
for (let key in sorted_obj) {
output.innerHTML += "Key - " + key + " , value - " + sorted_obj[key] + " <br> ";
}
}
</script>
</html>
在本教程中，使用者學習瞭如何按升序和降序對物件鍵進行排序。在第一種方法中，我們使用了 sort() 方法和 for 迴圈，在第二種方法中，我們使用了 sort() 和 reduce() 方法。
此外，我們將排序後的物件儲存在臨時物件變數中。但是，使用者仍然可以在程式碼執行結束時刪除臨時物件並再次初始化原始物件。
15K+ 次瀏覽
