JavaScript | 变量详解：从基础到TypeScript进阶

zhangjiaoshou_

1251人浏览 · 2025-10-17 12:12:24

zhangjiaoshou_ · 2025-10-17 12:12:24 发布

JavaScript变量详解：从基础到TypeScript进阶

变量是编程世界的“数据容器”，是连接代码逻辑与实际数据的核心桥梁，学习变量的意义和重要性贯穿编程入门到进阶的全流程。首先，变量是存储和操作数据的基础——没有变量，代码无法保存用户输入（如表单信息）、计算中间结果（如购物车总价）或记录状态（如用户登录状态），就像没有容器就无法存放和整理生活中的物品；其次，变量的合理使用直接决定代码的可读性与可维护性，清晰的变量命名（如用userAge而非a）和规范的作用域管理，能让代码逻辑一目了然，避免后期维护时“看不懂自己写的代码”；更重要的是，变量是理解后续复杂概念的基石，无论是函数传参、对象属性、数组元素，还是异步操作中的数据传递，本质都是变量的延伸应用，只有扎实掌握变量的声明、类型、作用域等知识，才能顺畅理解编程中的逻辑流转，真正入门并学好JavaScript等编程语言。

JavaScript是一种解释型脚本语言，无需编译即可由浏览器或JavaScript引擎逐行解析执行，这让它能快速嵌入网页并实时运行；同时它是动态弱类型语言，变量类型无需预先声明，可随赋值自动转换（如"5" + 3会自动转为字符串拼接），带来高度灵活性的同时也需注意类型转换可能引发的逻辑问题。作为单线程语言，它通过事件循环机制处理异步操作，避免了多线程冲突；其面向对象基于原型链而非类（ES6后引入class语法糖，但本质仍是原型继承），支持动态为对象添加属性和方法。此外，它是多范式语言，既支持函数式编程（函数作为一等公民，可赋值、传参），也支持面向对象、命令式编程，这使得它既能胜任简单的网页交互，也能构建复杂的前端应用甚至后端服务（如Node.js），成为跨平台开发的重要工具。

在这里插入图片描述

一、JavaScript变量基础：什么是变量？

在JavaScript中，变量是用来存储数据的"容器"。你可以把它理解为一个贴了标签的盒子：

盒子本身是内存中的一块空间
标签就是变量名
盒子里装的东西就是变量的值

比如，我们可以创建一个"年龄"变量来存储你的年龄，一个"名字"变量来存储你的姓名。

如何创建变量？

在JavaScript中，创建变量有三种方式：var、let和const。

1. 使用`let`声明变量

let是现代JavaScript中最常用的声明变量的方式，它声明的变量可以被修改：

// 声明一个名为age的变量，并赋值为25
let age = 25;
console.log(age); // 输出: 25

// 修改变量的值
age = 26;
console.log(age); // 输出: 26


// 这就像你有一个标着"年龄"的盒子，今年放了25，明年可以换成26

2. 使用`const`声明常量

const用于声明不能被修改的变量（常量）：

// 声明一个名为birthYear的常量，并赋值为1998
const birthYear = 1998;
console.log(birthYear); // 输出: 1998

// 尝试修改常量的值会报错
// birthYear = 1999; // 这行代码会导致错误

// 生活场景类比：
// 这就像你的出生日期，一旦确定就不能改变，所以用const来存储

3. 使用`var`声明变量（旧方式）

var是JavaScript早期的变量声明方式，现在已不推荐使用，因为它存在一些设计缺陷：

// 声明一个名为score的变量
var score = 80;
console.log(score); // 输出: 80

// var的问题1: 可以重复声明
var score = 90;
console.log(score); // 输出: 90，不会报错

// var的问题2: 作用域问题
if (true) {
  var temp = "我是临时变量";
}
console.log(temp); // 输出: "我是临时变量"，本应只在if内部可见


// 这就像一个没有盖子的盒子，谁都可以随意打开和更换标签，容易造成混乱

最佳实践：现代JavaScript开发中，优先使用const，只有当你确定需要修改变量时才使用let，尽量避免使用var。

