JavaScript 最佳实践

掌握所有知识点后，这一篇总结编码规范和常见陷阱，帮你写出干净、可靠、可维护的 JavaScript 代码。

1. 变量声明

javascript

// ✅ 默认使用 const
const MAX_SIZE = 100;
const user = { name: '张三' };

// ✅ 需要重新赋值时使用 let
let count = 0;
count++;

// ❌ 永远不要用 var
var x = 10; // 作用域混乱、可重复声明

2. 命名约定

javascript

// ✅ 变量和函数：驼峰命名（camelCase）
const userName = '张三';
function getUserById(id) {}

// ✅ 类和构造函数：帕斯卡命名（PascalCase）
class UserManager {}
class ShoppingCart {}

// ✅ 常量：全大写+下划线
const API_BASE_URL = 'https://api.example.com';
const MAX_RETRY_COUNT = 3;

// ✅ 布尔变量：is/has/can 开头
const isLoading = true;
const hasPermission = false;
const canEdit = true;

// ✅ 事件处理函数：handle + 事件名
function handleClick() {}
function handleSubmit() {}

3. 函数设计

javascript

// ✅ 一个函数只做一件事
function validateEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

// ✅ 提前返回，减少嵌套
function getDiscount(user) {
  if (!user) return 0;
  if (!user.isVip) return 0.1;
  if (user.years >= 5) return 0.3;
  return 0.2;
}

// ✅ 纯函数优先——相同输入始终产生相同输出，无副作用
function add(a, b) {
  return a + b; // 不修改外部变量
}

// ❌ 参数过多（建议不超过 3 个，超出用对象）
function createUser(name, email, age, city, role, active) {}
// ✅
function createUser({ name, email, age, city, role, active }) {}

4. 布尔比较

javascript

// ✅ 使用 === 而非 ==
if (value === 0) {}
if (value !== null) {}

// ✅ 利用 truthy/falsy 简化判断
if (name) {}        // name 非空字符串
if (items.length) {} // 数组非空
if (user) {}        // user 不是 null/undefined

// ❌ 不必要的比较
if (isValid === true) {} // 写成 if (isValid) {}
if (name !== '') {}      // 写成 if (name) {}

5. 常见陷阱

陷阱	说明	解决
`==` 类型转换	`0 == ''` 为 `true`	始终使用 `===`
`typeof null` 返回 `"object"`	历史遗留 bug	用 `value === null`
`NaN !== NaN`	NaN 不等于自身	用 `Number.isNaN()`
`0.1 + 0.2 !== 0.3`	浮点精度	用 `toFixed()` 或整数运算
`sort()` 默认字符串排序	`[3, 1, 10].sort()` → `[1, 10, 3]`	传入比较函数 `(a,b) => a-b`
`this` 在回调中丢失	箭头函数不绑定自己的 this	需要动态 this 时用普通函数
`for...in` 遍历数组	会遍历原型链属性	数组用 `for...of`；遍历对象属性时 `for...in` 仍适用
`const arr = []` 可 push	const 保护的是绑定，不是内容	需要完全不可变用 `Object.freeze()`

6. DOM 操作性能

javascript

// ❌ 循环中频繁操作 DOM
items.forEach(item => {
  container.innerHTML += `<li>${item}</li>`; // 每次循环触发重排
});

// ✅ 批量构建后在一次性插入
const fragment = document.createDocumentFragment();
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  fragment.appendChild(li);
});
container.appendChild(fragment);

7. 使用严格模式

模块（type="module"）默认就是严格模式。如果写的是普通脚本，加上 'use strict'：

javascript

'use strict';

// 未声明的变量会报错（而不是悄悄创建全局变量）
x = 10; // ❌ ReferenceError: x is not defined

8. 错误处理原则

可预期的错误要处理（网络请求、用户输入、JSON 解析）
不应吞掉错误——至少记录日志
给用户友好的反馈，而非显示原始错误信息
异步操作必须有错误处理（.catch() 或 try...catch）

9. 控制台调试指南

javascript

// 用 console 方法分级输出
console.log('调试信息');
console.warn('可能有问题的警告');
console.error('出错了！');

// 打印对象时用逗号而非字符串拼接（保留可展开的对象引用）
console.log('用户信息：', user); // ✅
console.log('用户信息：' + JSON.stringify(user)); // ❌ 看不清结构

10. 继续学习

完成本教程后，你已经掌握了 JavaScript 的核心能力——变量、数据类型、运算符、控制流、函数、对象、DOM 操作、事件处理、异步编程和模块化。

建议下一步：

项目实践 — 用 HTML + CSS + JavaScript 完成一个完整的 Todo 应用或图片画廊
TypeScript — 为 JavaScript 添加类型系统，提前发现错误，提升大型项目的可维护性
框架学习 — React、Vue 等框架极大简化了复杂的 UI 开发
Node.js — 将 JavaScript 从浏览器扩展到服务器端

JavaScript 最佳实践

1. 变量声明

2. 命名约定

3. 函数设计

4. 布尔比较

5. 常见陷阱

6. DOM 操作性能

7. 使用严格模式

8. 错误处理原则

9. 控制台调试指南

10. 继续学习

推荐资源