js设计模式:适配器模式

作用:

可以将某种不同格式的数据转化为自己所期待的数据格式

或者对于一些存在兼容或者特殊处理的业务逻辑,可以进行一个适配

示例:

javascript 复制代码
        //原始数据
        let oldData1 = [
            {
                name: '王惊涛',
                age: 29
            },
            {
                name: '孙悟空',
                age: 800
            },
            {
                name: '嘉文四世',
                age: 27
            },
            {
                name: '关羽',
                age: 40
            },
            {
                name: '伊利丹.怒风',
                age: 10000
            }
        ]

        let oldData2 = [
            {
                name: 'faker',
                mvpNumber: 125,
                winRate: '68%'
            },
            {
                name: 'zeus',
                mvpNumber: 23,
                winRate: '61%'
            },
            {
                name: 'gumayusi',
                mvpNumber: 13,
                winRate: '69%'
            }, {
                name: 'oner',
                mvpNumber: 21,
                winRate: '56%'
            }, {
                name: 'keria',
                mvpNumber: 14,
                winRate: '72%'
            }
        ]
        //echarts需要的数据类型是[name1,name2,...][data1,data2,...]这种类型的
        //我们这里需要设置一个功能函数,对我们所获取的原始数据进行一个适配,得到我们想要的数据类型
        //如果后台的数据组织基本格式化,我们也需要针对格式化的数据进行一个格式化的处理
        const AdaptiveFun = (list) => {
            let obj = list[0]
            let keyArr = Object.keys(obj)
            let newObj = {}
            keyArr.forEach(Item => {
                newObj[`${Item}List`] = []
                list.forEach(item => {
                    newObj[`${Item}List`].push(item[Item])
                })
            })
            return newObj
        }
        let newData1 = AdaptiveFun(oldData1)
        let newData2 = AdaptiveFun(oldData2)
        console.log(newData1,'数据1')
        console.log(newData2,'数据2')
相关推荐
再学一点就睡6 小时前
前端网络实战手册:15个高频工作场景全解析
前端·网络协议
C_心欲无痕7 小时前
有限状态机在前端中的应用
前端·状态模式
C_心欲无痕7 小时前
前端基于 IntersectionObserver 更流畅的懒加载实现
前端
candyTong7 小时前
深入解析:AI 智能体(Agent)是如何解决问题的?
前端·agent·ai编程
柳杉7 小时前
建议收藏 | 2026年AI工具封神榜:从Sora到混元3D,生产力彻底爆发
前端·人工智能·后端
weixin_462446237 小时前
使用 Puppeteer 设置 Cookies 并实现自动化分页操作:前端实战教程
运维·前端·自动化
CheungChunChiu8 小时前
Linux 内核动态打印机制详解
android·linux·服务器·前端·ubuntu
Irene19918 小时前
Vue 官方推荐:kebab-case(短横线命名法)
javascript·vue.js
GIS之路9 小时前
GDAL 创建矢量图层的两种方式
前端
2501_948195349 小时前
RN for OpenHarmony英雄联盟助手App实战:符文配置实现
javascript·react native·react.js