二、变量命名规则

给变量起名不能随心所欲，需要遵循一些规则：

只能包含字母、数字、下划线(_)和美元符号($)
不能以数字开头
不能使用JavaScript的关键字（如if、for、function等）
区分大小写（name和Name是两个不同的变量）
建议使用有意义的名称，让人一眼就知道变量的用途

// 正确的命名
let userName = "张三";
let userAge = 25;
let isStudent = true;

// 错误的命名
// let 123name = "李四"; // 不能以数字开头
// let my-name = "王五"; // 不能包含连字符
// let if = "条件"; // 不能使用关键字

// 推荐的命名风格
let productPrice = 99.9; // 小驼峰式命名（camelCase），JavaScript变量常用

以下是常见编程命名方式的对比表格，涵盖模式特征、适用场景、常见语言及优缺点：

命名方式	模式特征	常见使用语言/场景	优点	缺点
小驼峰命名法（camelCase）	第一个单词首字母小写，后续单词首字母大写例：`userName`、`getUserInfo`	JavaScript、Java、Python（变量/函数）、TypeScript（变量/函数）	无特殊字符，输入便捷；适合连续书写多个单词	开头小写，视觉上不如大驼峰突出；长命名时首尾区分度较低
大驼峰命名法（PascalCase）	所有单词首字母大写例：`UserName`、`UserInfo`、`LoginPage`	Java（类名）、C#、TypeScript（类/接口）、Python（类名）	视觉辨识度高，适合标识"实体"类结构	不适合短变量名，显得冗余
下划线命名法（snake_case）	全小写字母，单词间用下划线连接例：`user_name`、`max_value`	Python（部分场景）、C、C++、数据库字段名、配置项	单词分隔清晰，可读性强；适合全小写场景	下划线输入稍繁琐；在某些语言中不符合主流风格
烤肉串命名法（kebab-case）	全小写字母，单词间用连字符连接例：`user-name`、`login-page`	URL路径、HTML/CSS类名、文件名（部分场景）	符合URL规范；在前端样式中兼容性好	连字符在多数编程语言中不能用于变量名；输入需切换符号
常量命名法（UPPER_SNAKE_CASE）	全大写字母，单词间用下划线连接例：`MAX_AGE`、`DB_HOST`	几乎所有语言（常量）：Java、Python、JavaScript、C++	视觉上突出常量特性，易与变量区分	仅适用于常量，通用性差

补充说明：

命名方式的选择通常遵循语言社区的"约定俗成"，而非强制规则（除部分语言有语法限制，如连字符不能用于变量名）。
同一项目中应保持命名风格统一，例如：JavaScript 项目中，变量用小驼峰、类用大驼峰、常量用全大写下划线，这是行业主流实践。
数据库和配置文件更倾向于下划线命名，因为其对大小写不敏感的场景兼容性更好。

三、变量的数据类型

JavaScript中的变量可以存储不同类型的数据，主要分为两大类：基本类型和引用类型。

基本类型

字符串（String）：文本数据，用单引号或双引号包裹

let name = "张三";
let message = 'Hello, 世界';
let address = `北京市朝阳区`; // 模板字符串，可以换行和嵌入变量

// 生活场景：就像记事本上写的文字

数字（Number）：整数或浮点数

let age = 25; // 整数
let height = 1.75; // 浮点数
let temperature = -5; // 负数

// 生活场景：就像尺子上的刻度或温度计上的读数

布尔值（Boolean）：只有两个值：true（真）或false（假）

let isStudent = true;
let hasCar = false;
let isRainy = true;

// 生活场景：就像开关的开/关状态

空值（Null）：表示一个空值

let emptyValue = null;
let userAddress = null; // 表示用户还没有填写地址

// 生活场景：就像一个空盒子，明确知道它是空的

未定义（Undefined）：表示变量声明了但没有赋值

let unassignedVariable;
console.log(unassignedVariable); // 输出: undefined

// 生活场景：就像一个只有标签但还没放东西的盒子

