大小写混合也能轻松取值?这方法绝了!

252 阅读2分钟

需求背景

用户注册时,会取拼音作为id。起初使用的全大写,后续由于业务要求,展示改为全小写。 由于数据 -> 用户,会有许多中间层,部分中间层全转为小写,部分没有处理,而服务端也会做相同的处理。

导致请求key为['abc', 'EFF'],响应key为['abc', 'eff']。

诉求

数据源为

const userInfo = {
    'nihao': {name: '你好'},
    'XIEXIE': {name: '谢谢'},
}

// 可能得key
const key1 = ['nihao', 'xiexie'];
const key2 = ['NIHAO', 'XIEXIE'];
const key3 = ['NIHAO', 'xiexie'];
const key3 = ['nihao', 'XIEXIE'];

期望

key1.forEach(name => {
    console.log(userInfo[name]);
});
// key2...
// key3...

// 输出均为
// {name: '你好'}
// {name: '谢谢'}

实现

数据的key要么是全大写,要么是全小写

暴力简单版

只需要把数据所有的key,大小写都写上,就完事了!讲究的就是一个暴力。

const newUserInfo = {};
Object.keys(userInfo).forEach(name => {
    newUserInfo[name.toLowerCase()] = userInfo[name];
    newUserInfo[name.toUpperCase()] = userInfo[name];
})

方法获取版

写个方法,获取的时候,对key做一下大小写转换即可。

const getObjKey = (obj, key) => {
    return obj[key.toLowerCase()] || obj[key.toUpperCase()]
}

proxy版

上一个版本会导致取值还需要额外调用方法,使用代理的方式可以优雅的处理

const newUserInfo = new Proxy(
    {},
    {
        get: function (target, key: string) {
            return target[key] || target[key.toLowerCase()];
        },
        set: function (target, key: string, value: any) {
            target[key.toLowerCase()] = value;
            return value;
        },
    }
);
Object.keys(userInfo).forEach(name => {
    newUserInfo[key] = userInfo[name];
})

至此我的遇到的问题已经完全解决啦,但是这个方法并不完善,尤其是在写proxy的时候,在设置属性为大小写混合时,仅仅使用toLowerCase或者toUpperCase是取不到的,所以在set方法里加上了设置属性时强转为全小写。所以取值时也按照全小写取就好啦。

todo

今天周五!不卷了!回家休息! 给休息好的自己留个作业~

期望对象key为大小写混排时,也能不区分大小写都取到,如果匹配到多个,则返回数组,匹配到单个,返回原始数据。

const userInfo = {
    'niHao': {name: '你好'},
    'xieXie': {name: '谢谢'},
    'XieXie': {name: '谢谢1'},
}
// userInfo.nihao -> {name: '你好'}
// userInfo.xiexie -> [{name: '谢谢'},{name: '谢谢1'}]