JavaScript变量

在本章节中，我们将学习JavaScript变量的相关知识，包括变量的声明、赋值、命名规则和作用域等。

1. 什么是变量？

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

变量的使用包括两个步骤：

  1. 声明变量（创建变量）
  2. 赋值（给变量存储数据）

2. 变量声明

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

2.1 使用var声明变量

var是JavaScript最早的变量声明方式，在所有JavaScript版本中都支持。

var name;
var age;

2.2 使用let声明变量

let是ES6（2015）引入的变量声明方式，具有块级作用域。

let name;
let age;

2.3 使用const声明常量

const也是ES6引入的，用于声明常量，一旦赋值就不能再修改。

const PI = 3.14;
const MAX_VALUE = 100;

3. 变量赋值

声明变量后，可以使用赋值运算符=给变量赋值。

// 先声明后赋值
let name;
name = "张三";

let age;
age = 18;

// 声明的同时赋值
let city = "北京";
const PI = 3.14;

// 同时声明多个变量
let a = 1, b = 2, c = 3;

4. 变量命名规则

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

  1. 变量名只能包含字母、数字、下划线（_）和美元符号（$）
  2. 变量名不能以数字开头
  3. 变量名区分大小写（name和Name是不同的变量）
  4. 不能使用JavaScript关键字和保留字作为变量名
  5. 变量名应该具有描述性，便于理解

4.1 JavaScript关键字和保留字

以下是一些常见的JavaScript关键字和保留字，不能作为变量名：

break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, finally, for, function, if, import, in, instanceof, new, return, super, switch, this, throw, try, typeof, var, void, while, with, yield

4.2 变量命名规范

虽然不是必须的，但建议遵循以下命名规范：

  • 使用驼峰命名法：第一个单词首字母小写，后面单词首字母大写，如firstName、userAge
  • 变量名应该清晰、简洁，如count、totalPrice
  • 避免使用单个字母作为变量名，除非是在循环中（如i、j）

5. 变量的数据类型

JavaScript是动态类型语言，变量的类型可以在运行时改变。

let x = 10; // x是数字类型
x = "Hello"; // x现在是字符串类型
x = true; // x现在是布尔类型

JavaScript的基本数据类型包括：

  • Number（数字）
  • String（字符串）
  • Boolean（布尔值）
  • undefined（未定义）
  • null（空值）
  • Symbol（符号，ES6新增）
  • BigInt（大整数，ES11新增）

引用数据类型包括：

  • Object（对象）
  • Array（数组）
  • Function（函数）
  • Date（日期）
  • RegExp（正则表达式）

6. var、let和const的区别

特性 var let const
作用域 函数作用域 块级作用域 块级作用域
变量提升 支持 不支持 不支持
重复声明 允许 不允许 不允许
修改值 允许 允许 不允许
必须初始化 否 否 是

6.1 作用域

  • var声明的变量具有函数作用域，只在声明它的函数内有效
  • let和const声明的变量具有块级作用域，在声明它的块（如{}）内有效
function test() {
    if (true) {
        var x = 10; // 函数作用域
        let y = 20; // 块级作用域
        const z = 30; // 块级作用域
    }
    console.log(x); // 10，x在函数内可见
    console.log(y); // 报错，y只在if块内可见
    console.log(z); // 报错，z只在if块内可见
}

6.2 变量提升

  • var声明的变量会被提升到函数顶部
  • let和const声明的变量不会被提升
console.log(x); // undefined，var声明的变量被提升
var x = 10;

console.log(y); // 报错，let声明的变量不会被提升
let y = 20;

6.3 重复声明

  • var允许重复声明同一变量
  • let和const不允许重复声明同一变量
var x = 10;
var x = 20; // 允许，x的值变为20

let y = 10;
let y = 20; // 报错，不允许重复声明

6.4 修改值

  • var和let声明的变量可以修改值
  • const声明的变量不能修改值，但如果是对象或数组，可以修改其属性或元素
let x = 10;
x = 20; // 允许

const PI = 3.14;
PI = 3.14159; // 报错，不能修改常量值

const person = { name: "张三" };
person.name = "李四"; // 允许，修改对象属性
person.age = 18; // 允许，添加对象属性

const numbers = [1, 2, 3];
numbers.push(4); // 允许，修改数组元素

7. 变量的使用示例

7.1 计算两个数的和

let num1 = 10;
let num2 = 20;
let sum = num1 + num2;
console.log("和为：" + sum); // 输出：和为：30

7.2 交换两个变量的值

let a = 10;
let b = 20;
let temp = a;
a = b;
b = temp;
console.log("a = " + a + ", b = " + b); // 输出：a = 20, b = 10

7.3 使用模板字符串

let name = "张三";
let age = 18;
let message = `我叫${name}，今年${age}岁。`;
console.log(message); // 输出：我叫张三，今年18岁。

8. 常见问题解答

Q: 什么时候使用var、let和const？

A: 建议优先使用const，其次是let，尽量避免使用var。

  • 当变量的值不会改变时，使用const
  • 当变量的值需要改变时，使用let
  • 避免使用var，因为它可能导致作用域问题

Q: 为什么const声明的对象可以修改属性？

A: const声明的是常量，它保证的是变量的引用地址不变，而不是对象或数组的内容不变。

Q: 什么是变量提升？

A: 变量提升是指JavaScript引擎在执行代码之前，将变量声明提升到当前作用域的顶部的行为。

Q: 未声明的变量直接赋值会发生什么？

A: 在非严格模式下，未声明的变量直接赋值会成为全局变量；在严格模式下，会报错。

9. 练习项目

  1. 创建一个HTML文件，包含以下内容：

    • 三个输入框，分别用于输入姓名、年龄和城市
    • 一个按钮
    • JavaScript代码，点击按钮时获取输入框的值，然后显示一个问候语

  2. 使用let声明变量，存储输入框的值

  3. 使用模板字符串拼接问候语

  4. 在浏览器中打开文件，验证点击按钮的效果

10. 小结

  • 变量是用于存储数据的容器
  • JavaScript有三种声明变量的方式：var、let和const
  • let和const具有块级作用域，var具有函数作用域
  • 建议优先使用const，其次是let，尽量避免使用var
  • 变量命名要遵循规则和规范
  • JavaScript是动态类型语言，变量的类型可以在运行时改变

在下一章节中，我们将学习JavaScript数据类型的详细知识。

« 上一篇 JavaScript简介 下一篇 » JavaScript数据类型
↑