如何確保Typescript對象中的某個鍵值對保持在最后位置

Question

我需要創建一個 Typescript 對象，其中最后始終保留帶有鍵“NONE”的某個元素。 我需要這個來確保在我的 HTML 頁面中呈現這個對象時，它的值出現在底部。 所以基本上我需要實現 myObject.shiftKeyToLastPosition(keyname);

我試過刪除並重新附加和減少方法。 那沒有幫助。

Answer 1

正如proxima-b所指出的那樣，無法確定性地對對象進行排序。

不過，您可以做的是創建一個輔助函數，讓您定義要顯示鍵/值的順序。 Typescript 很酷的一點是，你可以以一種類型安全的方式做到這一點！

const myObject = {
  'hello3': 'Value 3',
  'hello1': 'Value 1',
  'hello2': 'Value 2',
  'hello4': 'Value 4',
} as const;

function orderObjectToArrayKeyValue<Obj>(obj: Obj, orderKeys: { [key in keyof Obj]: number }): { key: keyof Obj, value: Obj[keyof Obj] }[] {
  return Object
    .entries<number>(orderKeys)
    .sort(([, order1], [, order2]) => order1 < order2 ? -1 : 1)
    .map(([key]) => ({ key, value: obj[key as keyof Obj] }) as { key: keyof Obj, value: Obj[keyof Obj] });
}

在上面的例子中，如果你調用：

console.log(orderObjectToArrayKeyValue(myObject, {
  hello1: 1,
  hello2: 2,
  hello3: 3,
  hello4: 4,
}));

你會得到

[
  {
    "key": "hello1",
    "value": "Value 1"
  },
  {
    "key": "hello2",
    "value": "Value 2"
  },
  {
    "key": "hello3",
    "value": "Value 3"
  },
  {
    "key": "hello4",
    "value": "Value 4"
  }
]

然后使用您選擇的框架，循環遍歷該數組並顯示值將非常容易（如果需要，+ 使用鍵）。

這是一個實時示例（在聚焦左側的同時按 Enter 鍵，它將運行代碼，輸出將顯示在您的控制台中）。

Answer 2

如果你所有的屬性都是字符串，你可以試試這個

 const source = { 'Domestic': '1', 'NONE': '0', 'Wild': '2', }; const { NONE, ...dest } = source; dest.NONE = source.NONE; console.log(dest);

這里我們創建一個沒有NONE鍵的新對象，然后在最后添加NONE鍵。

根據 ECMAScript 2015 規范，使用字符串鍵遍歷對象將按插入順序生成鍵。

PS：假設你只有整數和字符串鍵，沒有符號鍵。