JavaScript有哪些数据类型：7种基本类型与引用类型详解

一、JavaScript 数据类型全景划分

在 JavaScript 中，任何值都可以归类到基本数据类型或引用数据类型中。两者的核心差异在于：基本数据类型表示不可被细分的单一原始数据值，直接存储在栈内存（Stack）中，按值操作；引用数据类型则是复合数据的集合，实体对象存储在堆内存（Heap）中，变量在栈中存储的仅是指向该堆内存实体的地址指针。

二、7 种基本数据类型逐一详解

1. Undefined（未定义）

Undefined 类型只有一个单一值，即 undefined。当一个变量使用 let 或 var 声明后却未显式赋初值时，引擎会自动赋予该变量 undefined。此外，访问对象上不存在的属性、函数没有显式返回值、或者调用函数时未传递对应形参，获取到的结果均为 undefined。

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

function calculate() {}
console.log(calculate()); // 输出: undefined

2. Null（空值 / 空对象指针）

Null 类型也只包含一个特殊值 null。逻辑上，null 表示“无值”或“空对象指针”。通常在需要显式释放对象引用（辅助垃圾回收）或预先占位一个将来会是对象的变量时使用。

3. Boolean（布尔值）

Boolean 类型仅有两个字面量值：true 和 false。在条件分支语句（如 if、三元表达式）中，其他类型值会自动进行隐式类型转换为布尔值。

在 JavaScript 中，只有以下 8 个值会被转换为 false（称为假值 Falsy），其余所有值（包括空数组 [] 和空对象 {}）在布尔上下文中均为 true：

• false
• 0、-0、0n（BigInt 零）
• ""（空字符串）
• null
• undefined
• NaN

4. Number（双精度浮点数）

JavaScript 不区分整型和浮点型，所有的 Number 均遵循 IEEE 754 标准 的 64 位双精度浮点数格式存储。

• 安全整数区间：从 Number.MIN_SAFE_INTEGER（-(2⁵³ - 1)）到 Number.MAX_SAFE_INTEGER（2⁵³ - 1）。超出此范围的整数计算可能丢失精度。
• 特殊数值：Infinity（正无穷）、-Infinity（负无穷）以及 NaN（Not-a-Number，非数值）。
• NaN 的特性：NaN !== NaN。检测一个值是否为 NaN 必须使用 Number.isNaN(val)，不建议使用全局的 isNaN()（后者会进行强制类型转换）。
• 浮点数精度问题：经典的 0.1 + 0.2 === 0.3 返回 false，这是由于二进制无法精确表示十进制无限循环小数所致。工程中判断浮点数相等可使用误差边界 Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON。

5. BigInt（大整数）

在 ECMAScript 2020 引入，用于表示大于 2⁵³ - 1 的任意精度整数。在处理金融级高精度订单号、分布式雪花算法 ID、或者微秒级时间戳时，BigInt 能有效避免精度溢出截断问题。

// 创建方式：在整数字面量后追加字母 n，或调用 BigInt() 函数
const largeId = 9007199254740993n;
const calculated = BigInt("9007199254740993") + 1n;

// 注意事项：BigInt 不能与常规 Number 隐式混合运算，必须显式转换
// 10n + 5 会抛出 TypeError: Cannot mix BigInt and other types

6. String（字符串）

表示文本序列，由 16 位 UTF-16 代码单元组成。与 C 语言不同，JavaScript 字符串是严格不可变的（Immutable）。一旦字符串被创建，其内部字符就不能被修改；任何字符串拼接、截取、替换等方法（如 concat、slice、replace），返回的都是全新分配的字符串，原字符串丝毫不受影响。

let greeting = "Hello";
greeting[0] = "M"; // 严格模式下报错，非严格模式下静默失效
console.log(greeting); // 依然输出 "Hello"

let updated = greeting.replace("H", "M"); // 生成全新字符串
console.log(updated);  // 输出 "Mello"

7. Symbol（符号值）

ECMAScript 2015 (ES6) 引入的原始类型。每个从 Symbol() 函数返回的 symbol 值都是完全唯一且不可变的。主要用于为对象添加非公开、不会被外部遍历（如 Object.keys() 或 for...in）意外覆盖的属性键名。

const key1 = Symbol("token");
const key2 = Symbol("token");
console.log(key1 === key2); // false，描述符相同但实例绝对唯一

const user = {
  name: "张三",
  [key1]: "内部私有标识 001"
};
console.log(Object.keys(user)); // 仅输出 ["name"]，Symbol 属性被隐藏保护
console.log(Object.getOwnPropertySymbols(user)); // [ Symbol(token) ]

三、引用数据类型（Object）及其形态

