前端面试-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

---

四、常见面试扩展问题

1. 深拷贝 vs 浅拷贝

   • 基本类型拷贝值，引用类型拷贝指针

   • 深拷贝实现：JSON.parse(JSON.stringify(obj))（局限：无法处理函数、循环引用）、递归克隆

2. 包装对象（Boxing）
   基本类型调用方法时自动装箱：

   
   let str = 'hello';
   str.toUpperCase(); // 临时创建 String 对象

3. 内存管理

   • 基本类型随执行上下文销毁

   • 引用类型依赖垃圾回收机制（标记清除、引用计数）

---

五、总结

理解 JavaScript 数据类型的关键在于：

• 两大家族：基本类型（7种） vs 引用类型（Object）

• 三大差异：存储方式、赋值行为、比较逻辑

• 特殊成员：Symbol 的唯一性、BigInt 的大数处理、null 与 undefined 的语义区别

掌握这些核心概念，能够帮助开发者避免常见陷阱（如意外修改引用类型数据），并写出更健壮的代码。