跳到主要内容

JavaScript 变量

什么是变量?

变量是存储数据值的容器。在JavaScript中,变量就像是一个装有数据的盒子,我们可以随时往里面存入数据、取出数据或者修改数据。

变量是任何编程语言的基础组成部分,它让我们能够暂时存储信息,以便在程序执行过程中使用。

提示

想象一下,变量就像是贴了标签的容器,标签就是变量名,而容器里面装的就是变量的值。

声明变量

在JavaScript中,有三种声明变量的方式:

  1. 使用var(较旧的方式)
  2. 使用let(ES6引入,推荐)
  3. 使用const(ES6引入,用于常量)

使用var声明变量

javascript
var userName = "小明";
var age = 18;
var isStudent = true;

console.log(userName); // 输出: 小明

使用let声明变量

javascript
let userName = "小明";
let age = 18;
let isStudent = true;

console.log(age); // 输出: 18

使用const声明常量

javascript
const PI = 3.14159;
const MAX_USERS = 100;

console.log(PI); // 输出: 3.14159
警告

使用const声明的变量不能被重新赋值,否则会报错。

变量命名规则

JavaScript变量的命名有以下规则:

  1. 变量名可以包含字母、数字、下划线(_)和美元符号($)
  2. 变量名必须以字母、下划线或美元符号开头,不能以数字开头
  3. 变量名区分大小写(userNameusername是两个不同的变量)
  4. 不能使用JavaScript的关键字作为变量名(如varletconstfunction等)
javascript
// 有效的变量名
let userName = "小明";
let $price = 29.99;
let _counter = 0;
let firstName123 = "张";

// 无效的变量名
// let 123name = "错误"; // 不能以数字开头
// let var = "错误"; // 不能使用关键字

变量数据类型

JavaScript是一种动态类型语言,这意味着我们不需要在声明变量时指定类型。JavaScript中有几种基本的数据类型:

javascript
// 数字类型
let age = 25;
let price = 99.99;

// 字符串类型
let name = "JavaScript编程";
let greeting = 'Hello World';

// 布尔类型
let isValid = true;
let hasPermission = false;

// 未定义类型
let unknownValue;
console.log(unknownValue); // 输出: undefined

// 空值
let emptyValue = null;

// 对象类型
let person = {
name: "小明",
age: 18
};

// 数组类型
let colors = ["red", "green", "blue"];

变量赋值

我们可以在声明变量时给它赋初始值,也可以先声明后赋值:

javascript
// 声明并赋值
let count = 10;

// 先声明后赋值
let total;
total = 100;

// 修改变量值
count = 20;
console.log(count); // 输出: 20

let vs var vs const

这三种声明变量的方式有一些重要的区别:

作用域

javascript
// var的作用域是函数作用域
function testVar() {
var x = 10;
if (true) {
var x = 20; // 同一个变量
console.log(x); // 输出: 20
}
console.log(x); // 输出: 20
}

// let和const的作用域是块作用域
function testLet() {
let y = 10;
if (true) {
let y = 20; // 不同的变量
console.log(y); // 输出: 20
}
console.log(y); // 输出: 10
}

重复声明

javascript
// var允许重复声明
var user = "小明";
var user = "小红"; // 有效,user被覆盖为"小红"

// let和const不允许在同一作用域内重复声明
let age = 25;
// let age = 30; // 错误:不能重新声明块作用域变量'age'

提升

javascript
// var存在变量提升
console.log(x); // 输出: undefined (而不是报错)
var x = 5;

// let和const没有变量提升
// console.log(y); // 错误:在初始化之前不能访问'y'
let y = 10;
注意

推荐使用letconst而不是var,因为它们有更合理的作用域规则,能避免许多常见错误。

实际应用案例

1. 用户注册表单

javascript
// 保存用户输入的信息
const USERNAME_MIN_LENGTH = 3; // 常量,不会改变
let username = "coding123";
let email = "user@example.com";
let password = "securepass";
let isFormValid = false;

// 表单验证
if (username.length >= USERNAME_MIN_LENGTH) {
isFormValid = true;
console.log("用户名有效");
} else {
console.log("用户名至少需要" + USERNAME_MIN_LENGTH + "个字符");
}

2. 购物车计算

javascript
// 购物车项目
let item1Price = 99.99;
let item2Price = 149.99;
let quantity1 = 2;
let quantity2 = 1;

// 计算总价
let subtotal = (item1Price * quantity1) + (item2Price * quantity2);
const TAX_RATE = 0.08;
let taxAmount = subtotal * TAX_RATE;
let totalPrice = subtotal + taxAmount;

console.log("小计: ¥" + subtotal);
console.log("税额: ¥" + taxAmount);
console.log("总计: ¥" + totalPrice);

3. 计数器应用

javascript
let count = 0;
const MAX_COUNT = 10;

// 模拟点击增加按钮
function increment() {
if (count < MAX_COUNT) {
count++;
console.log("当前计数: " + count);
} else {
console.log("已达到最大计数!");
}
}

// 模拟点击减少按钮
function decrement() {
if (count > 0) {
count--;
console.log("当前计数: " + count);
} else {
console.log("已达最小计数!");
}
}

// 测试
increment(); // 当前计数: 1
increment(); // 当前计数: 2
decrement(); // 当前计数: 1

变量的生命周期

变量的生命周期取决于它的作用域:

总结

变量是JavaScript编程的基本构建块。通过正确使用变量,我们可以:

  • 存储和操作数据
  • 跟踪应用状态
  • 在不同代码部分之间共享信息

记住以下关键点:

  1. 使用let声明可变变量,使用const声明常量
  2. 遵循命名规范,使用有意义的变量名
  3. 了解不同声明方式(var, let, const)的区别
  4. 理解变量作用域对程序执行的影响

练习

为了巩固所学知识,尝试完成以下练习:

  1. 声明三个变量:一个存储你的名字,一个存储你的年龄,一个存储你是否是学生(布尔值)。
  2. 创建一个计算器程序,声明两个数字变量和一个运算符变量,然后根据运算符执行相应的计算。
  3. 创建一个温度转换程序,声明一个摄氏温度变量,然后计算并输出对应的华氏温度。

延伸阅读

掌握了变量的基础知识后,你就可以继续学习更复杂的JavaScript概念了!