前言:

有时候返回的数据对象不符合自己所需,想要修改属性名为自己所需的名字

知识点应用:

Object.keys()的详解和用法

在实际开发中,我们有时需要知道对象的所有属性;
ES5 引入了Object.keys方法,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键名。

传入对象,返回属性名

var data={a:1,b:2,c:9,d:4,e:5};
    console.log(Object.keys(data));//["a", "b", "c", "d", "e"]
    Object.keys(data).map((key,item)=>{
        console.log(key,data[key]);//key=>属性名    data[key]=>属性值
});

传入字符串,返回索引 

var str = 'ab1234';
console.log(Object.keys(obj));  //[0,1,2,3,4,5]

传入数组 返回索引

var arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // console: ["0", "1", "2"]

构造函数 返回空数组或者属性名 

function Pasta(name, age, gender) {
      this.name = name;
      this.age = age;
      this.gender = gender;
      this.toString = function () {
            return (this.name + ", " + this.age + ", " + this.gender);
    }
}

console.log(Object.keys(Pasta)); //console: []

var spaghetti = new Pasta("Tom", 20, "male");
console.log(Object.keys(spaghetti)); //console: ["name", "age", "gender", "toString"]

 Object.entries()的详解和用法

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组

其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)。

 参数为对象

const obj = { name: 'xiaoming', age: 'seven',sex: 'man', grade: 'four' }; 
const res = Object.entries(obj) 
console.log(res); 

在这里插入图片描述

参数为数组 

const obj = [1,2,3,4,5,6]
const res = Object.entries(obj) 
console.log(res); 

 在这里插入图片描述

参数为数组(数组中包含对象 ) 

const obj = [1,2,3,4,5,6,{a:'a'},{b:'b'},{c:'c'}]
const res = Object.entries(obj) 
console.log(res); 

 在这里插入图片描述

参数为数组(数组中元素为对象) 

const obj = [{a:'a'},{b:'b'},{c:'c'}]
const res = Object.entries(obj) 
console.log(res); 

在这里插入图片描述

代码实现 

// 处理数组数据方法(修改属性名)
changeNameKey(obj, keymapping){
   let oldKeysArr = Object.keys(obj)
   let arr = Object.entries(obj)
   let changedKeyIndex = []
   keymapping.forEach(item=>{
      if(oldKeysArr.indexOf(item.key) !== -1){
         arr[oldKeysArr.indexOf(item.key)][0] = item.newKey
      }
   })
   return Object.fromEntries(arr)
}

//注意函数只是返回修改后的对象,如果要覆盖原本对象数组里的对象,要进行替换操作
this.objectArray.forEach((item, index) => {
    // 要修改的旧属性名以及新的属性名
    const keymapping = [
       {key:'oldKey1',newKey:'newKey1'},
       {key:'oldKey2',newKey:'newKey2'},
    ],
    const newObject = this.changeNameKey(item, this.keymapping)
    this.objectArray.splice(index, 1, newObject)
})

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