JavaScript 变量

变量的概念

变量是用于存储数据值的容器。在 JavaScript 中，变量可以存储各种类型的数据，如数字、字符串、布尔值、对象等。

变量声明

JavaScript 中有三种声明变量的方式：

1. var

• 作用域：函数作用域
• 特性：
  • 可以重复声明
  • 可以被重新赋值
  • 存在变量提升

var x = 5;
var x = 10; // 允许重复声明
x = 15; // 允许重新赋值
console.log(x); // 输出: 15

2. let

• 作用域：块级作用域
• 特性：
  • 不可以重复声明
  • 可以被重新赋值
  • 不存在变量提升

let x = 5;
// let x = 10; // 错误：不允许重复声明
x = 15; // 允许重新赋值
console.log(x); // 输出: 15

3. const

• 作用域：块级作用域
• 特性：
  • 不可以重复声明
  • 不可以被重新赋值
  • 不存在变量提升
  • 必须在声明时初始化

const x = 5;
// const x = 10; // 错误：不允许重复声明
// x = 15; // 错误：不允许重新赋值
console.log(x); // 输出: 5

变量的命名规则

JavaScript 变量的命名必须遵循以下规则：

1. 首字符：必须是字母、下划线 (_) 或美元符号 ($)
2. 后续字符：可以是字母、数字、下划线或美元符号
3. 大小写敏感：name 和 Name 是不同的变量
4. 保留关键字：不能使用 JavaScript 保留关键字作为变量名

合法的变量名

let name = "John";
let _age = 30;
let $salary = 5000;
let firstName = "John";
let lastName = "Doe";
let user123 = "John";

非法的变量名

// 错误：以数字开头
let 123user = 'John';

// 错误：包含空格
let user name = 'John';

// 错误：包含特殊字符
let user-name = 'John';

// 错误：使用保留关键字
let var = 'John';

变量的作用域

1. 全局作用域

• 在函数外部声明的变量
• 可以在代码的任何地方访问

let globalVar = "Global";

function myFunction() {
  console.log(globalVar); // 可以访问全局变量
}

myFunction(); // 输出: Global
console.log(globalVar); // 可以访问全局变量

2. 函数作用域

• 在函数内部使用 var 声明的变量
• 只能在函数内部访问

function myFunction() {
  var functionVar = "Function";
  console.log(functionVar); // 可以访问函数变量
}

myFunction(); // 输出: Function
// console.log(functionVar); // 错误：无法访问函数变量

3. 块级作用域

• 在代码块内部使用 let 或 const 声明的变量
• 只能在代码块内部访问

if (true) {
  let blockVar = "Block";
  const blockConst = "Block Const";
  console.log(blockVar); // 可以访问块级变量
  console.log(blockConst); // 可以访问块级常量
}

// console.log(blockVar); // 错误：无法访问块级变量
// console.log(blockConst); // 错误：无法访问块级常量

变量提升

var 的变量提升

使用 var 声明的变量会被提升到作用域的顶部：

console.log(x); // 输出: undefined
var x = 5;
console.log(x); // 输出: 5

// 上面的代码相当于
var x;
console.log(x); // 输出: undefined
x = 5;
console.log(x); // 输出: 5

let 和 const 的暂时性死区

使用 let 或 const 声明的变量不存在变量提升，在声明之前访问会导致错误：

// console.log(x); // 错误：Cannot access 'x' before initialization
let x = 5;
console.log(x); // 输出: 5

// console.log(y); // 错误：Cannot access 'y' before initialization
const y = 10;
console.log(y); // 输出: 10

变量的解构赋值

数组解构

const [a, b, c] = [1, 2, 3];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3

// 跳过元素
const [x, , z] = [1, 2, 3];
console.log(x); // 输出: 1
console.log(z); // 输出: 3

// 默认值
const [p, q = 5] = [1];
console.log(p); // 输出: 1
console.log(q); // 输出: 5

对象解构

const { name, age } = { name: "John", age: 30 };
console.log(name); // 输出: John
console.log(age); // 输出: 30

// 重命名变量
const { name: userName, age: userAge } = { name: "John", age: 30 };
console.log(userName); // 输出: John
console.log(userAge); // 输出: 30

// 默认值
const { city = "New York" } = { name: "John", age: 30 };
console.log(city); // 输出: New York

变量的最佳实践

1. 使用 let 和 const，避免使用 var

• const 用于声明不会改变的值
• let 用于声明可能会改变的值
• 避免使用 var，因为它可能导致作用域问题

2. 变量命名规范

• 使用驼峰命名法：firstName、lastName
• 变量名应该具有描述性：userName 而不是 un
• 常量使用大写字母和下划线：MAX_AGE、API_URL

3. 初始化变量

在声明变量时最好初始化，避免使用未初始化的变量：

// 好的做法
let name = "";
let age = 0;
const PI = 3.14159;

// 不好的做法
let name;
let age;

4. 避免全局变量

尽量避免使用全局变量，以减少命名冲突和副作用：

// 不好的做法
let globalVar = "Global";

// 好的做法
function myFunction() {
  let localVar = "Local";
  console.log(localVar);
}

5. 使用解构赋值

使用解构赋值可以使代码更简洁：

// 好的做法
const { name, age, city } = user;

// 不好的做法
const name = user.name;
const age = user.age;
const city = user.city;

小结

变量是 JavaScript 中存储数据的基本单位，理解变量的声明方式、作用域和命名规则是学习 JavaScript 的基础。在现代 JavaScript 开发中，推荐使用 let 和 const 来声明变量，避免使用 var。同时，应该遵循变量命名规范，尽量减少全局变量的使用，以提高代码的可读性和可维护性。