如何确保Typescript Object中的某个键值对保持在最后一个位置答案

【问题标题】：How to ensure a certain key value pair in Typescript Object remains at the last position如何确保Typescript Object中的某个键值对保持在最后一个位置
【发布时间】：2020-10-05 08:29:00
【问题描述】：

我需要创建一个 Typescript 对象，其中最后始终保留带有键“NONE”的某个元素。我需要这个来确保在我的 HTML 页面中呈现这个对象时，它的值出现在底部。所以基本上我需要一个 myObject.shiftKeyToLastPosition(keyname);

的实现

我尝试过删除并重新附加和减少方法。这没有帮助。

【问题讨论】：

没有办法做到这一点。在 Javascript 中，对象是无序列表。要按特定顺序排列项目，您必须使用数组

标签： javascript angular typescript object key-value

【解决方案1】：

如果你所有的属性都是字符串，你可以试试这个

const source = {
  'Domestic': '1',
  'NONE': '0',
  'Wild': '2',
};

const { NONE, ...dest } = source;
dest.NONE = source.NONE;

console.log(dest);

这里我们创建一个没有NONE 键的新对象，然后在最后添加NONE 键。

根据 ECMAScript 2015 规范，使用字符串键遍历对象将按插入顺序生成键。

P.S：假设你只有整数和字符串键，没有符号键。

【讨论】：

【解决方案2】：

正如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"
  }
]

然后使用您选择的框架，遍历该数组并显示值将非常容易（+ 如果需要，请使用键）。

这是live example（在关注左侧的同时按下回车键，它将运行代码，输出将显示在您的控制台中）。

【讨论】：