颜色十六进制转换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]获取正则中()捕获的匹配值,很好的代替了自己方法中的字符拆分问题,虽然理解题目的思路是一样的,但是用了正则之后,基本解决了我上面的所有存在的问题,且该方法不存在浏览器兼容性问题。

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

阅读 528

推荐阅读