javascript - 循环对象数组，并根据某些条件生成新数组

Question

我有一个如下所示的 Javascript 对象:

const obj = [
{
  name: "Ali",
  userID: 123,
  type: "photo",
  photo: {
    "title": "Me",
    "src": "/cool.jpg",
  }
},
{
  name: "Ali",
  userID: 123,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
},
{
  name: "John",
  userID: 1234,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
},
{
  name: "John",
  userID: 1234,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
}];

我需要循环它并返回一个如下所示的数组:

const obj = [
  {
    name: "Ali",
    userID: 123,
    type: "photo",
    photos: [
      {
        title: "Me",
        src: "/cool.jpg"
      },
      {
        title: "Photo",
        src: "/photo.jpg"
      }
    ]
  },
  {
    name: "John",
    userID: 1234,
    type: "photo",
    photos: [
      {
        "title": "Me",
        "src": "photo.jpg"
      },
      {
        title: "Photo",
        src: "/photo.jpg"
      }
    ]
  }
]

请注意，第一个对象可以包含同名对象超过 100 次，我只需要一次，并且在他所有照片的数组中。我该怎么做？我应该使用什么类型的循环？谢谢...

Answer 1

这是另一个 ES6 脚本:

function merge(input) {
    return [...input.reduce( (acc, {name, userID, type, photo} ) => {
        let obj = acc.get(name) || {name, userID, type, photos: []};
        obj.photos.push(photo);
        return acc.set(name, obj);
    }, new Map()).values()];
}

// Sample data
var input = [{
  name: "Ali",
  userID: 123,
  type: "photo",
  photo: {
    "title": "Me",
    "src": "/cool.jpg",
  }
},
{
  name: "Ali",
  userID: 123,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
},
{
  name: "John",
  userID: 1234,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
},
{
  name: "John",
  userID: 1234,
  type: "photo",
  photo: {
    "title": "Photo",
    "src": "/photo.jpg"
  }
}];

// convert
result = merge(input);

// output result
console.log(result);

说明:

input.reduce迭代输入，并累积一个初始化为新 Map 的值(reduce 的第二个参数)。

在每次迭代中，累积值作为第一个参数传递，第二个参数接收输入元素。通过destructuring assignment ，我们获取每个 name、userID、type 和 photo 属性的变量。

每次迭代执行三个语句:

1. obj 被定义为 name 值的累积对象，或者 (||) 如果我们有还没有，作为给定的输入元素，但没有 photo 属性并具有新的 photos 数组:{name, userID, type, photos: []} .

2. 当前照片已添加到其中。

3. 结果对象被分配回累积的 Map 对象，该对象本身又返回到 reduce 内部。它将作为下一次迭代的第一个参数传递，等等。

reduce 返回最终累积的对象，即 Map。由于这不是所需的输出格式，因此将其转换为数组，这是通过获取其 values 来完成的。 (我们不再需要键)，并将其转换为数组 spread operator ([...])。