使用ES6特性动态调整JavaScript对象属性名

在最近的一个项目中，我遇到了一个需求，需要使用Ant Design of Vue中的Select组件。该组件要求数据源数组中的每个对象必须包含'key'和'label'两个属性，例如：dataList = [{key:'1', label:'中国'}]。然而，实际从接口获取的数据并不总是以这种方式组织，这要求我们对数据进行预处理，以便符合组件的要求。

幸运的是，ES6引入了一些新的对象处理方法，这些方法使得改变对象属性名变得非常简单。下面是一个具体的例子，展示了如何使用Object.entries()和Object.fromEntries()方法来解决这个问题。

const users = [  { userId: 1, fullName: '王一鸣', userAge: 22, gender: 'female' },  { userId: 2, fullName: '李明', userAge: 12, gender: 'male' },  { userId: 3, fullName: '小华', userAge: 20, gender: 'female' }];

下面是实现属性名转换的函数：

function renameProperties(array, newNames) {  return array.map(item => {    const entries = Object.entries(item);    const updatedEntries = entries.map(([key, value], index) => {      return [newNames[index] || key, value];    });    return Object.fromEntries(updatedEntries);  });}

调用此函数并传入需要转换的数据和新的属性名列表：

console.log(renameProperties(users, ['编号', '姓名', '年龄', '性别']));

执行上述代码后，控制台将输出已更新属性名的对象数组。这种方法不仅能够一次性更改所有属性名，还能灵活地选择性更改某些属性名，只需确保newNames数组中的元素顺序与原对象中需要更改的属性顺序一致即可。

总结来说，通过结合使用Object.entries()和Object.fromEntries()，我们可以轻松地对Javascript对象的属性名进行动态调整，这对于前端开发中常见的数据格式化任务非常有用。