在地图功能中保持项目的顺序。Javascript

Question

我试图使用地图来改变一个字段名，但我看到项目的顺序被改变。

var arrOfObj = [
  {
    name: "test1",
    value: "value1"
  },
  {
    name: "test2",
    value: "value2"
  }
];

function changeKeyName(arr, oldValue, newVal) {
  return arr.map(item => {
    item[`${newVal}`] = item[`${oldValue}`];
    delete item[`${oldValue}`];
    return item;
  });
}

console.log(changeKeyName(arrOfObj, "name", "type"));

有什么办法可以让我在改变一个字段名的同时，还能保持字段的顺序。

OP.有什么办法可以在改变一个字段名的同时保持字段的顺序。

[{type:"test1",value: "value1"}, {type: "test2", value:"value2"}]

先谢谢你

Answer 1

您可以使用"... Object.entries 来获取一个条目数组，然后对它们进行映射，当找到新键时，用新键替换旧键。

var arrOfObj = [
  {
    name: "test1",
    value: "value1"
  },
  {
    name: "test2",
    value: "value2"
  }
];

const changeKeyName = (arr, oldKey, newKey) => arr.map(
  item => Object.fromEntries(
    Object.entries(item).map(
      ([key, val]) => [key === oldKey ? newKey : key, val]
    )
  )
);
console.log(changeKeyName(arrOfObj, "name", "type"));

(与一般人的想法相反，对象的属性顺序) 是 保证 按规格多年来，所有的环境中都在使用这种方法。但请记住，这只适用于以下键 不是 数组指标 - 数组指标如 0 1 2 不能相对于其他属性进行排序，它们总是按照升序数字顺序先被迭代)

如果你的代码依赖于属性的特定顺序，我建议重构代码，使属性顺序不重要。

Answer 2

map 这里使用的不正确，因为你应该总是从中返回一组新的结果。

你可以这样做，你可以根据需要改变顺序。

const arrOfObj = [
  {
    name: "test1",
    value: "value1"
  },
  {
    name: "test2",
    value: "value2"
  }
];

function changeKeyName(arr, oldValue, newVal) {
  return arr.map(({ [oldValue]: val, ...rest }) => {
    return {
      [newVal]: val,
      ...rest,
    };
  });
}

console.log(changeKeyName(arrOfObj, "name", "type"));