我可以使用JavaScript映射，过滤器来映射两个具有相同ID的数组吗？

时间：2019-07-19 16:24:41

标签： javascript

我有两个数组：一个问题是答案。我想将具有相同问题ID的答案数组添加到问题数组的答案属性中，如下所示：

const questions = {
    total: 18,
    page: 1,
    questions: [{
        firstName: 'testing',
        lastName: '001',
        citizenType: 'VERIFIED CITIZEN',
        imageUrl: 'https://source.unsplash.com/400x400/',
        question: '546435645364564356',
        createdAt: 1563486386916,
        id: '905aa4c9-38b8-4429-a91b-56e819ea53e9',
        answers : []
    }, {
        firstName: 'testing',
        lastName: '001',
        citizenType: 'VERIFIED CITIZEN',
        imageUrl: 'https://source.unsplash.com/400x400/',
        question: 'questions',
        createdAt: 1563484856214,
        id: '69165abc-3327-4d99-856a-290042863247',
        answers : []
    }, {
        firstName: 'testing',
        lastName: '001',
        citizenType: 'VERIFIED CITIZEN',
        imageUrl: 'https://source.unsplash.com/400x400/',
        question: 'ffff',
        createdAt: 1563475882538,
        id: '97a1d4a1-7e6d-4859-93ee-5591918bba87',
        answers : []
    }]
};
  const answers = [
    {
        citizenType: 'VERIFIED CITIZEN',
        createdAt: 1563486386916,
        firstName: 'Dan',
        questionID: '905aa4c9-38b8-4429-a91b-56e819ea53e9',
        id: '905aa4c9-38b8-4429-a91b-56e819ea53e1',
        imageUrl: 'https://source.unsplash.com/400x400/',
        lastName: 'Jone',
        answer: 'answer from Dan Joe',
    },
    {
        citizenType: 'VERIFIED CITIZEN',
        createdAt: 1563486386916,
        firstName: 'Bill',
        questionID: '69165abc-3327-4d99-856a-290042863247',
        id: '905aa4c9-38b8-4429-a91b-56e819ea53e2',
        imageUrl: 'https://source.unsplash.com/400x400/',
        lastName: 'Li',
        answer: 'answer from Bill',
    },
    {
        citizenType: 'VERIFIED CITIZEN',
        createdAt: 1563486386916,
        firstName: 'Steve',
        questionID: '97a1d4a1-7e6d-4859-93ee-5591918bba87',
        id: '905aa4c9-38b8-4429-a91b-56e819ea53e3',
        imageUrl: 'https://source.unsplash.com/400x400/',
        lastName: 'Sun',
        answer: 'answer from Steve',
    },
    {
        citizenType: 'VERIFIED CITIZEN',
        createdAt: 1563486386916,
        firstName: 'Steve',
        questionID: '111111111',
        id: '905aa4c9-38b8-4429-a91b-56e819ea53e3',
        imageUrl: 'https://source.unsplash.com/400x400/',
        lastName: 'Sun',
        answer: 'answer from MissMatch',
    },
];

let questionArr = questions.questions;
let answerArr = questionArr[0].answers;

// can use I use map, filter or other pure functions to achieve this?
questionArr.forEach(q => {
    answers.forEach(a => {
        if (q.id === a.questionID) {
            q.answers.push(a);
        }
    })
})

console.log(questions);

现在的结果（问题）是我想要的，但是只是想知道我是否可以通过一些ES6纯函数（例如地图过滤器）来实现这一点……非常感谢！

5 个答案:

答案 0 :(得分：3)

如果您确实要迭代两个数组（即O（n * m）时间复杂度），则可以构建一个新数组：

 const result = questions.map(question => ({
    ...question,
   answers: answers.filter(it => it.questionID === question.id), 
 }));

但是我宁愿从问题中构建一个Map，然后是其O（n + m）：

 const questionByID = new Map(questions.map(q => ([q.id, { ...q, answers: [] }])));

 for(const answer of answers)
   questionByID.get(answer.questionID).answers.push(answer);

 const result = [...questionByID.values()];

答案 1 :(得分：0)

您可以将目标数组存储在地图中并推送答案。

