一、大家好、早上好、中午好、晚上好

在当今的互联网时代，前端开发扮演着至关重要的角色。无论是网页应用还是移动应用，前端都是用户直接交互的界面。然而，前端开发过程中常常会遇到各种错误，这些错误不仅影响用户体验，还可能导致数据丢失或安全问题。因此，了解前端常见的报错类型及其规避方法对于每一位前端开发者来说都至关重要。本文旨在通过分析前端开发中的常见错误，并提供有效的解决方案，帮助开发者提升代码质量和用户体验。

二、 概述

在调试前端代码时，我们可能会遇到以下几种错误类型：

语法错误（Syntax Error）：当代码不符合编程语言的语法规则时，会发生此类错误。常见的情况包括单词拼写错误、遗漏必要的分号、括号不匹配等。

类型错误（Type Error）：这类错误发生在代码尝试使用不适当的数据类型或对不存在的对象进行操作时。例如，试图将非函数类型的变量当作函数调用，或者尝试访问未定义的变量。

引用错误（Reference Error）：当代码尝试引用一个不存在的变量或函数时，会出现引用错误。比如使用未声明的变量或调用未定义的函数。

范围错误（Range Error）：当代码的操作超出了有效范围时，会产生范围错误。例如，访问超出数组界限的索引或递归调用深度过大。

访问错误（Access Error）：这类错误发生在代码试图访问受限制的资源时，如尝试进行跨域资源访问或使用非法的文件路径。

异步错误（Async Error）：在执行异步操作时可能出现的错误，比如Promise被拒绝处理或网络请求未能成功完成。

标记错误（Markup Error）：在HTML或XML代码中，如果存在不正确的标记或结构问题，就会发生标记错误。例如，遗漏闭合标签或错误使用属性。

网络错误（Network Error）：与网络相关的错误，包括请求超时、服务器端错误等情况。

性能错误（Performance Error）：当代码执行效率低下，导致程序运行缓慢或资源消耗过多时，会产生性能错误，如频繁的页面重绘或大量内存占用。

安全错误（Security Error）：涉及安全问题的错误，如遭受跨站点脚本攻击（XSS）或跨站请求伪造（CSRF）等安全漏洞。

三、 错误规避（1）语法错误（Syntax Error）

就是一些js语法层面的错误：

命名规则：

a. 变量名必须以字母（包括英文字母、下划线_、美元符号$）、中文汉字或Unicode字符开头。

const username = 'xiaoming';
const _username = 'xiaoming';
const $username = 'xiaoming';
const 用户名 = ‘xiaoming'; // 不建议

b.变量名不能以数字开头。

const 1username = 'xiaoming';
// Uncaught SyntaxError: Invalid or unexpected token

c. 变量名中不能包含空格或特殊字符（如!, @, #, %, ^, &, *, (, ), -, +, =, {, }, [, ], |, , :, ;, ", ', , /, ?）。

const !username = 'xiaoming';
// Uncaught SyntaxError: Unexpected token '!'

d. 变量名是区分大小写的，这意味着userName和username是两个不同的变量。

const userName = 'xiao';
const username = 'ming';

e. 关键字或者保留字不能作为变量名：for,while,this等

const class = 'xiaoming';
// Uncaught SyntaxError: Unexpected token 'class'Understand this error

f. 还有一些粗心导致的问题：少’（‘、少’{‘等

console.log('xiaoming';
// Uncaught SyntaxError: missing ) after argument list
let message = 'This is a string
console.log(message); // 缺少闭合引号

2. 命名规范：(不会报错）

a. 使用有意义且易于理解的名称，避免使用缩写或难以理解的字符组合。

b. 采用驼峰命名法（camelCase）是一个常见的JavaScript命名约定，即第一个单词的首字母小写，后续单词的首字母大写。

c. 常量通常使用全大写字母命名，单词之间可以用下划线分隔（如MAX_COUNT）。

d. 使用名词来命名变量，因为变量通常是用来存储数据的。

e. 如果变量用于存储函数，可以使用动词开头，表明这是一个动作。

（2）类型错误（Type Error）

类型错误通常发生在执行特定操作时，变量或参数不是期望的数据类型。这个报错应该是很常见的报错

let num = 10;
num.toUpperCase(); // TypeError: num.toUpperCase is not a function
let obj = {};
obj.doSomething(); // TypeError: obj.doSomething is not a function
let str = "xiao";
str.push("ming"); // TypeError: str.push is not a function

（3）引用错误（Reference Error）

引用错误发生在变量尚未声明或已经声明但没有正确初始化时。这个错误非常常见

console.log(username); // ReferenceError: username is not defined

（4）范围错误（Range Error）

范围错误发生在数值超出其合法范围时。

new Array(-1); // RangeError: Invalid array length
function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}
factorial(Infinity); 
// RangeError: Maximum call stack size exceeded

（5）访问错误（Access Error）

访问错误通常与Web API有关，当尝试访问不允许的资源时发生。

// 尝试读取一个不允许访问的本地文件
fetch('/path/to/forbidden/file'); // DOMException: Failed to fetch

（6）异步错误（Async Error）

异步错误通常发生在处理异步操作时，例如Promise或async/await。

new Promise((resolve, reject) => {
  reject(new Error("Async error occurred"));
}).then(() => {}).catch(e => console.error(e)); // Error: Async error occurred

（7）标记错误（Markup Error）

标记错误通常发生在HTML或XML代码中，不严格属于JavaScript错误类型，但可以影响JavaScript代码的执行。

This is a paragraph
This is a div

fetch('https://xxx.com/data')
  .then(response => response.json())
  .catch(error => console.error('Network Error:', error));

// 创建一个巨大的数组导致内存不足
let hugeArray = new Array(1000000000).fill('data');

// 尝试从HTTPS页面加载HTTP资源
const script = document.createElement('script');
script.src = 'http://insecure.com/script.js';
document.head.appendChild(script);

<link rel="stylesheet" type="text/css" href="style.css">