JavaScript 生成随机颜色

代码

function color(color) {
    return (color += "0123456789abcdef"[Math.floor(Math.random() * 6)]) && (color.length == 6 ? color : arguments.callee(color));
}
1
2
3

使用

// 用法1：全部随机生成
"#" + color(""); // '#201050'

// 用法2：指定前面字母
"#" + color("a2"); // '#a21034'
1
2
3
4
5

讲解

代码可以分成2部分来看：

color += "0123456789abcdef"[Math.floor(Math.random() * 6)]

这部分无需讲解，就是在可选范围内随机获取字符。

重点来了！！

arguments.callee(color) 相当于递归调用，将前面已经添加的值作为参数传递。

如：

1. 开始为空字符串 “”
2. 经过随机抽取 “a”
3. 然后不满足6个字符串长度，进行递归（将“a”传递进去）
4. 经过随机抽取 “a2”
5. 经过一系列 2-4 步骤后，满足6个字符串长度
6. 返回 color 【整个函数执行完毕】

拓展知识

arguments.callee(color) 已弃用！

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；

所以讲了这么多！！

统统都没有用！！！！

我们可以直接递归，通过函数名调用（老版本不支持）！

所以，我们简写代码：

function getColor(color="") {
    return (color += "0123456789abcdef"[Math.floor(Math.random() * 6)]) && (color.length == 6 ? color : getColor(color));
}
1
2
3

其实这样也不符合我们习惯，再改！

function getColor(color="") {
    if (color.length >= 6) {
        return color;
    }

	// 这个随机字符串可不能再简写哈
    color += "0123456789abcdef"[Math.floor(Math.random() * 6)];
    // 递归
    return getColor(color);
}
1
2
3
4
5
6
7
8
9
10

好了，本次讲解完毕！

今日所学知识点：递归调用