使用不同的名称重构对象 [对象操作]答案

【问题标题】：Restructuring the object using different name [Object manipulation]使用不同的名称重构对象 [对象操作]
【发布时间】：2021-09-16 00:28:52
【问题描述】：

我有一个用例，我必须重组对象。最初我有这个对象

{ 
    name: 'Tommy Kerar',
    mandatoryRequirements : [{
          name: "dummy.pdf",
          relativeUrl: "b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=jefI4SMA0LlVutoBDkVZdDchSSY%3D",
        },
        {
          name: "Sell the Solution, Not the Product.png",
          relativeUrl:
            "6397c507-0d05-4cd7-8e4b-371249f72dbeSell the Solution, Not the Product..png",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/6397c507-0d05-4cd7-8e4b-371249f72dbeSell%20the%20Solution%2C%20Not%20the%20Product..png?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=96fCwM%2FOz%2F60nt%2FCdhkdbM%2B04oo%3D",
        },
        {
          name: "ales-nesetril-Im7lZjxeLhg-unsplash.jpg",
          relativeUrl:
            "2e07b606-d1a0-4587-b8bb-c8f4b3927483ales-nesetril-Im7lZjxeLhg-unsplash.jpg",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/2e07b606-d1a0-4587-b8bb-c8f4b3927483ales-nesetril-Im7lZjxeLhg-unsplash.jpg?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=HjMt%2Fpo1xc%2Bzt%2BeWaN%2FpU3vpY4A%3D",
        }],
    postGrad: [
        {
          name: "dummy.pdf",
          relativeUrl: "b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=jefI4SMA0LlVutoBDkVZdDchSSY%3D",
        },
        {
          name: "Sell the Solution, Not the Product.png",
          relativeUrl:
            "6397c507-0d05-4cd7-8e4b-371249f72dbeSell the Solution, Not the Product..png",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/6397c507-0d05-4cd7-8e4b-371249f72dbeSell%20the%20Solution%2C%20Not%20the%20Product..png?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=96fCwM%2FOz%2F60nt%2FCdhkdbM%2B04oo%3D",
        }
    ],
    yourDocuments: [
         {
          name: "dummy.pdf",
          relativeUrl: "b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=jefI4SMA0LlVutoBDkVZdDchSSY%3D",
        },
        {
          name: "Sell the Solution, Not the Product.png",
          relativeUrl:
            "6397c507-0d05-4cd7-8e4b-371249f72dbeSell the Solution, Not the Product..png",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/6397c507-0d05-4cd7-8e4b-371249f72dbeSell%20the%20Solution%2C%20Not%20the%20Product..png?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=96fCwM%2FOz%2F60nt%2FCdhkdbM%2B04oo%3D",
        }
    ]
}

结果输出我想要这样的东西主要变化是我想在对象上方创建一个数组，名称为用户名，文件夹名称根据上述对象键，名称在下面的预期输出中。

PS：我是 JS 世界的新手。以前使用 Python。

  const dd = { 
    name: 'Tommy Kerar',
    mandatoryRequirements : [{
          name: "dummy.pdf",
          relativeUrl: "b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=jefI4SMA0LlVutoBDkVZdDchSSY%3D",
        },
        {
          name: "Sell the Solution, Not the Product.png",
          relativeUrl:
            "6397c507-0d05-4cd7-8e4b-371249f72dbeSell the Solution, Not the Product..png",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/6397c507-0d05-4cd7-8e4b-371249f72dbeSell%20the%20Solution%2C%20Not%20the%20Product..png?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=96fCwM%2FOz%2F60nt%2FCdhkdbM%2B04oo%3D",
        },
        {
          name: "ales-nesetril-Im7lZjxeLhg-unsplash.jpg",
          relativeUrl:
            "2e07b606-d1a0-4587-b8bb-c8f4b3927483ales-nesetril-Im7lZjxeLhg-unsplash.jpg",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/2e07b606-d1a0-4587-b8bb-c8f4b3927483ales-nesetril-Im7lZjxeLhg-unsplash.jpg?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=HjMt%2Fpo1xc%2Bzt%2BeWaN%2FpU3vpY4A%3D",
        }],
    postGrad: [
        {
          name: "dummy.pdf",
          relativeUrl: "b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=jefI4SMA0LlVutoBDkVZdDchSSY%3D",
        },
        {
          name: "Sell the Solution, Not the Product.png",
          relativeUrl:
            "6397c507-0d05-4cd7-8e4b-371249f72dbeSell the Solution, Not the Product..png",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/6397c507-0d05-4cd7-8e4b-371249f72dbeSell%20the%20Solution%2C%20Not%20the%20Product..png?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=96fCwM%2FOz%2F60nt%2FCdhkdbM%2B04oo%3D",
        }
    ],
    yourDocuments: [
         {
          name: "dummy.pdf",
          relativeUrl: "b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=jefI4SMA0LlVutoBDkVZdDchSSY%3D",
        },
        {
          name: "Sell the Solution, Not the Product.png",
          relativeUrl:
            "6397c507-0d05-4cd7-8e4b-371249f72dbeSell the Solution, Not the Product..png",
          url:
            "https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/6397c507-0d05-4cd7-8e4b-371249f72dbeSell%20the%20Solution%2C%20Not%20the%20Product..png?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=96fCwM%2FOz%2F60nt%2FCdhkdbM%2B04oo%3D",
        }
    ]
}