在 JavaScript 中，除 7 种基本类型外的一切数据均属于引用数据类型（Object）。对象是属性（键值对）的无序集合。虽然数组（Array）、函数（Function）、日期（Date）、正则表达式（RegExp）、哈希集合（Map/Set）在开发中有各自专用的语法与 API，但它们在语言规范层面全部派生自 Object.prototype，其底层实现皆为对象结构。

一个重要特例是函数（Function）：当对函数运行 typeof fn 时，规范定义其返回 "function" 而不是 "object"。这是为了方便开发者快速判别“该对象是否具备可调用的内部实现 [[Call]]”，但从原型链本质上来说，函数依然是继承自 Object 的复合对象。

四、内存存储模型：栈内存与堆内存的本质差别

要彻底分清基本类型与引用类型，必须了解浏览器 V8 引擎等运行时的内存分配机制。

操作特性的三组对照

1. 值传递 vs 引用传递： 将基本类型赋给新变量时，会克隆一份独立的物理值；将引用类型赋给新变量时，只克隆内存地址，两个变量底层操作同一个堆内存实例。
2. 严格全等（===）的比较依据： 基本类型比较的是“值是否相同”（1 === 1 为 true）；引用类型比较的是“指针是否指向同一个堆内存地址”（{} === {} 为 false，因为创建了两个独立堆对象）。
3. 函数传参机制： JavaScript 中所有函数的参数传递均为值传递。但对于引用类型，传递的“值”是对象指针的拷贝。在函数内部修改对象属性会作用于外部对象；但若在函数内直接重写整个参数指针（例如 obj = { newObj: true }），则不会影响外部原变量。

五、精准检测数据类型的推导决策流程

在实际项目中，单一的 typeof 无法满足所有场景。为了建立严密的数据类型防御，应当遵循清晰的分层判定策略：

工程级万能类型检测函数实现

借助上述推导逻辑，我们可以封装一个适用于大型工程的标准化类型获取工具：

/**
 * 获取任意 JavaScript 变量的精准小写类型字符串
 * @param {*} target 待检测目标
 * @returns {string} 例如 'number', 'null', 'array', 'regexp', 'map'
 */
function getExactType(target) {
  // 1. 处理 null 特殊值
  if (target === null) {
    return 'null';
  }

  // 2. 基本类型与函数直接使用 typeof
  const baseType = typeof target;
  if (baseType !== 'object') {
    return baseType;
  }

  // 3. 引用类型通过 Object.prototype.toString 精确解析
  // 返回格式为 "[object Type]"，截取第 8 到倒数第 1 位并转为小写
  return Object.prototype.toString
    .call(target)
    .slice(8, -1)
    .toLowerCase();
}

// 示例验证：
console.log(getExactType(100));              // 'number'
console.log(getExactType(null));             // 'null'
console.log(getExactType([1, 2]));           // 'array'
console.log(getExactType(new Date()));       // 'date'
console.log(getExactType(new Map()));        // 'map'
console.log(getExactType(/abc/g));           // 'regexp'

六、高频陷阱与开发避坑指南

1. 慎用基本类型的包装对象构造器

JavaScript 为 Boolean、Number、String 提供了对应的内置对象包装器。如果使用 new 关键字调用构造函数，生成的将是引用对象而不是基本类型：

const primitiveStr = "hello";
const objectStr = new String("hello");

console.log(typeof primitiveStr); // "string"
console.log(typeof objectStr);    // "object"
console.log(primitiveStr === objectStr); // false!

// 灾难性场景：布尔包装对象在条件语句中始终为真
const falseObj = new Boolean(false);
if (falseObj) {
  console.log("这段代码居然被执行了！因为对象永远是真值");
}

避坑准则：严禁使用 new String()、new Number()、new Boolean() 创建变量。如需进行类型转换，使用不带 new 的转型函数，如 String(123)、Number("456")。

2. instanceof 在跨窗口（iframe）下的失效风险

instanceof 是通过检查右侧构造函数的 prototype 是否存在于左侧实例的原型链上来判定的。但在微前端架构或多 <iframe> 环境中，每个窗口拥有完全独立的全局执行上下文与内置构造函数：

// 假设从子 iframe 接收到一个数组 childArray
// childArray instanceof Array 将返回 false！因为 childArray 来自不同窗口的 Array 原型
// 安全替代方案：永远使用 ES5 的 Array.isArray()
Array.isArray(childArray); // 始终准确返回 true

七、数据类型特性与检测方式全景总结

综上所述，掌握 JavaScript 数据类型的关键，不仅在于熟记 7 种基本类型与 1 种引用类型的清单，更在于深刻理解栈与堆的内存布局模型、值与引用的传递机制，以及针对 null、浮点数计算和复合对象的严密判定策略。这不仅能有效规避生产环境中的隐式类型转换缺陷，更能为深入理解闭包、原型链与深浅拷贝奠定坚实的底层认知。