JavaScript - 根据值对键值对对象进行排序?

javascriptweb developmentfront end technology

通过使用 JavaScript 的原生数组方法和函数，我们可以轻松创建适用于任何类型对象的自定义排序算法。在本文中，我们将讨论如何使用这些技术按值对对象的键值对进行排序。

JavaScript 中的键值对(如映射、字典)存储一个值("键")与另一个值("值")相关联。它可用于快速存储和访问数据，因为每个元素都有自己唯一的标识符。

对于基于值的键值对对象进行排序，我们在 JavaScript 中使用 sort() 方法。

在 JavaScript 中使用 sort()

JavaScript 中的 sort() 方法用于对数组的元素进行就地排序并返回排序后的数组。默认排序顺序为升序。

语法

以下是 sort() 的语法>

array.sort(compareFunction)

示例

在下面的示例中，我们首先将内容存储为对象 array，然后执行常规 sort() 方法，然后执行 sort() 方法。

<!DOCTYPE html>
<html>
<body>
   <script>
      var obj = {
         "1": "Apple",
         "2": "Yatch",
         "3": "Ducati",
         "4": "Benz",
      };
      var arr = [];
      for (var key in obj) {
         if (obj.hasOwnProperty(key)) {
            arr.push(obj[key]);
         }
      }
      document.write(arr.sort());
   </script>
</body>
</html>

脚本执行时，将生成一个输出，该输出由一个对象数组组成，这些对象根据执行脚本时触发的事件按升序打印。

示例

考虑到该示例，我们使用 Object.keys(obj) 访问数组中的对象键，然后根据其中存在的每个 item.value 的长度对该 array 对象进行排序。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      const obj = {
         "1": [11, 234, 343],
         "2": [3],
         "3": [123, 245],
         "4": [1111, 2222, 3333, 4444]
      };
      const array = Object.keys(obj).reduce((array, key) => {
         array.push({ key: key, value: obj[key] });
         return array;
      }, [])
      const sortedArray = array.sort((x, y) => x.value.length - y.value.length);
      document.getElementById("tutorial").innerHTML=JSON.stringify(sortedArray);
   </script>
</body>
</html>

运行上述脚本时，Web 浏览器会在网页上显示按长度升序排序的数组，这是由执行时触发的事件引起的。

示例

请考虑以下示例，我们正在执行脚本以根据值对键值对对象进行排序。

<!DOCTYPE html>
<html>
<body>
   <script>
      var myObj = {
         'U': 'avatar',
         'J': 'bheem',
         'M': 'tilak'
      },
      keys = [],
      k, i, len;
      for (k in myObj) {
         if (myObj.hasOwnProperty(k)) {
            keys.push(k);
         }
      }
      keys.sort();
      len = keys.length;
      for (i = 0; i < len; i++) {
         k = keys[i];
         document.write(k + ':' + myObj[k]+"<br>");
      }
   </script>
</body>
</html>

当脚本执行时，事件被触发，使得数组对象在网络浏览器上根据其键值对按升序排序。

示例

执行以下代码，根据键值对对象进行排序。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      var details = [
         { studentId: 100, name: "John" },
         { studentId: 110, name: "Adam" },
         { studentId: 120, name: "Carol" },
         { studentId: 130, name: "Bob" },
         { studentId: 140, name: "David" }
      ];
      details = details.sort(function (obj1, obj2) {
         return obj1.name.localeCompare(obj2.name);
      });
      document.getElementById("tutorial").innerHTML=JSON.stringify(details);
   </script>
</body>
</html>

运行上述脚本时，将触发事件，并根据网页上的字母顺序对给定的数组对象进行升序排序。