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')
相关推荐
chxii8 小时前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够8 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
太过平凡的小蚂蚁9 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
咖啡の猫10 小时前
Vue初始化脚手架
前端·javascript·vue.js
晨枫阳10 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
杯莫停丶10 小时前
设计模式之:装饰器模式
java·设计模式·装饰器模式
liusheng12 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪12 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛12 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能12 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端