JavaScript 数据类型有哪些

前端岗位的竞争就像一场”冰火两重天”的生存游戏——初中级开发者挤破头抢饭碗，能写Vue页面、调通ECharts图表就能上岗；而高级以上的战场，却要求你左手技术深度右手架构思维。

最让人头秃的是面试环节：答得太简略，怕被当成”API调用工程师”；讲得太深入，又像在背八股文题库…到底怎么才能：

✅ 突破CRUD的认知天花板

✅ 把项目经验转化成技术话语权

✅ 用面试官想听的方式展现真实实力

今天这份指南就像你的私人外挂，不仅帮你定位知识体系缺口，还拆解了面试官的预期管理术，下次面试时你就能：

✨（初级）用”场景案例+技术原理+价值量化”三层结构替代单纯概念复述

✨（中级）这个问题有XX种解决方案，我选择XX方案是因为…

✨（高级）这个问题涉及XX底层原理，我的理解是…

JavaScript数据类型体系

JavaScript数据类型体系分为两类：七种基础类型+对象类型：

基础类型（Primitive Types）原始类型（栈内存直接存储）：
- Undefined：声明未初始化变量（如let a）
- Null：表示空对象指针（typeof特殊返回object）
- Boolean：true/false布尔值
- Number：64位浮点数（含NaN和Infinity）
- String：UTF-16编码字符串
- Symbol（ES6）：唯一不可变标识符
- BigInt（ES10）：任意精度整数（需后缀n）
引用类型（Object Types）
- 对象类型（堆内存存储，栈存引用地址）：
- 核心类型：Object（含Array、Function、Date等）
- 新增类型：Map、Set、WeakMap（ES6）
- 特殊对象：RegExp、Promise（ES6）

类型判断方法对比

方法	适用场景	局限性	示例代码
typeof	基础类型（除null）	返回”object”误判null	typeof null === ‘object’
instanceof	引用类型继承关系	无法检测基础类型	[] instanceof Array
Object.prototype.toString	精准全类型判断	需处理原型链篡改	[].toString.call([])
typeof + constructor	组合方案	需特殊处理BigInt/Symbol	typeof BigInt(1) === ‘bigint’

面试考察维度分析

基础能力验证（初级）

类型划分准确性（区分7种基础类型）
内存存储机制理解（栈/堆差异）
基础类型判断方法（typeof常见陷阱）

工程能力评估（中级）

类型转换机制（如true + 0→1）
对象引用陷阱（如obj1 = obj2后的修改影响）
高性能场景优化（大数据处理时的类型选择）

底层原理考察（高级）

垃圾回收机制（标记-清除算法在闭包中的应用）
类型系统设计（TypeScript与JavaScript类型映射）
框架底层实现（Vue3 Proxy响应式原理）

分阶回答策略

初级回答（概念复述+基础应用）

// 基础类型示例
let a = 10; // Number
let b = "Hello"; // String
let c = true; // Boolean
let d = null; // Null
let e; // Undefined
// 引用类型示例
let arr = [1, 2, 3]; // Array
let func = () => {}; // Function
// 内存差异演示
let obj1 = { x: 1 };
let obj2 = obj1;
obj2.x = 2; // obj1.x同步变化（引用类型共享内存）

加分项

提及BigInt处理大数（如12345678901234567890n）
指出typeof null === ‘object’的特殊性

中级回答（场景化应用+原理分析）

// 类型转换场景
console.log(Number("123") + 1); // 124（显式转换）
console.log([] + 1); // "1"（隐式转换陷阱）
// 内存优化案例
// 场景：处理10万条日志数据
// 原方案：使用Array存储（引用类型，内存占用高）
// 优化方案：转换为TypedArray（基础类型连续存储）
const logs = new Uint32Array(100000); // 内存节省约75%

技术深度

解释Symbol在React组件Key中的应用（避免重排性能损耗）
分析Map相比Object的性能优势（键类型灵活、迭代性能）

高级回答（架构级思考+底层原理）

// 垃圾回收优化方案
// 场景：长列表虚拟滚动实现
// 问题：闭包引用导致DOM节点无法回收
// 解决：
function createVirtualList() {
  let activeNodes = []; // 引用类型需主动清理
  return {
    render: function () {
      // 使用WeakRef弱引用
      activeNodes = new WeakRef(activeNodes).deref() || [];
    },
  };
}

技术维度

对比WeakMap与Map的内存管理差异
解析BigInt在WebAssembly交互中的必要性（如OpenGL坐标计算）
讨论TypeScript类型系统如何增强ES6+特性（如unknown类型安全）

延伸

Vue3响应式系统对Proxy的深度使用
React Hooks闭包变量与基础类型的关系
Service Worker中内存管理最佳实践

总结

typeof null的异常行为 typeof 可以用来判断一个变量的数据类型，但对 null 会返回 “object”，而不是 “null”，这是一个著名的 JavaScript “错误”。