如果将变量想象成一个“数据”的盒子,盒子上有一个唯一的标注盒子名字的贴纸。这样我们能更轻松地掌握“变量”的概念。
例如,变量 message 可以被想象成一个标有 "message" 的盒子,盒子里面的值为 "Hello!" :
我们可以在盒子内放入任何值。
并且,这个盒子的值,我们想改变多少次,就可以改变多少次:
let message;
message = 'Hello!';
message = 'World!'; // 值改变了
alert(message);
当值改变的时候,之前的数据就被从变量中删除了:
我们还可以声明两个变量,然后将其中一个变量的数据拷贝到另一个变量。
let hello = 'Hello world!';
let message;
// 将字符串 'Hello world' 从变量 hello 拷贝到 message
message = hello;
// 现在两个变量保存着相同的数据
alert(hello); // Hello world!
alert(message); // Hello world!
let — 现代的变量声明方式。
var — 老旧的变量声明方式。一般情况下,我们不会再使用它。
const — 类似于 let,但是变量的值无法被修改。
变量提升(Hoisting)是JavaScript中变量和函数声明在代码执行前被自动提升至其作用域顶部的行为。
核心概念
变量提升是JavaScript引擎在编译阶段对代码的预处理机制,具体表现为:
var声明的变量:声明部分被提升至作用域顶部,但赋值保留原位,因此未赋值时访问值为undefined
。
函数声明:整体(包括函数体)被提升,可在声明前调用。
let/const声明:不会被提升,存在暂时性死区(TDZ),声明前访问会触发ReferenceError
。
变量提升
console.log(a); // 输出undefined
var a = 1;
等效于
var a; // 声明提升
console.log(a);
a = 1; // 赋值保留原位
函数提升
foo(); // 正常执行
function foo() {}
而函数表达式(如var bar = function(){}
)仅变量名被提升,调用会报错。
关键区别与注意事项
var
的作用域为函数级,let/const
为块级。let/const
声明的变量在声明前不可访问。let/const
以避免变量提升的副作用。类型 | 语义 | 示例 |
---|---|---|
string | 字符串 | “Hello” "示例" |
number | 数字 | 42, 3.14 |
boolean | 布尔值 | true/false |
null | 空值 | nul1 |
undefined | 未定义 | undefined |
symbol | 符号(唯一) | Symbol('描述符号') |
bigint | 大整数 | 123n/BigInt(123) |
object | 对象 | { } |
JavaScript 中有八种基本的数据类型
七种原始数据类型(基本数据类型):
±(2(53次方)-1)
范围内的整数。以及一种非原始数据类型(复杂数据类型):
null
和 undefined
的区别及使用场景null
特殊的 null
值它构成了一个独立的类型,只包含 null
值:
let age = null;
相比较于其他编程语言,JavaScript 中的 null
不是一个“对不存在的 object
的引用”或者 “null 指针”。
JavaScript 中的 null
仅仅是一个代表“无”、“空”或“值未知”的特殊值。
上面的代码表示 age
是未知的。
undefined
特殊值 undefined
和 null
一样自成类型。
undefined
的含义是 未被赋值的。
如果一个变量已被声明,但未被赋值,那么它的值就是 undefined
:
let age;
alert(age); // 弹出 "undefined"
从技术上讲,可以显式地将 undefined
赋值给变量:
let age = 100;
// 将值修改为 undefined
age = undefined;
alert(age); // "undefined"
但是不建议这样做。通常,使用 null
将一个“空”或者“未知”的值写入变量中,而 undefined
则保留作为未进行初始化的事物的默认初始值。