如何展开JavaScript对象中所有数组值并合并为单个数组？

问题描述 #

现有一个值均为数组的JavaScript对象：

const CHANNELS = {
    FACEBOOK: [{
            value: 'face1',
            label: 'Facebook Account'
        },{
            value: 'face1',
            label: 'Facebook Group'
        },
    ],
    LINKEDIN: [{
            value: '',
            label: 'All'
        }, {
            value: 'english',
            label: 'English'
        }, {
            value: 'korean',
            label: 'Korean'
        }
    ],
    YOUTUBE: [{
            value: 'youtube1',
            label: 'Youtube channel'
        }, {
            value: 'youtube2',
            label: 'Youtube'
        }
    ]
};

需要将该对象中所有键对应的数组值展开并合并为一个新数组，预期输出：

const array = [{
            value: 'face1',
            label: 'Facebook Account'
        }, {
            value: 'face1',
            label: 'Facebook Group'
        }, {
            value: '',
            label: 'All'
        }, {
            value: 'english',
            label: 'English'
        }, {
            value: 'korean',
            label: 'Korean'
        }, {
            value: 'youtube1',
            label: 'Youtube channel'
        }, {
            value: 'youtube2',
            label: 'Youtube'
        }
]

实现方法 #

方法1：Object.values() + Array.flat()

这是最简洁的写法，先获取对象所有值组成的二维数组，再扁平化合并为一维数组：

const array = Object.values(CHANNELS).flat();

flat()默认处理一层嵌套，刚好匹配当前结构；如果有更深层级的嵌套数组，可传入flat(Infinity)处理任意深度。

方法2：Array.reduce()

通过遍历数组并累加合并结果：

const array = Object.values(CHANNELS).reduce((acc, curr) => acc.concat(curr), []);

以空数组为初始值，每次迭代将当前数组合并到累加器中，最终得到合并后的一维数组。

方法3：扩展运算符 + Array.concat()

利用扩展运算符将二维数组展开为多个参数，再合并：

const array = [].concat(...Object.values(CHANNELS));

...Object.values(CHANNELS)将二维数组展开为独立的数组参数，concat会自动把这些数组合并成一个新数组。

内容的提问来源于stack exchange，提问作者Luke