理解 JavaScript 中的变量

JavaScript 变量：入门指南

变量是 JavaScript 程序的基本构建块，用于存储和操作数据。无论您是新手还是经验丰富的开发者，理解变量及其特性都至关重要。

什么是 JavaScript 变量？

变量是存储程序中使用的信息的容器，可以理解为保存数字、文本或其他数据类型的存储空间。

JavaScript 变量的关键特性：

• JavaScript 是一种动态类型语言，这意味着变量的类型在运行时确定，无需显式声明类型。
• JavaScript 提供四种声明变量的方式：var、let、const以及隐式声明。

JavaScript 变量命名规范

变量命名需遵循以下规则：

1. 允许字符： 变量名只能包含字母 (a-z, A-Z)、数字 (0-9)、美元符号 ($) 和下划线 (_)。
   • 有效示例： name、data1、sum
2. 起始规则： 变量名不能以数字开头。
   • 无效示例： 1data、10name
3. 大小写敏感： result 和 Result 是不同的变量。
4. 避免关键字： 不要使用保留字 (如 let、return、const) 作为变量名。
5. 驼峰命名法： 使用驼峰命名法，例如 phoneNumber 而不是 phonenumber 或 phone_number。
6. 禁止连字符： 变量名中不允许使用连字符 (-)。
7. 语义化命名： 使用描述性名称，清晰表明变量存储的内容。
8. 避免单字母名： 除非必要 (例如循环变量)，否则避免使用单字母名称 (如 x, a)。

JavaScript 变量类型及声明方式

1. 隐式声明: JavaScript 允许直接赋值创建变量：

x = 5; // x 存储整数 5
y = 10; // y 存储整数 10
z = x + y; // z 存储 x 和 y 的和 (15)
console.log(z); // 输出: 15

2. var:

• 函数作用域或全局作用域。
• 已被 let 和 const 逐渐取代。

语法：

var variableName = value;

示例：

var numOne = 20;
var numTwo = 30;
var result = numOne + numTwo; // result = 50
console.log('result is:', result);

3. let:

• 块作用域。
• 允许修改变量值，但不能在同一作用域内重复声明。

语法：

let variableName = value;

示例：

let a = 10;
a = 15; // 允许修改值
console.log(a); // 输出: 15

// let a = 20; // 错误: 同一作用域内不能重复声明

4. const:

• 块作用域。
• 值不可修改或重新声明。

语法：

const variableName = value;

示例：

const pi = 3.14;
console.log(pi); // 输出: 3.14

// pi = 3.15; // 错误: 不能修改值

var、let 和 const 的区别

JavaScript 作用域

变量的作用域决定了其在程序中的可访问范围。

• 全局作用域： 在任何地方都可访问。

var globalVar = "我是全局变量";
console.log(globalVar); // 输出: 我是全局变量

• 局部作用域： 在函数内部声明，仅在函数内部可访问。

function showLocal() {
    var localVar = "我是局部变量";
    console.log(localVar);
}
showLocal(); // 输出: 我是局部变量
// console.log(localVar); // 错误: localVar 未定义

• 块作用域： 仅在声明它的代码块内可访问 (使用 let 和 const)。

if (true) {
    let blockVar = "我是块作用域变量";
    const blockConst = "我也是块作用域变量";
}
// console.log(blockVar, blockConst); // 错误: 在代码块外部不可访问

• 函数作用域： 特指 var 声明的变量。

重要提示：变量提升

• 使用 var 声明的变量会被提升到其作用域的顶部，但其值在提升前为 undefined。
• let 和 const 声明的变量也会被提升，但在声明前处于“暂时性死区 (TDZ)”。

示例：

console.log(a); // undefined，由于变量提升
var a = 10;

// console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

最佳实践

1. 对于不变的值使用 const。
2. 对于需要更新的变量使用 let。
3. 避免在现代 JavaScript 中使用 var。

常见面试问题

1. var、let 和 const 之间的区别是什么？
2. JavaScript 中变量的作用域是什么？
3. 用示例解释变量提升。
4. 可以为 const 声明的变量重新赋值吗？
5. 如果不使用 var、let 或 const 声明变量会发生什么？
6. 为什么推荐使用 let 和 const 而不是 var？
7. JavaScript 中的暂时性死区 (TDZ) 是什么？
8. 编写一个代码片段来演示 let 和 const 的块作用域。
9. JavaScript 中的动态类型是什么？
10. JavaScript 如何处理变量的重复声明？