变量声明规范

在JavaScript中，变量声明是代码的基础组成部分，合理的声明方式直接影响代码的可读性、维护性和性能。以下是常见的变量声明规范及实践细节。

使用const和let替代var

ES6引入的const和let解决了var的变量提升和块级作用域问题。优先使用const声明不可变变量，仅在需要重新赋值时使用let。

// 正确示例
const PI = 3.1415926;
let counter = 0;

// 错误示例
var oldVariable = 'deprecated';

避免隐式全局变量

未使用声明关键字直接赋值会创建全局变量，严格模式下会报错。

function leakExample() {
  globalVar = 'leaked'; // 污染全局作用域
}

变量命名规范

采用驼峰命名法，常量使用全大写加下划线。命名需具有描述性，避免单字符（循环变量除外）。

// 好的命名
const MAX_RETRIES = 3;
let currentUserRole = 'admin';

// 差的命名
const a = 5; // 无意义
let xyz = 'temp'; // 含义模糊

声明与初始化分离

复杂逻辑中建议先声明后赋值，数组/对象推荐使用字面量初始化。

// 声明与初始化分离
let config;
if (env === 'production') {
  config = { apiUrl: 'https://api.example.com' };
} else {
  config = { apiUrl: 'http://localhost:3000' };
}

// 数组/对象字面量
const emptyArray = [];
const emptyObj = {};

块级作用域实践

利用let和const的块级作用域特性，避免变量泄露。

// 块级作用域示例
function calculate(values) {
  if (values.length > 0) {
    const result = process(values);
    console.log(result); // 仅在if块内可用
  }
  // console.log(result); // ReferenceError
}

同一作用域下的声明合并

同一作用域的let或const声明可合并，但var存在重复声明风险。

// 合并声明
const API_KEY = '123',
      API_SECRET = '456';

// var的风险
var x = 1;
var x = 2; // 不会报错

暂时性死区注意事项

let/const存在暂时性死区（TDZ），声明前访问会报错。

console.log(tmp); // ReferenceError
let tmp = 'value';

解构赋值的声明规范

解构赋值时保持结构清晰，嵌套过深时建议分步解构。

// 对象解构
const { id, metadata: { createdAt } } = user;

// 数组解构
const [first, , third] = items;

// 复杂解构拆分
const { metadata } = user;
const { createdAt } = metadata;

函数作用域的特殊情况

函数声明会提升，但函数表达式不会。箭头函数更适合作为回调。

// 函数声明提升
validFunc(); // 正常执行
function validFunc() {}

// 函数表达式
invalidFunc(); // TypeError
const invalidFunc = function() {};

动态类型转换的防范

声明时明确类型，避免隐式转换带来的意外行为。

// 显式类型
const count = Number(inputValue);
const hasItems = Boolean(items.length);

// 风险示例
const total = '100' + 50; // "10050"

模块化环境下的导出规范

模块顶层使用export时，优先采用命名导出而非默认导出。

// utils.js
export const formatDate = (date) => { /*...*/ };
export const parseString = (str) => { /*...*/ };

// 导入方
import { formatDate } from './utils';

循环中的变量声明

循环体内会产生新的块级作用域，let声明可避免闭包陷阱。

// 正确的循环声明
for (let i = 0; i < 10; i++) {
  setTimeout(() => console.log(i), 100); // 输出0-9
}

// var的问题
for (var j = 0; j < 10; j++) {
  setTimeout(() => console.log(j), 100); // 输出10个10
}

不可变数据的处理

使用Object.freeze或第三方库实现深层不可变。

const config = Object.freeze({
  timeout: 30,
  retries: 3
});
// config.timeout = 60; // TypeError（严格模式）

类型注解的补充说明

TypeScript环境下应添加类型注解，普通JS可通过JSDoc补充。

// TypeScript
const userName: string = 'Alice';

// JSDoc
/**
 * @type {number}
 */
const itemCount = 5;

变量声明的位置管理

避免在嵌套块中声明与外层同名的变量，易引发混淆。

function problematic() {
  let value = 1;
  if (condition) {
    let value = 2; // 遮蔽外层变量
    console.log(value); // 2
  }
  console.log(value); // 1
}

环境变量的特殊处理

浏览器全局变量和Node.js环境变量需明确声明来源。

// 浏览器环境
const { localStorage } = window;

// Node.js环境
const { env } = process;