在 JavaScript 中，null 和 undefined 是两个特殊的基本数据类型，都用来表示“无”或“空”的状态，但它们的含义、产生场景和使用方式有显著区别。下面从异同点和使用场景两方面详细说明：

一、相同点

都表示“空”状态：本质上都用来描述“没有值”的情况。

在布尔判断中均为 false：在条件语句中，null 和 undefined 都会被视为“假值”（falsy）。

if (null) { console.log("执行"); } // 不执行
if (undefined) { console.log("执行"); } // 不执行

均为基本数据类型：不属于对象、数组等引用类型。

二、不同点

维度	`undefined`	`null`
含义	表示“未定义”：本应存在的值暂时不存在	表示“空值”：故意设置的、明确的“无”状态
类型	`typeof undefined` 返回 `'undefined'`	`typeof null` 返回 `'object'`（历史 Bug）
自动赋值场景	变量声明后未赋值时，会自动获得 `undefined`	不会自动赋值，必须显式赋值才会出现
与自身的严格相等	`undefined === undefined` → `true`	`null === null` → `true`
与对方的比较	`undefined == null` → `true`（宽松相等）	`undefined === null` → `false`（严格不等）

三、使用场景区别

1. `undefined` 的典型场景

undefined 通常是 JavaScript 引擎“自动产生”的，而非开发者主动设置，用来表示“本应存在但尚未定义”的状态：

变量声明后未赋值：

let name;
console.log(name); // undefined（声明了但没给值）

函数参数未被传递：

function greet(name) {
  console.log(name); // 调用时未传参，输出 undefined
}
greet(); // 未传递参数

函数无返回值时的默认返回：

function add(a, b) {
  let sum = a + b; // 没有 return 语句
}
console.log(add(1, 2)); // undefined

访问对象不存在的属性：

const user = { name: "张三" };
console.log(user.age); // undefined（user 没有 age 属性）

2. `null` 的典型场景

null 是开发者主动设置的，用来表示“明确的空状态”，即“这里本应有值，但现在为空”：

表示“无结果”的返回值：比如查找元素未找到时，返回 null（DOM 操作中常见）：

const element = document.getElementById("不存在的ID");
console.log(element); // null（明确表示“没找到元素”）

显式清空变量的值：当需要主动释放变量的引用时（比如不再需要某个对象）：

let user = { name: "张三" };
user = null; // 主动清空，表示 user 现在指向“空”

初始化变量，暗示未来会赋值为对象：声明变量时暂时不确定值，但知道它未来会是一个对象：

let data = null; // 先设为 null，暗示未来会存数据对象
// ... 后续逻辑 ...
data = { id: 1, content: "Hello" }; // 赋值为对象

四、最佳实践

不要主动给变量赋值 undefined：undefined 是引擎自动管理的状态，手动赋值 let a = undefined 没有意义，反而容易混淆。
用 null 表示“主动清空”：当需要明确表示“此处为空”时，优先使用 null。
判断时的注意事项：
- 严格区分两者时，用 ===：if (value === null) 或 if (value === undefined)。
- 若只需判断“是否为空”（不严格区分），可用 == null（等价于 value === null || value === undefined）。
- 检查变量是否声明时，用 typeof 更安全（避免未声明变量直接判断导致报错）：
```
// 安全判断变量是否未定义（即使变量未声明也不会报错）
if (typeof unknownVariable === "undefined") {
  console.log("变量未声明或未赋值");
}
```

总结

undefined 是“被动的无”：由引擎自动产生，标识“本应存在但暂未定义”。
null 是“主动的无”：由开发者设置，标识“明确的空状态”。

理解两者的区别，可以让代码的“空状态”表达更清晰，减少逻辑歧义。

引用类型

引用类型包括对象（Object）、数组（Array）、函数（Function）等，它们可以存储多个值或更复杂的数据结构。

// 对象：存储键值对，类似现实中的表单
const person = {
  name: "李四",
  age: 30,
  isStudent: false
};

// 数组：存储有序列表，类似现实中的清单
const fruits = ["苹果", "香蕉", "橙子"];

// 函数：可执行的代码块，类似现实中的食谱
function calculateTotal(price, quantity) {
  return price * quantity;
}

