JS生成指定数量随机RGB/HEX颜色函数返回NaN问题排查

核心问题点 #

代码返回NaN、逻辑不符合预期的原因共4处：

• 误用乘法运算符*生成多组结果：JS中字符串与数字相乘时会尝试将字符串转为数值，颜色格式字符串无法转为有效数字，直接返回NaN；数组与数字相乘同样会触发隐式类型转换，无法得到预期的多元素结果。
• 参数匹配错误：需求约定HEX类型的入参值为'hex'，但代码分支判断写的是'hexa'，传入合规入参时无法走到对应生成逻辑。
• HEX颜色生成逻辑错误：randomHex初始化为数组却用+=做字符串拼接，生成的内容没有加HEX颜色必需的#前缀，外层多余包裹数组的写法无实际作用。
• 缺少循环生成逻辑：无论传入的数量n是多少，现有代码仅生成1个颜色值，没有按指定数量循环生成的逻辑。

分支写法选择：if/else和switch都可实现类型判断，当前逻辑分支少，两种写法的可读性、性能无明显差异，按需选择即可。

修正后可运行代码 #

function generateColors(type, n) {
  const quantity = Number(n)
  // 入参合法性校验
  if (isNaN(quantity) || quantity < 1) {
    console.log('数量参数不合法')
    return []
  }
  const result = []

  if (type === 'rgb') {
    for (let i = 0; i < quantity; i++) {
      const num = Math.round(0xffffff * Math.random())
      const r = num >> 16
      const g = (num >> 8) & 255
      const b = num & 255
      result.push(`rgb(${r}, ${g}, ${b})`)
    }
    return result
  } else if (type === 'hex') {
    const hexDigits = '0123456789ABCDEF'
    for (let i = 0; i < quantity; i++) {
      let randomHex = '#'
      for (let j = 0; j < 6; j++) {
        randomHex += hexDigits.charAt(Math.floor(Math.random() * hexDigits.length))
      }
      result.push(randomHex)
    }
    return result
  } else {
    console.log('type not applicable')
    return []
  }
}

// 测试示例
console.log(generateColors('rgb', 3)) // 输出示例：['rgb(123, 45, 67)', 'rgb(89, 210, 3)', 'rgb(55, 128, 200)']
console.log(generateColors('hex', 3)) // 输出示例：['#A1B2C3', '#FF0012', '#3D5E7F']

逻辑说明 #

• 统一用数组存储生成的多个颜色值，循环指定次数每次生成1个颜色推入数组，最后返回数组，从根源避免隐式类型转换导致的NaN问题
• 修正HEX类型的判断值，和需求约定的入参规则保持一致
• 增加入参合法性校验，传入非数字、小于1的数量时提前返回
• HEX颜色生成时初始值设为#，循环6次拼接色值，符合标准HEX颜色格式
• RGB分支位运算部分补充括号，避免运算符优先级导致的计算偏差

内容的提问来源于stack exchange，提问作者ianh22