极客笔记如何在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]]
}
在上述语法中，首先，我们对对象的所有键进行了排序，并使用排序后的键创建了另一个对象。
步骤
第一步 - 使用Object.keys()方法获取数组中对象的所有键。
第二步 - 使用sort()方法按默认的升序对所有键进行排序。
第三步 - 创建一个temp_obj对象，并将其初始化为空对象。
第四步 - 使用for循环遍历所有排序后的键，并在temp_obj对象中添加键值对。
第五步 - 一旦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()方法。
此外，我们还将排序后的对象存储在临时对象变量中。用户仍然可以在代码执行结束后删除临时对象，并重新初始化原始对象。