var questions = { total: 18, page: 1, questions: [{ firstName: 'testing', lastName: '001', citizenType: 'VERIFIED CITIZEN', imageUrl: 'https://source.unsplash.com/400x400/', question: '546435645364564356', createdAt: 1563486386916, id: '905aa4c9-38b8-4429-a91b-56e819ea53e9', answers: [] }, { firstName: 'testing', lastName: '001', citizenType: 'VERIFIED CITIZEN', imageUrl: 'https://source.unsplash.com/400x400/', question: 'questions', createdAt: 1563484856214, id: '69165abc-3327-4d99-856a-290042863247', answers: [] }, { firstName: 'testing', lastName: '001', citizenType: 'VERIFIED CITIZEN', imageUrl: 'https://source.unsplash.com/400x400/', question: 'ffff', createdAt: 1563475882538, id: '97a1d4a1-7e6d-4859-93ee-5591918bba87', answers: [] }] },
    answers = [{ citizenType: 'VERIFIED CITIZEN', createdAt: 1563486386916, firstName: 'Dan', questionID: '905aa4c9-38b8-4429-a91b-56e819ea53e9', id: '905aa4c9-38b8-4429-a91b-56e819ea53e1', imageUrl: 'https://source.unsplash.com/400x400/', lastName: 'Jone', answer: 'answer from Dan Joe' }, { citizenType: 'VERIFIED CITIZEN', createdAt: 1563486386916, firstName: 'Bill', questionID: '69165abc-3327-4d99-856a-290042863247', id: '905aa4c9-38b8-4429-a91b-56e819ea53e2', imageUrl: 'https://source.unsplash.com/400x400/', lastName: 'Li', answer: 'answer from Bill' }, { citizenType: 'VERIFIED CITIZEN', createdAt: 1563486386916, firstName: 'Steve', questionID: '97a1d4a1-7e6d-4859-93ee-5591918bba87', id: '905aa4c9-38b8-4429-a91b-56e819ea53e3', imageUrl: 'https://source.unsplash.com/400x400/', lastName: 'Sun', answer: 'answer from Steve' }, { citizenType: 'VERIFIED CITIZEN', createdAt: 1563486386916, firstName: 'Steve', questionID: '111111111', id: '905aa4c9-38b8-4429-a91b-56e819ea53e3', imageUrl: 'https://source.unsplash.com/400x400/', lastName: 'Sun', answer: 'answer from MissMatch' }];
    targets = new Map(questions.questions.map(o => [o.id, o.answers]));

answers.forEach(o => targets.has(o.questionID) && targets.get(o.questionID).push(o));

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

答案 2 :(得分：0)

尝试一下：

const questions = { total: 18, page: 1, questions: [{ firstName: 'testing', lastName: '001', citizenType: 'VERIFIED CITIZEN', imageUrl: 'https://source.unsplash.com/400x400/', question: '546435645364564356', createdAt: 1563486386916, id: '905aa4c9-38b8-4429-a91b-56e819ea53e9', answers : [] }, { firstName: 'testing', lastName: '001', citizenType: 'VERIFIED CITIZEN', imageUrl: 'https://source.unsplash.com/400x400/', question: 'questions', createdAt: 1563484856214, id: '69165abc-3327-4d99-856a-290042863247', answers : [] }, { firstName: 'testing', lastName: '001', citizenType: 'VERIFIED CITIZEN', imageUrl: 'https://source.unsplash.com/400x400/', question: 'ffff', createdAt: 1563475882538, id: '97a1d4a1-7e6d-4859-93ee-5591918bba87', answers : [] }] };
const answers = [ { citizenType: 'VERIFIED CITIZEN', createdAt: 1563486386916, firstName: 'Dan', questionID: '905aa4c9-38b8-4429-a91b-56e819ea53e9', id: '905aa4c9-38b8-4429-a91b-56e819ea53e1', imageUrl: 'https://source.unsplash.com/400x400/', lastName: 'Jone', answer: 'answer from Dan Joe', }, { citizenType: 'VERIFIED CITIZEN', createdAt: 1563486386916, firstName: 'Bill', questionID: '69165abc-3327-4d99-856a-290042863247', id: '905aa4c9-38b8-4429-a91b-56e819ea53e2', imageUrl: 'https://source.unsplash.com/400x400/', lastName: 'Li', answer: 'answer from Bill', }, { citizenType: 'VERIFIED CITIZEN', createdAt: 1563486386916, firstName: 'Steve', questionID: '97a1d4a1-7e6d-4859-93ee-5591918bba87', id: '905aa4c9-38b8-4429-a91b-56e819ea53e3', imageUrl: 'https://source.unsplash.com/400x400/', lastName: 'Sun', answer: 'answer from Steve', }, { citizenType: 'VERIFIED CITIZEN', createdAt: 1563486386916, firstName: 'Steve', questionID: '111111111', id: '905aa4c9-38b8-4429-a91b-56e819ea53e3', imageUrl: 'https://source.unsplash.com/400x400/', lastName: 'Sun', answer: 'answer from MissMatch', }, ];