这是我尝试过的，但坚持将username 和folder 添加到数组列表中。

let newA = [];

newA = dd.postGrad
newA = dd.yourDocuments
newA = dd.mandatoryRequirements


console.log(newA)

【问题讨论】：

欢迎来到 SO。当涉及到asking a good question 和这个question checklist 时，您可能会发现阅读网站help section 很有用。您为解决问题而编写的代码应包含minimal reproducible example。
你可以使用Array.reduce()，或者循环对象并构造你的新对象
@boxdox 我尝试过，但无法按照我需要的方式操作它。 :(
请分享 @Andy 提到的 MRP (stackoverflow.com/help/minimal-reproducible-example)
您应该将您尝试过的代码添加到您的问题中。这可能是一个我们可以帮助解决的简单问题，但我们一般不会为他们编写其他人的代码。

标签： javascript arrays json reactjs ecmascript-6

【解决方案1】：

你可以使用 Object.entries、Array.isArray、flat & map..

我在这里用 cmets 为每个部分做了一个示例。

例如。

var data={name:"Tommy Kerar",mandatoryRequirements:[{name:"dummy.pdf",relativeUrl:"b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=jefI4SMA0LlVutoBDkVZdDchSSY%3D"},{name:"Sell the Solution, Not the Product.png",relativeUrl:"6397c507-0d05-4cd7-8e4b-371249f72dbeSell the Solution, Not the Product..png",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/6397c507-0d05-4cd7-8e4b-371249f72dbeSell%20the%20Solution%2C%20Not%20the%20Product..png?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=96fCwM%2FOz%2F60nt%2FCdhkdbM%2B04oo%3D"},{name:"ales-nesetril-Im7lZjxeLhg-unsplash.jpg",relativeUrl:"2e07b606-d1a0-4587-b8bb-c8f4b3927483ales-nesetril-Im7lZjxeLhg-unsplash.jpg",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/2e07b606-d1a0-4587-b8bb-c8f4b3927483ales-nesetril-Im7lZjxeLhg-unsplash.jpg?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=HjMt%2Fpo1xc%2Bzt%2BeWaN%2FpU3vpY4A%3D"}],postGrad:[{name:"dummy.pdf",relativeUrl:"b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=jefI4SMA0LlVutoBDkVZdDchSSY%3D"},{name:"Sell the Solution, Not the Product.png",relativeUrl:"6397c507-0d05-4cd7-8e4b-371249f72dbeSell the Solution, Not the Product..png",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/6397c507-0d05-4cd7-8e4b-371249f72dbeSell%20the%20Solution%2C%20Not%20the%20Product..png?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=96fCwM%2FOz%2F60nt%2FCdhkdbM%2B04oo%3D"}],yourDocuments:[{name:"dummy.pdf",relativeUrl:"b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=jefI4SMA0LlVutoBDkVZdDchSSY%3D"},{name:"Sell the Solution, Not the Product.png",relativeUrl:"6397c507-0d05-4cd7-8e4b-371249f72dbeSell the Solution, Not the Product..png",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/6397c507-0d05-4cd7-8e4b-371249f72dbeSell%20the%20Solution%2C%20Not%20the%20Product..png?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=96fCwM%2FOz%2F60nt%2FCdhkdbM%2B04oo%3D"}]};

console.log(
  Object.entries(data)  //get entries  key,value
    .filter(([_,v]) => Array.isArray(v))  //filter out values that are not arrays
    .map(([k,v]) =>   //use this map to do outer loop
      v.map(v2 => ({username: data.name, 
        foldername: 
          k.replace(/([a-z])([A-Z])/g, '$1 $2') //ex. split postGrad to `post Grad`
          .replace(/^./, v => v.toUpperCase()),  //now uppercase that first letter `Post Grad`
        ...v2}))) //map our sub arrays
    .flat()  //finally flattern
);

对于 Javascript 的新用户来说，上面的代码可能会让人望而生畏。但它并没有看起来那么糟糕，特别是如果我们把它分解的话。所以下面我也在做另一个版本，它更长，但对于 JS 新手来说应该更容易理解。

我已经注释掉了一些console.log，你可以取消注释来查看每个阶段。但基本上代码和第一个sn-p完全一样。

var data={name:"Tommy Kerar",mandatoryRequirements:[{name:"dummy.pdf",relativeUrl:"b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=jefI4SMA0LlVutoBDkVZdDchSSY%3D"},{name:"Sell the Solution, Not the Product.png",relativeUrl:"6397c507-0d05-4cd7-8e4b-371249f72dbeSell the Solution, Not the Product..png",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/6397c507-0d05-4cd7-8e4b-371249f72dbeSell%20the%20Solution%2C%20Not%20the%20Product..png?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=96fCwM%2FOz%2F60nt%2FCdhkdbM%2B04oo%3D"},{name:"ales-nesetril-Im7lZjxeLhg-unsplash.jpg",relativeUrl:"2e07b606-d1a0-4587-b8bb-c8f4b3927483ales-nesetril-Im7lZjxeLhg-unsplash.jpg",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/2e07b606-d1a0-4587-b8bb-c8f4b3927483ales-nesetril-Im7lZjxeLhg-unsplash.jpg?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=HjMt%2Fpo1xc%2Bzt%2BeWaN%2FpU3vpY4A%3D"}],postGrad:[{name:"dummy.pdf",relativeUrl:"b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=jefI4SMA0LlVutoBDkVZdDchSSY%3D"},{name:"Sell the Solution, Not the Product.png",relativeUrl:"6397c507-0d05-4cd7-8e4b-371249f72dbeSell the Solution, Not the Product..png",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/6397c507-0d05-4cd7-8e4b-371249f72dbeSell%20the%20Solution%2C%20Not%20the%20Product..png?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=96fCwM%2FOz%2F60nt%2FCdhkdbM%2B04oo%3D"}],yourDocuments:[{name:"dummy.pdf",relativeUrl:"b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/b9dde810-4935-4471-a22d-bdaf61e8bd62dummy.pdf?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=jefI4SMA0LlVutoBDkVZdDchSSY%3D"},{name:"Sell the Solution, Not the Product.png",relativeUrl:"6397c507-0d05-4cd7-8e4b-371249f72dbeSell the Solution, Not the Product..png",url:"https://upaged-file-store-prod.s3.ap-southeast-2.amazonaws.com/6397c507-0d05-4cd7-8e4b-371249f72dbeSell%20the%20Solution%2C%20Not%20the%20Product..png?AWSAccessKeyId=AKIAVRO4YTL2YDUPVPPW&Expires=1625593013&Signature=96fCwM%2FOz%2F60nt%2FCdhkdbM%2B04oo%3D"}]};


//lets get our data into the form of key value pairs.
//eg.  [
//  ["name", "Tommoy Kerar"],
//  ["mandatoryRequirements", [........]
//]
const keyValues = Object.entries(data);
//console.log(keyValues);

//next lets filter out array items who's value is not an array
//ps.  second array element [1] of each keyvalue is the value
const keyValuesArrayOnly = keyValues.filter(a => Array.isArray(a[1]));
//console.log(keyValuesArrayOnly);

//a simple function to convert camel case to a kind of Title
function camelCaseToTitle(txt) {
  return txt.replace(/([a-z])([A-Z])/g, '$1 $2') //ex. split postGrad to `post Grad`
    .replace(/^./, v => v.toUpperCase()); //uppercase first letter  `Post Grad`
}
//console.log(camelCaseToTitle('postGrad'));

//let's now map our values, here we use a map inside a map to copy the values across
//the reason we can't do later after flatterning is that we will loose the foldername
//links otherwise.  By doing a map inside a map, you then have the foldername scoped 
//for the inner array.
const mappedValues = keyValuesArrayOnly.
  map(([foldername, items]) => 
    items.map(value => ({
      username: data.name,
      foldername: camelCaseToTitle(foldername),
      ...value  //spread all the values on this new object.
    }))
  );
//console.log(mappedValues);

//finnaly lets flattern our results, as it's currenly in form [[item,item], [item,item]]
//and we want [item, item, item, item]

const result = mappedValues.flat();
console.log(result);

【讨论】：

感谢 Keith，但请注意文件夹名称，这是缺失的。这也需要改变。
我在分配文件夹名称时更加困惑。真的不知道如何按我的预期表达。（参见上面的代码，文件夹的输入和输出）
@MariaAndre 哦，是的。错过了那一点，你只需要另一个地图来循环内部数组..并使用Object.entries 这样你就可以提取文件夹名称..
最后一个问题 - 我如何将文件夹名称 mandatoryRequirements 更改为强制要求，postGrad 更改为毕业后，yourDocuments 更改为您的文档？
@MariaAndre 文件夹名称上的几个正则表达式会将postGrad 转换为Post Grad，更新答案

【解决方案2】：

我想到的最好的事情是将每个数组上的元素添加到具有所需属性集的新元素中。我不确定是否存在任何函数调用来简化此过程，我相信您将不得不在数组上使用forEach 方法。

【讨论】：