객체의 두 배열을 병합하고 배열 이름을 속성으로 추가

debugcn 에 게시 Dev

톰

두 개의 객체 배열을 병합하고 동시에 해당 이름을 객체에 속성으로 추가하려고합니다.

const firstGroup = [
    {
        firstname: 'Nick',
        id: 1
    },
    {
        firstname: 'Joe',
        id: 2
    },
]

const secondGroup = [
    {
        firstname: 'Tom',
        id: 1
    },
]

원하는 출력 :

allGroups = [
    {
        groupname: 'firstGroup',
        firstname: 'Nick',
        id: 1
    },
    {
        groupname: 'firstGroup',
        firstname: 'Joe',
        id: 2
    },
    {
        groupname: 'secondGroup',
        firstname: 'Tom',
        id: 1
    }
]

내가 시도한 것은 다음과 같습니다.

Object
    .entries({ firstGroup, secondGroup })
    .reduce((acc, [name, [firstname, id]]) => ([{
        ...acc,
        groupname: name,
        firstname,
        id
    }]), [])

그러나 그것은 작동하지 않고 어떻게 할 수 있는지 알 수 없습니다.

당신의 도움을 주셔서 감사합니다 !

TJ 크라우 더

코드는 비슷했지만 "누산기"배열을 수정하는 대신 각 반복마다 새 배열을 만들고 reduce모든 배열이 아닌 소스 배열의 첫 번째 항목에서만 속성을 가져옵니다.

reduce여기에 복잡성을 추가합니다. IMHO, for-of생성 한 개체의 항목에 대해 루프를 사용합니다 . 루프 본문 내에서 항목을 그룹 이름이있는 새 항목에 매핑 한 다음 모두 allGroups. 이렇게 :

const allGroups = [];
for (const [groupname, entries] of Object.entries({firstGroup, secondGroup})) {
    allGroups.push(...entries.map(entry => ({groupname, ...entry})));
}

라이브 예 :

const firstGroup = [
    {
        firstname: 'Nick',
        id: 1
    },
    {
        firstname: 'Joe',
        id: 2
    },
];

const secondGroup = [
    {
        firstname: 'Tom',
        id: 1
    },
];

const allGroups = [];
for (const [groupname, entries] of Object.entries({firstGroup, secondGroup})) {
    allGroups.push(...entries.map(entry => ({groupname, ...entry})));
}
console.log(allGroups);

그러나 여기에 귀하의 reduce접근 방식 의 작동 버전이 있습니다 .

const firstGroup = [
    {
        firstname: 'Nick',
        id: 1
    },
    {
        firstname: 'Joe',
        id: 2
    },
];

const secondGroup = [
    {
        firstname: 'Tom',
        id: 1
    },
];

const allGroups = Object.entries({ firstGroup, secondGroup })
    .reduce((acc, [groupname, entries]) => {
        acc.push(...entries.map(entry => ({groupname, ...entry})));
        return acc;
    }, []);
console.log(allGroups);

댓글에서 다음과 같이 질문했습니다.

... 최종 객체에서 초기 속성을 선택하면 어떻게 될까요? groupname, firstname하지만 id?

당신은 내가 가지고있는 경우 위의 장소 변경 줄 entry =>을 ({firstname}) =>내가 가지고있는 곳 나열된 개체에서 특성 (들), 그리고 변화를 destructure하기를 ...entry위해 firstname그냥 채우기 위해 그 / 새 개체에 이러한 속성. 예를 들어 :

allGroups.push(...entries.map(({firstname}) => ({groupname, firstname})));

라이브 예- for-of:

const firstGroup = [
    {
        firstname: 'Nick',
        id: 1
    },
    {
        firstname: 'Joe',
        id: 2
    },
];

const secondGroup = [
    {
        firstname: 'Tom',
        id: 1
    },
];

const allGroups = [];
for (const [groupname, entries] of Object.entries({firstGroup, secondGroup})) {
    allGroups.push(...entries.map(({firstname}) => ({groupname, firstname})));
}
console.log(allGroups);

라이브 예- reduce:

const firstGroup = [
    {
        firstname: 'Nick',
        id: 1
    },
    {
        firstname: 'Joe',
        id: 2
    },
];

const secondGroup = [
    {
        firstname: 'Tom',
        id: 1
    },
];

const allGroups = Object.entries({ firstGroup, secondGroup })
    .reduce((acc, [groupname, entries]) => {
        acc.push(...entries.map(({firstname}) => ({groupname, firstname})));
        return acc;
    }, []);
console.log(allGroups);

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사