极客教程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.key()方法得到这些键。
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()方法。
另外，我们将排序后的对象存储在临时对象变量中。不过，用户仍然可以在代码执行结束时删除临时对象，并再次初始化原始对象。