questions.questions.map(res=> Object.assign(res,{answers:answers.filter(ele=>ele.questionID === res.id)}))

console.log(questions);

答案 3 :(得分：0)

是的，您可以：

questions.questions = questions.questions.map(q => (
  q.answers = answers.filter(answer => answer.questionID === q.id), q
))

这是可执行代码：

const questions = {
    total: 18,
    page: 1,
    questions: [{
        firstName: 'testing',
        lastName: '001',
        citizenType: 'VERIFIED CITIZEN',
        imageUrl: 'https://source.unsplash.com/400x400/',
        question: '546435645364564356',
        createdAt: 1563486386916,
        id: '905aa4c9-38b8-4429-a91b-56e819ea53e9',
        answers : []
    }, {
        firstName: 'testing',
        lastName: '001',
        citizenType: 'VERIFIED CITIZEN',
        imageUrl: 'https://source.unsplash.com/400x400/',
        question: 'questions',
        createdAt: 1563484856214,
        id: '69165abc-3327-4d99-856a-290042863247',
        answers : []
    }, {
        firstName: 'testing',
        lastName: '001',
        citizenType: 'VERIFIED CITIZEN',
        imageUrl: 'https://source.unsplash.com/400x400/',
        question: 'ffff',
        createdAt: 1563475882538,
        id: '97a1d4a1-7e6d-4859-93ee-5591918bba87',
        answers : []
    }]
};
  const answers = [
    {
        citizenType: 'VERIFIED CITIZEN',
        createdAt: 1563486386916,
        firstName: 'Dan',
        questionID: '905aa4c9-38b8-4429-a91b-56e819ea53e9',
        id: '905aa4c9-38b8-4429-a91b-56e819ea53e1',
        imageUrl: 'https://source.unsplash.com/400x400/',
        lastName: 'Jone',
        answer: 'answer from Dan Joe',
    },
    {
        citizenType: 'VERIFIED CITIZEN',
        createdAt: 1563486386916,
        firstName: 'Bill',
        questionID: '69165abc-3327-4d99-856a-290042863247',
        id: '905aa4c9-38b8-4429-a91b-56e819ea53e2',
        imageUrl: 'https://source.unsplash.com/400x400/',
        lastName: 'Li',
        answer: 'answer from Bill',
    },
    {
        citizenType: 'VERIFIED CITIZEN',
        createdAt: 1563486386916,
        firstName: 'Steve',
        questionID: '97a1d4a1-7e6d-4859-93ee-5591918bba87',
        id: '905aa4c9-38b8-4429-a91b-56e819ea53e3',
        imageUrl: 'https://source.unsplash.com/400x400/',
        lastName: 'Sun',
        answer: 'answer from Steve',
    },
    {
        citizenType: 'VERIFIED CITIZEN',
        createdAt: 1563486386916,
        firstName: 'Steve',
        questionID: '111111111',
        id: '905aa4c9-38b8-4429-a91b-56e819ea53e3',
        imageUrl: 'https://source.unsplash.com/400x400/',
        lastName: 'Sun',
        answer: 'answer from MissMatch',
    },
];

questions.questions = questions.questions.map(q => (
  q.answers = answers.filter(answer => answer.questionID === q.id), q
))

console.log(questions)

答案 4 :(得分：0)

类似于使用Map的建议解决方案，您可以使用非常相似的方式使用普通对象，并使用Object.fromEntries()进行构造：

const questionsObject = Object.fromEntries(questions.map(q => [q.id, q]));

answers.forEach(answer => {
  questionsObject[answer.questionID].answers.push(answer);
});

const result = Object.values(questionsObject);
相关问题
最新问题