如何保证Typescript对象中的某个键值对保留在最后的位置

Question

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

的实现

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

Answer 1

正如所指出的，无法确定地对对象进行排序。

您可以做的是创建一个辅助函数，让您可以定义要显示 key/values 的顺序。 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 （按下回车键同时聚焦左侧，它将运行代码，输出将显示在您的控制台中）。

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 规范，遍历具有字符串键的对象将按插入顺序生成键。

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

如何保证Typescript对象中的某个键值对保留在最后的位置

How to ensure a certain key value pair in Typescript Object remains at the last position

javascript

object

key-value

typescript

angular