JavaScript – 基於值排序鍵值對物件?


透過使用 JavaScript 的原生陣列方法和函式,我們可以輕鬆建立適用於任何型別物件的自定義排序演算法。在本文中,我們將討論如何使用這些技術來根據值對物件的鍵值對進行排序。

JavaScript 中的鍵值對,例如對映、字典,儲存一個與另一個值(“值”)關聯的值(“鍵”)。它可以用於快速儲存和訪問資料,因為每個元素都有其唯一的識別符號。

為了基於值對鍵值對物件進行排序,我們使用 JavaScript 中的`sort()`方法。

在 JavaScript 中使用 sort()

JavaScript 中的 `sort()` 方法用於就地對陣列的元素進行排序,並返回已排序的陣列。預設排序順序為升序。

語法

以下是 `sort()` 的語法

array.sort(compareFunction)

示例

在下面的示例中,我們首先將內容儲存為物件的陣列,然後執行常規的 `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` 的長度對該物件陣列進行排序。

<!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>

執行上述指令碼後,網頁瀏覽器將顯示根據長度按升序排序的網頁上的陣列,這是由執行時觸發的事件引起的。

示例

考慮以下示例,我們正在執行指令碼以根據值對鍵值對物件進行排序。

<!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>

執行上述指令碼後,事件被觸發,並在網頁上根據字母順序按升序對給定的陣列物件進行排序。

更新於:2023年1月18日

3K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告