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>