JS笔试题：随机生成颜色HEX字符串

题目：

// JS笔试 随机生成颜色Hex字符串
function random() {
 	// TODO
}

console.log(random()) //(随机颜色) #c551e1
console.log(random()) //(随机颜色) #a5e77a
console.log(random()) //(随机颜色) #251448

首先我们解答这道题的时候需要明白HEX颜色字符串是什么？

它是一种颜色值的一种十六进制写法，大小写不敏感，跟RGB颜色值写法可以互相转换，由于R、G、B每一个的最小值为0最大值为255，所以HEX最小值为#000000，最大值为#FFFFFF。转换的方式打个比方，如#FF21B6，FF=255，21=31，B6=182，得出rgb(255, 31, 182)。
我们在一些地方还会看到另一种写法如#000，#F0F这种只有三位的，这其实是六位写法的一种缩写，只需要满足#AABBCC的格式即可缩小成#ABC。

下面答案中会用到0xffffff是什么？

这个点跟进制有关，其中0x/0X是进制前缀，代表十六进制，FFFFFF就是十六进制的值，当我们在控制台把它打印出来的时候会自动转换为十进制数16777215。
其它进制前缀：二进制 0b/0B
八进制 0

答案：

这道题我们有好几种解法

• 单字符组合法 当我们对HEX字符串不了解时，直接可以使用最粗暴的方法解决问题，我们发现字符串中的值范围是0-9和a-f，那么就可以从这个范围内取六个随机值组合成一个字符串即能得出。

const random = () => {
    const range = [
        '0', '1', '2', '3', '4', '5',
        '6', '7', '8', '9', 'a', 'b',
        'c', 'd', 'e', 'f'
    ]
    let str = '#'
    for (let i = 0;i < 6; i++) {
        const index = Math.floor(Math.random() * 16)
        str += range[index]
    }
    return str
}

• 先随机出RGB再转HEX

这里会用到padStart，是ES2017中字符串原型方法，用于填充字符串到指定长度的一种方法

const random = () => {
    let str = '#'
    for (let i = 0;i < 3; i++) {
        str += Math.floor(Math.random() * 256).toString(16).padStart(2, '0')
    }
    return str
}

// Or 改个写法

const random = () => {
    return `#${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}${Math.floor(Math.random() * 256).toString(16).padStart(2, '0')}`
}

• 直接随机HEX

上面说到HEX是一种十六进制的字符串，两两可以代表一个R/G/B的其中一个数，同时六位字符组合起来也是一个十六进制数，其最小值为000000，最大值为FFFFFF，在JS中需要直接参与运算需要添加十六进制前缀0x（零X）即0xFFFFFF或0xffffff。同时如果不足六位的情况下在前面加0补足。

const random = () => {
    return '#' + Math.floor(Math.random() * (0xffffff + 1)).toString(16).padStart(6, '0')
}

欢迎评论指出错误