JavaScript 编码风格

JavaScript 编码风格

良好的编码风格可以让代码更易于阅读、理解和维护。

---

1. 格式化

缩进

• 使用 2 个空格进行缩进，避免使用制表符。

  function sum(a, b) {
    return a + b;
  }
  

行长度

• 将每行代码限制在 80-100 个字符以内，尽量保持简洁。
  • 如果一行超过限制，可以通过分行使代码更具可读性。

分号

• 每个语句结束时始终添加分号。

  let user = 'John';
  console.log(user);
  

大括号

• 将大括号的起始位置放在同一行。

  if (isTrue) {
    console.log('True');
  }
  

空格

• 运算符两侧保留空格：

  let sum = a + b;
  

• 函数调用与括号之间不留空格：

  console.log('Hello');
  

---

2. 命名

变量和常量

• 变量使用驼峰命名法：let userName。

• 常量使用全大写下划线命名法：const MAX_USERS = 100。

• 尽量使用描述性的变量名，避免单字母变量（除非在循环中）。

  let userAge = 25; // 好
  let a = 25;      // 不推荐
  

函数

• 函数名应使用动词开头，描述其功能：

  function fetchData() {
    //...
  }
  

---

3. 引号

• 字符串使用单引号 '’'。如果字符串中包含单引号，则使用双引号 “”“。

  let greeting = 'Hello';
  let message = "It's a sunny day";
  

• 对于包含变量的字符串，优先使用模板字符串：

  let name = 'John';
  console.log(`Hello, ${name}`);
  

---

4. 函数

箭头函数

• 简单逻辑使用箭头函数：

  const add = (a, b) => a + b;
  

• 对于需要多行的复杂逻辑，使用大括号和 return：

  const multiply = (a, b) => {
    let result = a * b;
    return result;
  };
  

默认参数

• 为函数参数设置默认值：

  function greet(name = 'Guest') {
    console.log(`Hello, ${name}`);
  }
  

---

5. 对象与数组

对象属性

• 使用简写形式定义对象属性：

  let user = 'John';
  let age = 30;
  let person = { user, age };
  

解构赋值

• 使用解构提高代码的简洁性：

  let { user, age } = person;
  let [first, second] = [1, 2];
  

扩展运算符

• 使用扩展语法复制或扩展对象：

  let extended = { ...person, city: 'New York' };
  

• 对数组进行合并或克隆：

  let numbers = [1, 2, 3];
  let moreNumbers = [...numbers, 4, 5];
  

---

6. 条件语句

三元运算符

• 简短条件使用三元运算符：

  let status = isActive ? 'Active' : 'Inactive';
  

提前返回

• 使用提前返回减少嵌套：

  function check(user) {
    if (!user) return;
    console.log(user.name);
  }
  

---

7. 循环

• 对于可迭代对象，使用 for..of：

  for (let value of array) {
    console.log(value);
  }
  

• 对于对象，使用 Object.entries()：

  for (let [key, value] of Object.entries(obj)) {
    console.log(key, value);
  }
  

• 优先使用高阶函数，如 map、filter 和 reduce：

  let numbers = [1, 2, 3];
  let doubled = numbers.map(num => num * 2);
  

---

8. 注释

单行注释

• 将注释放在代码上方：

  // 获取用户数据
  let user = fetchUser();
  

多行注释

• 对于复杂逻辑，使用多行注释：

  /**
   * 从服务器获取用户数据。
   * @param {number} id - 用户 ID
   * @returns {Object}
   */
  function fetchUser(id) {
    //...
  }
  

• 避免无意义的注释：

  // 不推荐
  let a = 5; // 定义变量 a
  

---

9. 错误处理

Try-Catch

• 优雅地处理错误：

  try {
    let data = fetchData();
  } catch (error) {
    console.error('Error fetching data:', error);
  }
  

抛出错误

• 抛出具体的错误信息：

  if (!user) {
    throw new Error('User not found');
  }
  

• 避免过度依赖错误捕获，优先检查条件：

  if (Array.isArray(data)) {
    process(data);
  } else {
    console.error('Invalid data format');
  }
  

---

10. 工具

代码检查与格式化

• 使用 ESLint 强制执行编码规范。
• 使用 Prettier 保持代码格式一致。

版本控制

• 提交清晰、可读的代码，并撰写有意义的提交信息。
• 在代码合并前进行代码审查，确保代码质量。

---

遵循这些最佳实践将帮助您编写干净、可维护且高质量的 JavaScript 代码。