4
0
0
JavaScript变量
2026-10-08
2026-10-08
什么是变量
变量是编程中用于存储数据的命名容器。可以将变量想象成一个贴有标签的盒子：
- 变量名就是盒子上的标签
- 变量值就是盒子里存放的内容
特点：
- 变量必须先声明后使用
- 变量可以存储不同类型的数据（数字、字符串、布尔值等）
- 变量的值可以改变（
let声明的变量） - 通过变量名来访问和操作数据
示例：
let message = "Hello"; // 声明一个变量message，存储字符串"Hello"
console.log(message); // 使用变量，输出: Hello
message = "World"; // 修改变量的值
console.log(message); // 输出: World
定义变量的三种方式
JavaScript 有三种声明变量的方式：
| 方式 | 特点 | 示例 |
|---|---|---|
var |
传统方式，函数作用域，存在变量提升（现代开发中已不建议使用） | var x = 10; |
let |
块级作用域，不允许重复声明，不存在变量提升（ES6 新增） | let y = 20; |
const |
块级作用域，声明时必须初始化且不能重新赋值（ES6 新增） | const PI = 3.14159; |
var
var age = 25; // 声明并初始化
var name; // 声明但不初始化（默认值undefined）
name = "张三"; // 后续赋值
特点：
- 作用域为函数作用域或全局作用域（直接写到 script 标签中会自动挂载到 window 对象上）
- 存在变量提升（可以在声明前访问，值为 undefined）
- 可以重复声明
函数作用域可以这样理解：
<script>
function test(){
if(true){
var a = 10;
}
// 这是允许的。
console.log(a);
}
test();
</script>
全局的 var 变量会挂载到 window 对象上，可以测试一下：
<script>
var a = 100;
console.log(window.a); // 100
let b = 200;
console.log(window.b); // undefined
</script>
let
let count = 0; // 必须使用let声明
count = 1; // 可以重新赋值
// let count = 2; // 错误，不能重复声明
特点：
- 块级作用域：
{}内有效（直接写到 script 标签中不会自动挂载到 window 对象上） - 不存在变量提升（必须先声明后使用）
- 不能重复声明
块级作用域可以这样理解：
<script>
function test(){
if(true){
let a = 10;
}
// 这里是报错的。
console.log(a);
}
test();
</script>
const
const MAX_SIZE = 100; // 声明时必须初始化
// MAX_SIZE = 200; // 错误，不能重新赋值
const user = { name: "John" };
user.name = "Mike"; // 允许，因为对象内部属性可以修改
特点：
- 也是块级作用域：
{}内有效 - 必须声明时初始化
- 不能重新赋值
- 对于对象/数组，内容可以修改（不能修改的是绑定关系）
变量的赋值和使用
基本赋值
let a = 10; // 数字
let b = "文本"; // 字符串
let c = true; // 布尔值
let d = null; // 空值
多变量声明
let x = 1, y = 2, z = 3; // 一行声明多个变量
变量使用
let price = 100;
let quantity = 5;
let total = price * quantity; // 使用变量进行计算
console.log(total); // 输出: 500
变量重新赋值
let score = 80;
score = 90; // 合法（使用let声明）
score = score + 10; // 现在score是100
变量交换（ES6 方式）
ES6 的解构赋值：（以下是数组解构语法）
let first = "A", second = "B";
[first, second] = [second, first]; // 交换变量值
console.log(first, second); // 输出: B A
ES6（ECMAScript 2015）中的解构赋值（Destructuring Assignment） ，它的作用是从数组中快速提取值并赋值给变量，属于语法糖：
const [a, b] = [200, 300];
对象解构语法是用大括号：{}
let user = {
username: 'jack',
age: 20
}
let {username, age} = user;
console.log(username, age);
变量的作用域
变量的作用域指变量可被访问的范围，JavaScript 中变量有三种作用域：
全局作用域
在函数外部声明的变量
let globalVar = "我是全局变量"; // 全局变量
var globalVar2 = "我也是全局变量，我会自动挂载到window对象上";
function test() {
console.log(globalVar); // 可以访问
console.log(globalVar2); // 可以访问
console.log(window.globalVar2); // 可以访问
}
test();
函数作用域
使用var 声明的变量在函数内部有效
function myFunction() {
if(true){
// 函数作用域：虽然在if的分支大括号中，但是整个函数中都可以用。
var localVar = "局部变量";
}
console.log(localVar); // 可以访问
}
// console.log(localVar); // 错误，外部无法访问
块级作用域
使用let和const声明的变量在代码块{}内有效。var 不能声明块级作用域。
if (true) {
let blockVar = "块级变量";
console.log(blockVar); // 可以访问
}
// console.log(blockVar); // 错误，外部无法访问
var 无法定义块级作用域
| 声明方式 | 函数作用域 | 块级作用域 | 全局作用域 |
|---|---|---|---|
var |
✅ | ❌ | ✅ |
let |
✅ | ✅ | ✅ |
const |
✅ | ✅ | ✅ |
作用域链规则
- 内层作用域可以访问外层作用域的变量
- 外层作用域不能访问内层作用域的变量
- 相同作用域中不能重复声明
let/const变量
示例：
let outer = "外部";
function scopeTest() {
let inner = "内部";
console.log(outer); // 可以访问外部变量
}
scopeTest();
// console.log(inner); // 错误，无法访问函数内部变量
就近原则
当内层作用域声明了与外层同名的变量时：
let value = "全局";
function printValue() {
let value = "局部";
console.log(value); // 输出"局部"
}
printValue();
console.log(value); // 输出"全局"
隐式全局变量
在 JavaScript 中，如果在函数体内定义变量时没有使用 var、let 或 const 关键字，那么这个变量会被隐式创建为 全局变量，即使它是在函数内部定义的。
<script>
function greet(){
// 隐式全局变量
username = "jackson";
}
</script>
在 严格模式（ 'use strict' ） 下，直接给未声明的变量赋值会抛出 ReferenceError
<script>
// 使用严格模式
'use strict'
function greet(){
// 隐式全局变量
username = "jackson";
}
greet();
</script>
JavaScript 在非严格模式下允许隐式创建全局变量，这是语言早期设计的一个缺陷。严格模式和现代声明关键字（let/const）的引入，正是为了纠正这种行为，使代码更可预测和可维护。