javascript修改对象的全部或部分属性名（es6）

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在日常写项目中，根据接口或者组件库传参要求，应该会遇到很多修改对象属性名的需求。在用ant design of vue组件库时遇到这样一个需求，使用select组件，这个组件需要的数据数组对象必须要包括key值和label值，就如下面：

dataList = [{key:'1',label:'中国'}]

但是我要显示的数据是接口返回的，并没有这两个属性名，所以就需要把对应的属性名更改为select组件支持的名称。

正好前些天学了es6对象新增的一些对象方法，然后就用在了这里，而且很好用。使用Object.entries（） 和Object.fromEntries（） 方法实现。 先来学一下Object.entries（） 和Object.fromEntries（） 的用法吧

Object.entries（）

Object.entries(obj) 返回一个存放可枚举属性的键值对数组。es8新增。

Object.fromEntries（）

将entries装换成一个对象,es10新增

const obj = {
   name:'wyy',
   age:22,
   say:function(){
       console.log(1111);
   }
}
const entries = Object.entries(obj)
console.log(entries);
console.log(Object.fromEntries(entries));

下面就用这两个方法对对象的属性名进行修改

const arr = [
  { id: 1, name: "wyy", age: 22, sex: "girl" },
  { id: 2, name: "lm", age: 12, sex: "boy" },
  { id: 3, name: "xh", age: 20, sex: "girl" },
];

function changeName(arr, names) {
  const newArr = [];
  arr.forEach((item) => {
    const objL = Object.entries(item);
    objL.forEach((ite, i) => {
      if (names[i] === undefined) return;
      ite[0] = names[i];
    });
    item = Object.fromEntries(objL);
    newArr.push(item);
  });
  return newArr;
}
console.log(changeName(arr, ["编号", "姓名", "年龄", "性别"]));

以上方法即可以修改对象中全部的属性名，也可以修改部分的属性名，不过names的名称顺序一定要和想要修改成的顺序相同。

写在最后：其实改变属性名，可以不用这么麻烦，我们直接添加一个属性就可以，为了只保留需要的信息，我们可以将不需要的属性在最后使用delete方法进行删除。不过delete方法在项目中不推荐使用的。