数据结构
网络
关系数据库管理系统 (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+ 次浏览