// 生活场景类比：
// 对象就像一个档案袋，里面装着多个相关信息
// 数组就像一个购物清单，按顺序列出物品
// 函数就像一个食谱，包含了制作某样东西的步骤

四、变量的作用域

变量的作用域是指变量可以被访问的范围，就像现实生活中某些物品只能在特定区域使用一样。

JavaScript中有两种主要的作用域：

全局作用域：在整个程序中都可以访问的变量
局部作用域：只能在特定代码块（如函数、if语句、循环）中访问的变量

// 全局变量：在任何地方都可以访问
const globalVariable = "我是全局变量";

function exampleFunction() {
  // 局部变量：只能在这个函数内部访问
  const localVariable = "我是局部变量";
  console.log(localVariable); // 正常输出
  console.log(globalVariable); // 可以访问全局变量
}

exampleFunction();

// 尝试访问局部变量会报错
// console.log(localVariable); // 错误：localVariable未定义

// 块级作用域：使用let或const声明的变量在{}内有效
if (true) {
  const blockVariable = "我是块级变量";
  console.log(blockVariable); // 正常输出
}

// 尝试在块外访问会报错
// console.log(blockVariable); // 错误：blockVariable未定义

// 生活场景类比：
// 全局变量就像家里的公共物品，全家人都可以使用
// 局部变量就像你的私人日记，只有你自己能看
// 块级变量就像会议室里的投影仪，只有在会议室里才能使用

五、变量提升

JavaScript有一个特殊的现象叫做"变量提升"，即变量声明会被提升到当前作用域的顶部，但赋值不会被提升。

// 例子1：使用var的情况
console.log(x); // 输出: undefined（不是错误）
var x = 5;

// 上面的代码相当于：
// var x; // 声明被提升到顶部
// console.log(x);
// x = 5;

// 例子2：使用let的情况
// console.log(y); // 错误：Cannot access 'y' before initialization
let y = 10;

// 生活场景类比：
// 这就像你提前知道有一个盒子存在（声明被提升），
// 但盒子里还没有放东西（赋值没有被提升）

注意：使用let和const声明的变量也会被提升，但在声明之前访问它们会导致错误，这被称为"暂时性死区"。

六、变量类型的判断

在JavaScript中，准确判断变量的类型非常重要，尤其是在处理用户输入或API返回数据时。常用的类型判断方法有以下几种：

1. typeof 操作符

typeof是最常用的类型判断方法，返回一个表示变量类型的字符串。

