如何验证十六进制颜色数组并剔除错误项，格式错误则重置为空数组？

你需要升级颜色数组的校验逻辑，具体要求如下：

• 除了确保数组不为null/undefined，还要校验每个元素是仅以#开头的6位十六进制颜色，不符合规则的直接剔除，继续检查下一项
• 若localStorage存储的字符串格式错误、JSON解析失败，或者校验过程出现异常，直接将数组重置为空

示例参考 #

正确的颜色数组：

["#0283fb","#35363a","#f6383a","#9129c8","#38bdf8","#ded8d8"]

错误的颜色数组（包含格式错误项）：

["#028s3fb","#325363a","#f64383a","9129c8","#13/12sc","#ded8d8"]

实现代码 #

let colorsArray = [];
try {
  // 读取并尝试解析localStorage中的数据
  const storedData = localStorage.getItem("colorsArray");
  const parsedData = JSON.parse(storedData ?? "[]");
  
  // 先确认解析结果是数组类型
  if (Array.isArray(parsedData)) {
    // 过滤出符合规则的颜色项：字符串类型 + 匹配6位十六进制格式
    colorsArray = parsedData.filter(color => {
      return typeof color === 'string' && /^#[0-9a-fA-F]{6}$/.test(color);
    });
  }
} catch (error) {
  // 任何异常（解析失败、类型错误等）都重置为空数组
  colorsArray = [];
}

关键逻辑说明 #

• 用try-catch包裹JSON解析过程，避免存储的字符串格式错误导致代码崩溃
• 先判断解析后的数据是否为数组，防止存储的不是数组类型
• 用filter结合正则表达式/^#[0-9a-fA-F]{6}$/过滤有效项：
  • ^#：必须以#开头
  • [0-9a-fA-F]{6}：后面紧跟6位十六进制字符（大小写都支持）
  • 同时判断元素是字符串类型，避免非字符串项干扰
• 任何异常情况都会触发catch块，直接将数组重置为空

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