中英文键名的切换(JS)

348 阅读1分钟

1、英文键名改中文键名

日常开发中,我们从后台请求过来的数据,对象的键名一般是英文,如果我们需要的是中文,怎么办呢?如果我们手中的数据,键名是中文,发送给后台,又需要英文的键名,怎么办呢?我们一起来封装一个吧

<script>
        // ◆模拟一个从后台传过来的数据
        const objInfo = [
            {
                'id': '01',
                'password': '123456',
                'mobile': '13667279878',
                'username': '张三',
                'workNumber': 'qy123',
                'departmentName': '财务部',
            },
            {
                'id': '02',
                'password': '456123',
                'mobile': '13867279178',
                'username': '李四',
                'workNumber': 'qy125',
                'departmentName': '技术部',
            }]
            
        // ◆准备改动的模板
        const mapInfo = {
            'id': '编号',
            'password': '密码',
            'mobile': '手机号',
            'username': '姓名',
            'workNumber': '工号',
            'departmentName': '部门',
        }
        
        // ◆封装英文键名 改为 中文键名 的函数
        function tarnsZH(mapInfo, objInfo) {
            // 1.遍历后台传过来的数据对象
            const results = objInfo.map(item => {
                console.log(item, 999);
                // 2.声明新对象接收转化后的对象
                let newObj = {}
                // 3.获取后台的英文键名
                let enKeys = Object.keys(mapInfo)
                // 4.循环英文键名
                enKeys.forEach((key) => {
                    // 5.给新对象新增中文键名和键值
                    newObj[mapInfo[key]] = item[key]
                })
                // 6.返回新对象
                return newObj
            })
            //7.返回二维数组对象
            return results
        }
        
        //◆调用并打印结果
        console.log(tarnsZH(mapInfo, objInfo))
 </script>

image.png

2、中文键名改英文键名

以上是英文键名转中文键名,那么中文键名转英文键名也是同理呀,我们只需要把上面封装好的函数再调用一次,传入实参即可,一起来看看吧

  <script>
        //◆这是我们手中的数据
        const list = [
            {
                '编号': '01',
                '密码': '123456',
                '手机号': '13667279878',
                '姓名': '张三',
                '工号': 'qy123',
                '部门': '财务部',
            },
            {
                '编号': '02',
                '密码': '456123',
                '手机号': '13867279178',
                '姓名': '张三',
                '工号': 'qy125',
                '部门': '技术部',
            }]
            
        //◆我们需要把以上中文键名转化成如下对应的英文键名
        const obj = {
            '编号': 'id',
            '密码': 'password',
            '手机号': 'mobile',
            '姓名': 'username',
            '工号': 'workNumber',
            '部门': 'departmentName',
        }
        
        //◆封装函数 中文键名转英文键名
        function tarnsEN(mapInfo, objInfo) {//形参
            //1.遍历数组,得到每一个对象
            return objInfo.map(item => {//7.直接在这里 return 二维数组也可以
                console.log(item, 999);
                //2.声明空对象,准备接收转化后的对象
                let newObj = {}
                //3.获取中文键名
                let zhKeys = Object.keys(mapInfo)
                //4.循环中文键名
                zhKeys.forEach((key) => {
                    //5.给新对象新增英文键名和键值
                    newObj[mapInfo[key]] = item[key]
                })
                //6.返回新对象
                return newObj
            })
        }
        
        //◆调用函数并打印结果
        console.log(tarnsEN(obj, list))
 </script>

image.png

3、总结、抽离、注释

现在,我们把函数抽离出来,附上注释,以后就可以 CV 啦,当然你也可以找第三方模块~

/**
* @description:中英文键名的切换
* @param {mapInfo:Object} 转换的模板
* @param {objInfo:Array}  需要转换键名的数组
* @return: 返回一个二维数组
*/
function tarnsKeys(mapInfo, objInfo) {
    return objInfo.map(item => {
        console.log(item, 999);
        let newObj = {}
        let Keys = Object.keys(mapInfo)
        Keys.forEach((prop) => {
            newObj[mapInfo[prop]] = item[prop]
        })
        return newObj
    })
}