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')
相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴2 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante4 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript