实现数组重组的各功能

原创于 2025-10-08 19:36:30 发布 · 162 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #linux

首先原数组是这样的：

data = [
        {
            componentId: '1',
            componentName: 'P-2153A1',
            componentNumber: 'P-2153A',
            coordinates: '117.02837288326937,30.538795430593115,0.2854794454760849',
            labelName: '设备1',
            labelUrl: '20240117/65a729b7e4b0d853c27aaebf.png',
            uniqueId: '01875d16-b70a-42b3-bd8f-15d04d23325d'
        },
        {
            componentId:'2',
            componentName: 'P-4007A1',
            componentNumber: 'P-4007A',
            coordinates: '117.02844920868915,30.538885470640942,-0.0413643876090645',
            labelName: '设备1',
            labelUrl: '20240117/65a729b7e4b0d853c27aaebf.png',
            uniqueId: '0968a22a-3f12-4abf-8613-53662ab5735e'
        },

        {
            componentId: '3',
            componentName: 'P-2117A',
            componentNumber: 'P-2117A',
            coordinates: '117.02845602509652,30.539243496630807,0.3614021935500204',
            labelName: '设备1',
            labelUrl: '20240117/65a729b7e4b0d853c27aaebf.png',
            uniqueId: 'bdda8398-80c8-433b-be05-0443c1bc263a'
        },

        {
            componentId:'4',
            componentName: 'E10',
            componentNumber: 'E-4008',
            coordinates: '117.02843705674672,30.538790042177304,5.65673880092799',
            labelName: '设备2',
            labelUrl: '20240117/65a729dde4b0d853c27aaec0.png',
            uniqueId: '04fb9084-d117-42a7-8e4d-78cb50baa316'
        },

        {
            componentId:'5',
            componentName: 'P-2153A1',
            componentNumber: 'P-2153A',
            coordinates: '117.02837288326937,30.538795430593115,0.2854794454760849',
            labelName: '设备2',
            labelUrl: '20240117/65a729dde4b0d853c27aaec0.png',
            uniqueId: '01875d16-b70a-42b3-bd8f-15d04d23325d'
        },

        {
            componentId:'6',
            componentName: 'P-4007A1',
            componentNumber: 'P-4007A',
            coordinates: '117.02844920868915,30.538885470640942,-0.0413643876090645',
            labelName: '设备2',
            labelUrl: '20240117/65a729dde4b0d853c27aaec0.png',
            uniqueId: '0968a22a-3f12-4abf-8613-53662ab5735e'
        },

        {
            componentId:'7',
            componentName: 'E10',
            componentNumber: 'E-4008',
            coordinates: '117.02843705674672,30.538790042177304,5.65673880092799',
            labelName: '设备',
            labelUrl: '20240116/65a661cae4b0d853c27aaebe.png',
            uniqueId: '04fb9084-d117-42a7-8e4d-78cb50baa316'
        }
    ]

要将具有相同uniqueId的元素合并到一起，然后返回一个新的数组，我用的是数组的reduce()方法去操作的，代码如下：

data = Object.values(
                            data.reduce((acc, item) => {
                            const { uniqueId, coordinates, ...rest } = item;
                            if (!acc[uniqueId]) {
                                acc[uniqueId] = { id: uniqueId, coordinates, children: [] };
                            }
                            acc[uniqueId].children.push(rest);
                            return acc;
                        }, {})
                    );