颜色十六进制转换rgb编码实现思路

今天在某网上作面试题的时候，发现一道颜色进制转换的题目 题目以下： 请编写一个JavaScript函数toRgb，它的做用是转换CSS中经常使用的颜色编码要求。要求：

alert(toRgb("#0000FF"));//rgb(0,0,255);
alert(toRgb("invalid")) //invalid
alert(toRgb("#G00"))//#G00
复制代码

思路： 1.理解题目意思，也就是符合要求的十六进制就转换，不符合的就返回参数自己 2.首先判断参数是不是符合条件的，首先须要#开头，其次要符合十六进制的规范，全部的数须要在0-F之间 3.数值转换须要用到parseInt的第二个radix参数进行进制转换，两两一位

本人的代码

const sixtyradix = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'A', 'B', 'C', 'D', 'E', 'F']
    function toRgb(param) {
        if (typeof param == "string" && param.startsWith('#') && param.length == 7) {
            let result = '';
            let status = true
            let parta = param.substring(1, 3);
            let partb = param.substring(3, 5);
            let partc = param.substring(5, 7)
            parta.split('').every(item =>
                sixtyradix.includes(item)
            ) ?
                result = result + 'rgb(' + parseInt(parta, 16) + ','
                :
                status = false
            partb.split('').every(item =>
                sixtyradix.includes(item)
            ) ? result = result + parseInt(partb, 16) + ',' : status = false
            partc.split('').every(item =>
                sixtyradix.includes(item)
            ) ? result = result + parseInt(partc, 16) + '）' : status = false
            if (status) {
                return result
            }
            else {
                return param
            }

        }
        else {
            return param
        }
    }
    alert(toRgb("#0000FF"));
    alert(toRgb("invalid"));
    alert(toRgb("#G00")); 
复制代码

写完以后，仍是能发现有不少不足 1.又臭又长，代码逻辑太复杂，没有必要 2.太多变量，若是每一个功能都这样写，内存性能吃不消 3.判断逻辑死板，没有注意大小写等细节 带着疑问去看了一下答案，答案只用了三行代码

function toRGB(color) {
    var regex = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
    match = color.match(regex)
    return match ? 'rgb('+parseInt(match[1], 16)+','+parseInt(match[2], 16)+','+parseInt(match[3], 16)+')' : color
}
复制代码

前段时间刚看过姚老师的正则表达，还作了读书笔记（正则表达式读书笔记），结果处理问题的时候第一个没有想到正则。 正则分两两校验，经过math[index]获取正则中（）捕获的匹配值，很好的代替了本身方法中的字符拆分问题，虽然理解题目的思路是同样的，可是用了正则以后，基本解决了我上面的全部存在的问题，且该方法不存在浏览器兼容性问题。

纸上得来终觉浅，绝知此事要躬行。学了要去用，才能记忆深入，才能融汇贯通~