使用reduce转换一个2 js对象2 1答案

【问题标题】：transform a 2 js object 2 1 using reduce使用reduce转换一个2 js对象2 1
【发布时间】：2021-06-30 18:57:05
【问题描述】：

我想写一个函数来传输这个对象


const input1 = [
  {
    id: "lkhj68C13h8uWh4RJz7",
    post: "on XSS attacks",
    gender: "Littérature",
    postId: "cxTbP5EZjNCxw7rD60L7",
  },
  {
    id: "Kek4ulyC13h8uWh4RJz7",
    post: "The Maze",
    gender: "Littérature",
    postId: "cxTbP5EZjNCxw7rD60L7",
  },
  {
    id: "arfstlyC13h8uWh4RJz7",
    post: "Runner",
    gender: "Littérature",
    postId: "92poye7CF0aprDKcYh1Q",
  },
];

const input2 = [
  {
    postId: "92poye7CF0aprDKcYh1Q",
    postName: "Attalib",
    postUrl: "attalib",
    ville: "Casablanca",
  },
  {
    postId: "cxTbP5EZjNCxw7rD60L7",
    postName: "Atlas",
    postUrl: "atlas",
    ville: "Casablanca",
  },
];

成为那样的人

const output = [
  {
    postId: "92poye7CF0aprDKcYh1Q",
    postName: "Attalib",
    postUrl: "attalib",
    ville: "Casablanca",
    posts: [
      {
        id: "arfstlyC13h8uWh4RJz7",
        post: "Runner",
        gender: "Littérature",
      },
    ],
  },
  {
    postId: "cxTbP5EZjNCxw7rD60L7",
    postName: "Atlas",
    postUrl: "atlas",
    ville: "Casablanca",
    posts: [
      {
        id: "Kek4ulyC13h8uWh4RJz7",
        post: "The Maze",
        gender: "Littérature",
      },
      {
        id: "lkhj68C13h8uWh4RJz7",
        post: "on XSS attacks",
        gender: "Littérature",
      },
    ],
  },
];

我尝试使用 Array.reduce，但我不知道如何渲染它。如果有人对此有任何后见之明，我想使用 postid 合并两个输入，那么我可以使用 map 来循环或减少吗，如果有人可以帮助我这样做，我将非常感激，如果你有任何 reduce/map 教程

【问题讨论】：

标签： javascript node.js arrays reactjs typescript

【解决方案1】：

const input1 = [
  {
    id: "lkhj68C13h8uWh4RJz7",
    post: "on XSS attacks",
    gender: "Littérature",
    postId: "cxTbP5EZjNCxw7rD60L7",
  },
  {
    id: "Kek4ulyC13h8uWh4RJz7",
    post: "The Maze",
    gender: "Littérature",
    postId: "cxTbP5EZjNCxw7rD60L7",
  },
  {
    id: "arfstlyC13h8uWh4RJz7",
    post: "Runner",
    gender: "Littérature",
    postId: "92poye7CF0aprDKcYh1Q",
  },
];

const input2 = [
  {
    postId: "92poye7CF0aprDKcYh1Q",
    postName: "Attalib",
    postUrl: "attalib",
    ville: "Casablanca",
  },
  {
    postId: "cxTbP5EZjNCxw7rD60L7",
    postName: "Atlas",
    postUrl: "atlas",
    ville: "Casablanca",
  }];
const final = input2.reduce((acc, current) => {
    let filtered = input1.filter(obj => obj.postId === current.postId).map(({id,
    post,
    gender,
    postId}) =>  { return {id,
    post,
    gender}});
    current.posts = filtered; 
    acc.push(current);
    return acc;
}, []);
console.log(final)

【讨论】：

【解决方案2】：

您可以采用两个循环的方法并收集按postId 分组的所有帖子，然后映射另一个数组并添加帖子。

const
    input1 = [{ id: "lkhj68C13h8uWh4RJz7", post: "on XSS attacks", gender: "Littérature", postId: "cxTbP5EZjNCxw7rD60L7" }, { id: "Kek4ulyC13h8uWh4RJz7", post: "The Maze", gender: "Littérature", postId: "cxTbP5EZjNCxw7rD60L7" }, { id: "arfstlyC13h8uWh4RJz7", post: "Runner", gender: "Littérature", postId: "92poye7CF0aprDKcYh1Q" }],
    input2 = [{ postId: "92poye7CF0aprDKcYh1Q", postName: "Attalib", postUrl: "attalib", ville: "Casablanca" }, { postId: "cxTbP5EZjNCxw7rD60L7", postName: "Atlas", postUrl: "atlas", ville: "Casablanca" }],
    posts = input1.reduce((r, o) => ((r[o.postId] ??= []).push(o), r), {}),
    result = input2.map(o => ({ ...o, posts: posts[o.postId] || [] }));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

【解决方案3】：

为您的目标类型添加一个接口。

如果您想使用未知属性，请使用：

interface LooseObject {
    [key: string]: any
}

最后：

const output: LooseObject[] = [];

input2.forEach(f => {
  const post: LooseObject = f;
  post.posts = input1.filter(f => f.postId === post.postId);
  output.push(post);
})

TypeScriptPlayground 上的演示。

【讨论】：

【解决方案4】：

您的问题措辞相当糟糕，但我假设您尝试做的是使用postId 将input1 数据分配给input2 内的对象。你正在做的事情有点复杂而且不是很简单，所以最好只在 for 循环或 forEach 循环中执行操作。

这是一个快速而肮脏的轮廓：

for x in objects in input1 {

    //get the postId

    for y in objects in input2 {
    
        //if an object contains the postId from x, add a new property to y with that information
    }
}

如果您正在寻找如何使用Array.reduce 或Array.map，您可以查找Mozilla Reference 或W3Schools explanation.

下次您提出问题时，请尝试将其简化为您遇到的最基本问题。请记住，Google 是您最好的朋友。祝你好运！

【讨论】：