javascript - 展平对象数组时遇到问题

Question

我试图通过将具有多个属性的内部对象转换为字符串来减少对象数组，然后通过使用 delete 删除属性来用该字符串替换对象的内容关键字，然后添加同名的字符串属性。由于某种原因，在我删除某些属性后，我的代码仍然在它上面运行，但现在它是一个字符串，而不是一个对象，并且代码崩溃了。例如下一个对象:

    var person={
                id:2, 
                userNames:[{name:"jack1", email:"jack1@ccc.com"}, 
                           {name:"superjack", email:"superjack@bbb.com"}],
                empryProp:"",
                empryArr:[],
                booleanProp:true
               }

最终目标是将这个对象展平为:

    var person={
                id:2, 
                userNames:"jack1 jack1@ccc.com; superjack superjack@bbb.com",
                empryProp:"",
                empryArr:[],
                booleanProp:true
               }

JS:

    function flattenArrOfObjects(arrayOfObj){

    let tmpVa = "";
    let tmpProp = "";

    arrayOfObj.forEach(avatarObj => {
        for(let avatarProp in avatarObj){
            if (avatarProp === "dateCreated" || avatarProp === "dateModified") {
                avatarObj[avatarProp] = new Date(avatarObj[avatarProp]).toLocaleDateString();
                continue;
              }

              if(avatarObj[avatarProp].length === 0 ||
                 avatarObj[avatarProp] === "" || 
                 avatarObj[avatarProp] === 0 || 
                 typeof(avatarObj[avatarProp])=== "boolean" ||
                 typeof avatarObj[avatarProp] === "number"){
                  continue;
              }else{
                //lets decide what avatarProp is. single string? array of strings? array of objects?
                if(Array.isArray(avatarObj[avatarProp])){
                    //its an array. strings or objects?
                    avatarObj[avatarProp].forEach(element => {
                        if(typeof(element) === "object"){
                            //its an array of objects
                            avatarObj[avatarProp].forEach(obj => {
                                tmpProp = avatarProp;
                                for(let avatarProp in obj){
                                    if(avatarProp === "dateCreated" || avatarProp === "dateModified" || avatarProp === "id"){
                                        continue;
                                    }else{
                                        tmpVa += avatarProp + " - " + obj[avatarProp]+"; ";
                                    }
                                }
                            });
                            delete avatarObj[tmpProp];
                            avatarObj[tmpProp] = tmpVa;
                            tmpProp = "";
                            tmpVa = "";
                        }else{
                            //array of strings
                            avatarObj[avatarProp] = avatarObj[avatarProp].join("; ");
                        }
                    });
                }
              }
        }
    });

    return arrayOfObj;
  }

$('button').on('click', function() {
  function flattenArrOfObjects(arrayOfObj) {

    let tmpVa = "";
    let tmpProp = "";

    arrayOfObj.forEach(avatarObj => {
      for (let avatarProp in avatarObj) {
        if (avatarProp === "dateCreated" || avatarProp === "dateModified") {
          avatarObj[avatarProp] = new Date(avatarObj[avatarProp]).toLocaleDateString();
          continue;
        }

        if (avatarObj[avatarProp].length === 0 ||
          avatarObj[avatarProp] === "" ||
          avatarObj[avatarProp] === 0 ||
          typeof(avatarObj[avatarProp]) === "boolean" ||
          typeof avatarObj[avatarProp] === "number") {
          continue;
        } else {
          //lets decide what avatarProp is. single string? array of strings? array of objects?
          if (Array.isArray(avatarObj[avatarProp])) {
            //its an array. strings or objects?
            avatarObj[avatarProp].forEach(element => {
              if (typeof(element) === "object") {
                //its an array of objects
                avatarObj[avatarProp].forEach(obj => {
                  tmpProp = avatarProp;
                  for (let avatarProp in obj) {
                    if (avatarProp === "dateCreated" || avatarProp === "dateModified" || avatarProp === "id") {
                      continue;
                    } else {
                      tmpVa += avatarProp + " - " + obj[avatarProp] + "; ";
                    }
                  }
                });
                delete avatarObj[tmpProp];
                avatarObj[tmpProp] = tmpVa;
                tmpProp = "";
                tmpVa = "";
              } else {
                //array of strings
                avatarObj[avatarProp] = avatarObj[avatarProp].join("; ");
              }
            });
          }
        }
      }
    });




    return arrayOfObj;
  }

  var personObj = [{
    accounts: [],
    addresses: [{
      country: "spain",
      city: "madrid",
      street: "someStreet",
      number: 44
    }],
    age: 44,
    country: "spain",
    dateCreated: "2019-06-19T16:09:24.73",
    dateModified: "2019-07-15T12:15:34.94",
    description: "some description",
    device: 0,
    education: [{
      school: "saint charles",
      degree: "master",
      id: 3,
      dateCreated: "2019-06-19T16:09:24.73"
    }, {
      school: "saint clair",
      degree: "not finished",
      id: 2,
      dateCreated: "2018-06-19T16:09:24.73"
    }],
    emails: [{
      dateCreated: "2019-06-19T16:09:24.73",
      mail: "mymail@kkk.com"
    }, {
      dateCreated: "2015-06-19T16:09:24.73",
      mail: "dddddd@kkk.com"
    }],
    favorites: [],
    gender: 2,
    id: 23,
    images: [],
    tab: false,
    interests: ["pet cats", "i love to throw eggplants"],
    isActive: true,
    languages: [{
      language: "english",
      isDefault: true
    }, {
      language: "spanish",
      isDefault: false
    }],
    reports: [],
    maritalStatus: 0,
    name: "Sienna",
    names: [{
      name: "Sienna",
      isDefault: true
    }, {
      language: "Marel",
      isDefault: false
    }],
    nicknames: [],
    phoneNumbers: [{
      language: "english",
      isDefault: true
    }, {
      language: "spanish",
      isDefault: false
    }],
    pictureUrl: "/clientapp/images/blanks/p_profile icon_large_dark.png",
    politicalOrientation: "",
    userAgent: "",
    workPlaces: [{
      company: "apple",
      job: "chairman"
    }, {
      company: "intel",
      job: "lab worker"
    }]
  }];
  console.log(flattenArrOfObjects(personObj));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>flat objects</button>

Answer 1

const person = {
    id: 2,
    userNames: [{ name: "jack1", email: "jack1@ccc.com" },
    { name: "superjack", email: "superjack@bbb.com" }],
    empryProp: "",
    empryArr: [],
    booleanProp: true
}

const flatPerson = person =>({
    ...person,
    userNames: person.userNames.map(user => `${user.name} ${user.email}`).join('; ')
})

console.log(flatPerson(person))

flatPerson 是一个函数，它接受一个 person 参数，然后返回一个对象，该对象是原始 person 对象 ...person 的扩展> 并覆盖 userNames 属性，将每个对象转换为字符串: userNames.map(user =>${user.name} ${user.email} ) 并将最终数组转换为字符串，传递分隔符为:;