JavaScript 生成随机颜色

代码

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

使用

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

// 用法2:指定前面字母
"#" + color("a2"); // '#a21034'

讲解

代码可以分成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));
}

其实这样也不符合我们习惯,再改!

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

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

好了,本次讲解完毕!

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

你可能感兴趣的:(前端,javascript,前端,java)