console.log(typeof "Hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" （这是一个历史遗留的bug）
console.log(typeof {name: "张三"}); // "object"
console.log(typeof [1, 2, 3]); // "object"
console.log(typeof function() {}); // "function"

// 生活场景类比：
// 就像用一个简单的检测仪快速识别物品类型，
// 但对于某些相似物品可能无法准确区分

特点：

语法简单，使用方便
能准确判断基本类型（除了null）
无法区分对象、数组、null等引用类型
能识别函数类型

2. instanceof 操作符

instanceof用于判断对象是否是某个构造函数的实例。

const arr = [1, 2, 3];
const obj = {name: "张三"};
const date = new Date();

console.log(arr instanceof Array); // true
console.log(obj instanceof Object); // true
console.log(date instanceof Date); // true
console.log(arr instanceof Object); // true （数组也是对象的一种）

// 生活场景类比：
// 就像判断一个物品是否是某个品牌的产品，
// 例如判断一辆车是否是"宝马"品牌的

特点：

适合判断引用类型的具体类型
不能判断基本类型
对于多全局环境（如iframe）可能会出现不准确的情况

3. Object.prototype.toString.call() 方法

这是最准确的类型判断方法，能区分所有内置类型。

console.log(Object.prototype.toString.call("Hello")); // "[object String]"
console.log(Object.prototype.toString.call(42)); // "[object Number]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call(new Date())); // "[object Date]"
console.log(Object.prototype.toString.call(function() {})); // "[object Function]"

// 生活场景类比：
// 就像用专业设备做全面检测，能准确识别各种物品的详细类型

特点：

判断结果最准确全面
可以区分所有内置类型，包括null和数组
语法相对复杂一些

类型判断的最佳实践

// 判断基本类型推荐使用typeof
function isString(value) {
  return typeof value === 'string';
}

// 判断数组推荐使用Array.isArray()
function isArray(value) {
  return Array.isArray(value);
}

// 判断null使用严格相等
function isNull(value) {
  return value === null;
}

// 判断对象（排除数组和null）
function isObject(value) {
  return Object.prototype.toString.call(value) === '[object Object]';
}

// 判断日期类型
function isDate(value) {
  return Object.prototype.toString.call(value) === '[object Date]';
}

七、变量类型的转换

JavaScript是一种弱类型语言，变量的类型可以在特定情况下自动转换，也可以手动强制转换。

1. 隐式类型转换（自动转换）

JavaScript在运算或比较时会自动进行类型转换：

// 数字 + 字符串：数字会转换为字符串
console.log(10 + "20"); // "1020"

// 数字 + 布尔值：true转换为1，false转换为0
console.log(10 + true); // 11
console.log(10 + false); // 10

// 字符串和数字比较：字符串会转换为数字
console.log("10" > 5); // true

// 布尔值在算术运算中：true转换为1，false转换为0
console.log(true + true); // 2

// 生活场景类比：
// 就像自动翻译机，当需要时自动将一种语言转换为另一种语言

常见的隐式转换规则：

加法运算中，只要有一个操作数是字符串，另一个就会转为字符串
其他算术运算（减、乘、除等）会将操作数转为数字
布尔判断中，0、“”、null、undefined、NaN会转为false，其他值转为true

2. 显式类型转换（手动转换）

开发者可以主动使用方法进行类型转换：

转换为字符串

// 使用String()函数
const num = 123;
const str1 = String(num);
console.log(str1, typeof str1); // "123" "string"

// 使用toString()方法
const bool = true;
const str2 = bool.toString();
console.log(str2, typeof str2); // "true" "string"

// 使用空字符串拼接
const arr = [1, 2, 3];
const str3 = arr + "";
console.log(str3, typeof str3); // "1,2,3" "string"

转换为数字

// 使用Number()函数
const str = "123";
const num1 = Number(str);
console.log(num1, typeof num1); // 123 "number"

// 使用parseInt()（转换为整数）
const floatStr = "123.45";
const num2 = parseInt(floatStr);
console.log(num2, typeof num2); // 123 "number"

// 使用parseFloat()（转换为浮点数）
const num3 = parseFloat(floatStr);
console.log(num3, typeof num3); // 123.45 "number"

// 使用+运算符
const bool = true;
const num4 = +bool;
console.log(num4, typeof num4); // 1 "number"

转换为布尔值

// 使用Boolean()函数
const str = "hello";
const bool1 = Boolean(str);
console.log(bool1, typeof bool1); // true "boolean"

// 使用!!运算符
const num = 0;
const bool2 = !!num;
console.log(bool2, typeof bool2); // false "boolean"

// 会被转换为false的值
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false

类型转换的注意事项

// 容易出错的转换情况
console.log(Number("")); // 0
console.log(Number(" ")); // 0
console.log(Number("123abc")); // NaN
console.log(parseInt("123abc")); // 123（只解析前面的数字部分）
console.log(parseInt("abc123")); // NaN

// 处理转换失败的情况
function safeParseInt(str) {
  const num = parseInt(str);
  return isNaN(num) ? 0 : num; // 如果转换失败，返回默认值0
}

console.log(safeParseInt("123")); // 123
console.log(safeParseInt("abc")); // 0

八、变量的判等

在JavaScript中，比较变量是否相等有两种方式：严格相等（=）和宽松相等（），它们的行为有很大差异。

1. 严格相等（===）

严格相等会同时比较值和类型，只有当两者都相同时才返回true。

console.log(5 === 5); // true（值和类型都相同）
console.log(5 === "5"); // false（类型不同，一个是数字，一个是字符串）
console.log(true === 1); // false（类型不同）
console.log(null === undefined); // false（类型不同）
console.log([1, 2] === [1, 2]); // false（引用不同的对象）

// 生活场景类比：
// 就像比较两个物品，不仅要比较它们的内容是否相同，
// 还要比较它们的类型是否相同，例如比较"1个苹果"和"数字1"

2. 宽松相等（==）

宽松相等会先尝试进行类型转换，然后再比较值是否相等。

console.log(5 == 5); // true
console.log(5 == "5"); // true（字符串"5"会先转换为数字5）
console.log(true == 1); // true（true会转换为1）
console.log(false == 0); // true（false会转换为0）
console.log(null == undefined); // true（特殊情况）
console.log("" == 0); // true（空字符串会转换为0）
console.log("" == false); // true（两者都会转换为0）

3. 常见的判等陷阱

// 这些情况容易让人混淆
console.log(0 == ""); // true
console.log(0 == "0"); // true
console.log(false == "0"); // true
console.log(null == 0); // false（null只和undefined相等）
console.log(undefined == 0); // false
console.log(NaN == NaN); // false（NaN不等于任何值，包括它自己）

// 正确判断NaN的方法
console.log(isNaN(NaN)); // true
console.log(Number.isNaN(NaN)); // true

// 判断数组是否包含某个值
const arr = [1, 2, 3, NaN];
console.log(arr.includes(NaN)); // true（includes可以正确识别NaN）

4. 判等的最佳实践

// 推荐使用严格相等（===）
console.log(5 === parseInt("5")); // true

// 需要类型转换的场景
function isEmptyValue(value) {
  // 判断值是否为null、undefined、空字符串或0
  return value == null || value === "" || value === 0;
}

console.log(isEmptyValue(null)); // true
console.log(isEmptyValue(undefined)); // true
console.log(isEmptyValue("")); // true
console.log(isEmptyValue(0)); // true
console.log(isEmptyValue(" ")); // false（空格字符串不是空字符串）

总结：

优先使用严格相等（===），可以避免很多意想不到的类型转换问题
只有在明确需要进行类型转换的比较时，才使用宽松相等（==）
比较NaN时使用Number.isNaN()方法
比较对象是否为同一个引用时必须使用严格相等（===）

九、TypeScript简介及变量特点

TypeScript（简称TS）是JavaScript的超集，它在JavaScript的基础上增加了类型系统。可以把TypeScript理解为"带类型的JavaScript"。

为什么需要TypeScript？

想象一下，你去超市买东西，每个货架都明确标了类别（食品、日用品等），你能很快找到需要的东西。TypeScript的类型系统就像这些标签，让代码更清晰，更容易维护。

TypeScript变量的特点

类型注解：可以为变量指定类型

// 为变量指定类型
let age: number = 25;
let name: string = "张三";
let isStudent: boolean = true;

// 尝试赋值不同类型会报错
// age = "二十五"; // 错误：不能将字符串赋值给number类型

// 生活场景类比：
// 这就像给盒子贴上明确的标签，规定只能放特定类型的物品
// 比如标着"水果"的盒子不能放蔬菜

类型推断：如果变量声明时就赋值，TypeScript会自动推断类型

// TypeScript会自动推断变量类型
let score = 90; // 推断为number类型
let message = "Hello"; // 推断为string类型

// 尝试赋值不同类型会报错
// score = "优秀"; // 错误：不能将字符串赋值给number类型

// 生活场景类比：
// 这就像看到一个盒子里装着苹果，就知道这是一个水果盒
// 即使没有明确标签，也能推断出它应该装什么

数组类型：可以指定数组中元素的类型

// 声明一个只能包含数字的数组
let numbers: number[] = [1, 2, 3, 4];

// 声明一个只能包含字符串的数组
let fruits: string[] = ["苹果", "香蕉", "橙子"];

// 尝试添加不同类型的元素会报错
// numbers.push("五"); // 错误：不能将字符串添加到number数组

// 生活场景类比：
// 这就像一个标着"只能放书"的书架，不能放其他物品

对象类型：可以指定对象的结构和属性类型

// 定义一个Person类型的对象结构
type Person = {
  name: string;
  age: number;
  isStudent: boolean;
};

// 声明一个符合Person类型的对象
let person: Person = {
  name: "李四",
  age: 30,
  isStudent: false
};

// 缺少属性或属性类型错误会报错
// let invalidPerson: Person = {
//   name: "王五",
//   age: "三十", // 错误：age应该是number类型
//   // 缺少isStudent属性，也会报错
// };

// 生活场景类比：
// 这就像填写表单，必须按照规定的格式填写，
// 比如年龄必须填数字，不能填文字

联合类型：允许变量是多种类型中的一种

// 声明一个可以是number或string类型的变量
let id: number | string;

id = 100; // 有效
id = "user100"; // 有效

// 尝试赋值其他类型会报错
// id = true; // 错误：不能将boolean赋值给number | string类型

// 生活场景类比：
// 这就像一个多功能插座，可以插两脚插头或三脚插头，
// 但不能插其他类型的插头

TypeScript的优势

更早发现错误：在编写代码时就能发现类型错误，而不是在运行时
更好的代码提示：编辑器可以根据类型提供更准确的代码提示
更好的代码可读性：类型注解让代码的意图更清晰
更容易重构：修改代码时，TypeScript会帮你检查依赖该代码的地方

总结

变量是JavaScript和TypeScript中最基本也是最重要的概念之一：

JavaScript中使用let、const和var声明变量，推荐使用let和const
变量有不同的数据类型，包括基本类型和引用类型
变量有作用域，决定了变量可以在哪些地方被访问
TypeScript在JavaScript基础上增加了类型系统，让代码更健壮、更易维护

掌握变量的使用是学习JavaScript和TypeScript的第一步，也是构建更复杂程序的基础。希望这篇文章能帮助你更好地理解和使用变量！

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

GitHub 热榜项目 - 周榜(2026-07-26)

AI Agent技术社区

使用 Agent 安装 SKILL 并管理 Joplin 笔记

本文记录如何通过 AI Agent 一键安装 Skill 插件，并实现 Joplin 笔记的智能整理与同步。

AI Agent技术社区

MCP和SKILL的区别和联系

MCP和Skill是Agent中两个互补的概念，它们的关系可以理解为：AI Agent是一台电脑，MCP是通用的“USB接口协议”，Skill则是电脑里安装的“专业软件”。这里尝试参考网络资料，探索MCP和SKILL的区别和联系。

AI Agent技术社区

所有评论(0)

查看更多评论

zhangjiaoshou_

@zhangjiaoshou_

已为社区贡献32条内容

JavaScript | 变量详解：从基础到TypeScript进阶

zhangjiaoshou_

JavaScript变量详解：从基础到TypeScript进阶

一、JavaScript变量基础：什么是变量？

如何创建变量？

1. 使用let声明变量

2. 使用const声明常量

3. 使用var声明变量（旧方式）

二、变量命名规则

补充说明：

三、变量的数据类型

基本类型

一、相同点

二、不同点

三、使用场景区别

1. undefined 的典型场景

2. null 的典型场景

四、最佳实践

总结

引用类型

四、变量的作用域

五、变量提升

六、变量类型的判断

1. typeof 操作符

2. instanceof 操作符

3. Object.prototype.toString.call() 方法

类型判断的最佳实践

七、变量类型的转换

1. 隐式类型转换（自动转换）

2. 显式类型转换（手动转换）

转换为字符串

转换为数字

转换为布尔值

类型转换的注意事项

八、变量的判等

1. 严格相等（===）

2. 宽松相等（==）

3. 常见的判等陷阱

4. 判等的最佳实践

九、TypeScript简介及变量特点

为什么需要TypeScript？

TypeScript变量的特点

TypeScript的优势

总结

所有评论(0)

温馨提示：您尚未绑定手机号

zhangjiaoshou_

1. 使用`let`声明变量

2. 使用`const`声明常量

3. 使用`var`声明变量（旧方式）

1. `undefined` 的典型场景

2. `null` 的典型场景