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')
相关推荐
蓝婷儿16 分钟前
每天一个前端小知识 Day 8 - 网络通信与前端性能优化
前端·性能优化
海的诗篇_21 分钟前
前端开发面试题总结-vue3框架篇(一)
前端·css·vue.js·面试·vue·html
sunshine_程序媛34 分钟前
npm/yarn报错“certificate has expired“
前端·npm·node.js
网小鱼的学习笔记40 分钟前
轻量级web开发框架之Flask web开发框架学习:get请求数据的发送
前端·学习·flask
一只不会编程的猫1 小时前
Could not find a declaration file for module ‘..XX‘.
linux·前端·vue.js·前端框架·vue·es6
万少1 小时前
95 后不靠大厂,凭 HarmonyOS 开发小众 APP 竟月入 7 万,他是怎么做到的
前端·harmonyos
前端宝哥1 小时前
解锁编程“钱”能:11种程序员创收秘笈与实战指南
前端·程序员
何中应2 小时前
【设计模式-4.8】行为型——中介者模式
java·设计模式·中介者模式