Rx.js 将二维数据拍扁(平)

最新推荐文章于 2025-06-01 09:17:32 发布

原创

最新推荐文章于 2025-06-01 09:17:32 发布 · 500 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用Rx.js库的operator功能，将复杂的二维数据结构拍扁，实现数据的平铺处理。这种方法得益于纯函数的特性，确保了代码的简洁、职责单一，即便面对多层嵌套的数据也能轻松应对。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        /** 
         * 从后台返回如下格式数据 
         * 
         * 期望数据结构： [...{ index:'', name: '', age: '' }]  该数据类型的长度为 9 (所有数据拆开的总长度)
         */
        const response = {
            content: [
                [{ index: 0, name: 'aa1', age: 11 }, { index: 0, name: 'aa2', age: 11 }, { index: 0, name: 'aa3', age: 11 }],
                [{ index: 1, name: 'bb1', age: 12 }, { index: 1, name: 'bb2', age: 12 }, { index: 1, name: 'bb3', age: 12 }],
                [{ index: 2, name: 'cc1', age: 13 }, { index: 2, name: 'cc2', age: 13 }, { index: 2, name: 'cc3', age: 13 }]

            ],
        };

// 使用 Rx.js

        of(response).pipe(
            map(res => res.content),
            mergeMap(arr => from(arr)),
            mergeMap(arr => from(arr)),
            toArray(),
        ).subscribe(res => console.log(res));

最终结果：