前端面试-JavaScript 数据类型详解
目录
一、数据类型分类
二、核心区别对比
1. 存储方式
2. 比较方式
3. 类型检测方法
三、特殊类型详解
1. Symbol
2. BigInt
3. null vs undefined
四、常见面试扩展问题
五、总结
一、数据类型分类
JavaScript 数据类型分为 基本数据类型（原始类型） 和 引用数据类型（对象类型），共 8 种（截至 ES2023）：
| 类型 | 示例 | 特点说明 |
|---|---|---|
| Undefined | let a; | 变量声明未赋值时的默认值 |
| Null | let b = null; | 表示空值（故意赋值的空） |
| Boolean | true / false | 逻辑值 |
| Number | 42 / 3.14 / NaN | 整数、浮点数及特殊数值 |
| String | 'hello' / "world" | 文本数据（UTF-16 编码） |
| Symbol | Symbol('id') | 唯一且不可变的标识符（ES6+） |
| BigInt | 123n | 大整数（ES2020+） |
| Object | {} / [] / ()=>{} | 复杂数据结构（包括数组、函数等） |
二、核心区别对比
1. 存储方式
| 类型 | 存储位置 | 内存示意图 |
|---|---|---|
| 基本类型 | 栈内存 | 变量 → 值（直接存储） |
| 引用类型 | 堆内存（栈存指针） | 变量 → 地址指针 → 堆中的对象 |
示例：
// 基本类型
let a = 10;
let b = a; // 值拷贝
b = 20;
console.log(a); // 10（互不影响）
// 引用类型
let obj1 = { name: 'John' };
let obj2 = obj1; // 指针拷贝
obj2.name = 'Alice';
console.log(obj1.name); // 'Alice'（指向同一对象）2. 比较方式
| 类型 | 比较行为 | 示例 |
|---|---|---|
| 基本类型 | 值相等即可 | 5 === 5 → true |
| 引用类型 | 比较内存地址（是否同一对象） | {} === {} → false |
特殊案例：
NaN === NaN; // false（唯一不等于自身的值）
Object.is(NaN, NaN); // true（ES6 的严格相等判断）
null == undefined; // true（抽象相等比较）
null === undefined; // false（类型不同）3. 类型检测方法
| 方法 | 基本类型 | 引用类型 |
|---|---|---|
typeof | 返回类型名（除 null） | 返回 "object" 或 "function" |
instanceof | 无效（始终 false） | 检测构造函数原型链 |
Object.prototype.toString.call() | 精准判断所有类型 |
经典问题：
typeof null; // "object"（历史遗留问题）
typeof [1,2]; // "object"
typeof function(){}; // "function"
[] instanceof Array; // true
({}) instanceof Object; // true三、特殊类型详解
1. Symbol
-
唯一性：相同参数的 Symbol 值不相等
Symbol('key') === Symbol('key'); // false -
使用场景：对象唯一属性键、定义私有成员、替代魔法字符串
const ID = Symbol('id'); const user = { [ID]: 123 };
2. BigInt
-
表示方法：数字后加
n或使用BigInt()构造函数const bigNum = 9007199254740993n; -
特性：不可与普通 Number 混合运算（需显式转换）
3. null vs undefined
| 对比点 | null | undefined |
|---|---|---|
| 含义 | 主动赋值的空值 | 变量未初始化的默认值 |
| 使用场景 | 释放对象引用 | 函数参数未传入时的默认值 |
| 类型转换 | Number(null) → 0 | Number(undefined) → NaN |
四、常见面试扩展问题
-
深拷贝 vs 浅拷贝
-
基本类型拷贝值，引用类型拷贝指针
-
深拷贝实现：
JSON.parse(JSON.stringify(obj))（局限：无法处理函数、循环引用）、递归克隆
-
-
包装对象（Boxing）
基本类型调用方法时自动装箱：let str = 'hello'; str.toUpperCase(); // 临时创建 String 对象 -
内存管理
-
基本类型随执行上下文销毁
-
引用类型依赖垃圾回收机制（标记清除、引用计数）
-
五、总结
理解 JavaScript 数据类型的关键在于：
-
两大家族：基本类型（7种） vs 引用类型（Object）
-
三大差异：存储方式、赋值行为、比较逻辑
-
特殊成员：
Symbol的唯一性、BigInt的大数处理、null与undefined的语义区别
掌握这些核心概念，能够帮助开发者避免常见陷阱（如意外修改引用类型数据），并写出更健壮的代码。