## 基本类型 vs 引用类型

JavaScript 的类型系统看似简单，实则暗藏玄机。所有数据类型可以划分为两大类：**基本类型（Primitive）**​ 和 **引用类型（Reference）**。

它们最本质的区别在于**存储方式**：


|基本类型|引用类型|
|:-:|:-:|
|存储位置|栈内存（Stack）|堆内存（Heap），栈中存引用地址|
|访问方式|按值访问|按引用访问|
|赋值/传参|完整复制一份副本|复制引用地址，新旧变量指向同一对象|
|类型|`undefined`、`null`、`Boolean`、`Number`、`String`、`Symbol`|`Object`、`Array`、`Function` 等|
>**一句话记住**：基本类型"各过各的"，引用类型"牵一发而动全身"。

理解这六种基本类型，是掌握类型判断、隐式转换、深浅拷贝乃至 TypeScript 类型系统的地基。


----
## `undefined` 与 `null`：两个"空值"的本质区别

### 2.1 语义完全不同


|`undefined`|`null`|
|:-:|:-:|
|含义|变量已声明但未赋值（系统层面的空）|人为设置的空值（程序层面的空）|
|谁产生的|引擎自动赋值|开发者主动赋值|
|典型场景|`var a;` → `a` 就是 `undefined`|`var b = null;` → 明确表示"暂无对象"|
```JavaScript
var a;
console.log(a); // undefined —— 引擎说"这个变量还没值"

var b = null;
console.log(b); // null —— 开发者说"这里暂时不指向任何对象"
```
### 2.2 开发约定

- **`undefined`**：交给引擎自己产生，不要手动赋值 `x = undefined`
- **`null`**：变量声明后暂时没值，初始化为 `null`，表示"等待赋值"

```JavaScript
let user = null; // 明确表示：稍后会赋值为用户对象
// ... 异步请求后
user = { name: '张三', age: 25 };
```
### 2.3 经典坑：`typeof null` 的历史遗留

```JavaScript
typeof undefined // "undefined" ✅
typeof null // "object" ❌ 历史 bug！
```
**原因**：JavaScript 最初用低位标记类型，对象标签是 `000`，而 `null` 的机器码恰好是全零（空指针），被误判为对象。这个结果保留至今。

**正确判断 `null` 的方式**：

```JavaScript
// ✅ 严格相等
x === null

// ❌ 不要用 typeof
typeof x === 'object' // 数组、对象、null 都会返回 true
```
### 2.4 相等性比较

```JavaScript
null == undefined // true （宽松相等，值都被视为"空"）
null === undefined // false （严格相等，类型不同）
```

----
## `Number`、`String`、`Boolean`：三大高频类型

### 3.1 Number：浮点数的精度陷阱

JavaScript 的 `Number` 采用 **IEEE 754 双精度 64 位浮点数**标准，整数和小数共用同一类型。

**经典精度问题**：

```JavaScript
0.1 + 0.2 === 0.3
// false！实际结果是 0.30000000000000004
```
**解决方案**：

```JavaScript
// 方案1：放大为整数再计算
(0.1 * 10 + 0.2 * 10) / 10 // 0.3

// 方案2：toFixed 后转回数字
Number((0.1 + 0.2).toFixed(2)) // 0.3

// 方案3：使用小数运算库（如 decimal.js）
```
**Number 的特殊值**：


|特殊值|含义|
|:-:|:-:|
|`NaN`|Not a Number，唯一不等于自身的值|
|`Infinity`|无穷大|
|`-Infinity`|负无穷大|
|`Number.MAX_SAFE_INTEGER`|最大安全整数 `9007199254740991`|
|`Number.MIN_SAFE_INTEGER`|最小安全整数 `-9007199254740991`|
```JavaScript
NaN === NaN // false ❌
Number.isNaN(NaN) // true ✅

// 超过安全整数范围 → 精度丢失
Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2
// true！精度已丢失
```
>超过 `MAX_SAFE_INTEGER` 的大数运算，建议使用 `BigInt`（后缀 `n`）：`9007199254740993n`

### 3.2 String：不可变性的本质

`String` 表示文本，**所有修改操作都返回新字符串，原字符串不变**：

```JavaScript
let str = 'hello';
let newStr = str.toUpperCase();

console.log(str); // "hello" （原字符串未变）
console.log(newStr); // "HELLO" （返回新字符串）
```
**引号与模板字符串**：

```JavaScript
// 单引号、双引号等价
let s1 = 'hello';
let s2 = "world";

// 模板字符串（ES6）：支持变量嵌入和多行
let name = '张三';
let msg = `你好，${name}！
欢迎回来。`; // 多行字符串，无需 \n
```
### 3.3 Boolean：八个"假值"

`Boolean` 只有 `true` 和 `false`，但 **几乎所有值都能被转为布尔值**：


|假值（Falsy）|说明|
|:-:|:-:|
|`false`|布尔假|
|`0`、`-0`|数值零|
|`0n`|BigInt 零|
|`""`|空字符串|
|`null`|空值|
|`undefined`|未定义|
|`NaN`|非数字|
**其余所有值都是真值（Truthy）**，包括：

```JavaScript
Boolean([]) // true （空数组是真值！）
Boolean({}) // true （空对象是真值！）
Boolean('0') // true （非空字符串，即使是 "0"）
Boolean('false') // true （字符串 "false" 是真值！）
```
>⚠️ **高频踩坑**：`if ([])` 会执行，`if ({})` 也会执行。判断空数组/空对象需要额外逻辑。

### 3.4 隐式转换的"坑中坑"

```JavaScript
"5" + 3 // "53" （+ 号优先字符串拼接）
"5" - 3 // 2 （- 号触发数值转换）
"5" * "2" // 10 （* 号触发数值转换）
```

----
## `Symbol`：ES6 引入的"唯一值"

### 4.1 核心特性：独一无二

```JavaScript
const s1 = Symbol('id');
const s2 = Symbol('id');

s1 === s2 // false，即使描述文字相同也不相等
```
### 4.2 主要用途

**① 作为对象属性名，避免命名冲突**：

```JavaScript
const id = Symbol('id');

const user = {
 name: '张三',
 [id]: 12345 // Symbol 作为属性名
};

console.log(user[id]); // 12345
// Object.keys(user) 不会枚举 Symbol 属性
```
**② 内置 Symbol 控制对象行为**：


|内置Symbol|作用|
|:-:|:-:|
|`Symbol.iterator`|定义对象的迭代行为（使对象可用 `for...of`）|
|`Symbol.toStringTag`|影响 `Object.prototype.toString.call()` 的输出|
|`Symbol.hasInstance`|自定义 `instanceof` 行为|


----
## 类型判断：从 `typeof` 到终极方案

### 5.1 `typeof` 的局限性

```JavaScript
typeof 42 // "number" ✅
typeof 'hello' // "string" ✅
typeof true // "boolean" ✅
typeof undefined // "undefined" ✅
typeof Symbol() // "symbol" ✅
typeof null // "object" ❌（历史遗留）
typeof [] // "object" ❌（无法区分数组）
typeof {} // "object" ❌
typeof function(){} // "function" ✅（唯一能区分的引用类型）
```
### 5.2 各场景最佳方案


|场景|推荐方案|
|:-:|:-:|
|判断基本类型（除 null）|`typeof`|
|判断 `null`|`x === null`|
|判断数组|`Array.isArray(x)`|
|判断函数|`typeof x === 'function'`|
|**精确判断任意类型**​|`Object.prototype.toString.call(x)`|
### 5.3 终极类型判断函数

```JavaScript
function getType(value) {
 return Object.prototype.toString.call(value)
 .slice(8, -1)
 .toLowerCase();
}

getType(null) // "null"
getType([]) // "array"
getType(/abc/) // "regexp"
getType(new Date()) // "date"
getType(42) // "number"
getType(Symbol()) // "symbol"
```

----
## 核心要点速记


|类型|关键点|
|:-:|:-:|
|`undefined`|引擎自动产生，表示"未赋值"|
|`null`|开发者主动赋值，表示"空对象引用"；`typeof null` 是 `"object"`|
|`Number`|浮点数有精度问题；`NaN !== NaN`；大数用 `BigInt`|
|`String`|不可变；修改返回新字符串|
|`Boolean`|8 个假值；`[]` 和 `{}` 都是真值|
|`Symbol`|每个值唯一；适合做对象私有属性名|
>**底层钥匙**：基本类型按值传递（复制副本），引用类型按引用传递（共享地址）。这一区别是理解 JS 隐式转换、深浅拷贝、闭包、异步等几乎所有进阶话题的底层逻辑。

 推荐查看天气：http://www.362tq.com/shuncheng/zuotian.html
 推荐查看天气：http://www.362tq.com/shuncheng/7tian.html
 推荐查看天气：http://www.362tq.com/shuncheng/10tian.html
 推荐查看天气：http://www.362tq.com/shuncheng/15tian.html
 推荐查看天气：http://www.362tq.com/shuncheng/40tian.html
 推荐查看天气：http://www.362tq.com/xinbin/
 推荐查看天气：http://www.362tq.com/xinbin/zuotian.html
 推荐查看天气：http://www.362tq.com/xinbin/7tian.html
 推荐查看天气：http://www.362tq.com/xinbin/10tian.html
 推荐查看天气：http://www.362tq.com/xinbin/15tian.html
 推荐查看天气：http://www.362tq.com/xinbin/40tian.html
 推荐查看天气：http://www.362tq.com/fushunqingyuan/
 推荐查看天气：http://www.362tq.com/fushunqingyuan/zuotian.html
 推荐查看天气：http://www.362tq.com/fushunqingyuan/7tian.html
 推荐查看天气：http://www.362tq.com/fushunqingyuan/10tian.html
 推荐查看天气：http://www.362tq.com/fushunqingyuan/15tian.html
 推荐查看天气：http://www.362tq.com/fushunqingyuan/40tian.html
 推荐查看天气：http://www.362tq.com/benxi/
 推荐查看天气：http://www.362tq.com/benxi/zuotian.html
 推荐查看天气：http://www.362tq.com/benxi/7tian.html
 推荐查看天气：http://www.362tq.com/benxi/10tian.html
 推荐查看天气：http://www.362tq.com/benxi/15tian.html
 推荐查看天气：http://www.362tq.com/benxi/40tian.html
 推荐查看天气：http://www.362tq.com/nanfen/
 推荐查看天气：http://www.362tq.com/nanfen/zuotian.html
 推荐查看天气：http://www.362tq.com/nanfen/7tian.html
 推荐查看天气：http://www.362tq.com/nanfen/10tian.html
 推荐查看天气：http://www.362tq.com/nanfen/15tian.html
 推荐查看天气：http://www.362tq.com/nanfen/40tian.html
 推荐查看天气：http://www.362tq.com/benxixian/
 推荐查看天气：http://www.362tq.com/benxixian/zuotian.html
 推荐查看天气：http://www.362tq.com/benxixian/7tian.html
 推荐查看天气：http://www.362tq.com/benxixian/10tian.html
 推荐查看天气：http://www.362tq.com/benxixian/15tian.html
 推荐查看天气：http://www.362tq.com/benxixian/40tian.html
 推荐查看天气：http://www.362tq.com/huanren/
 推荐查看天气：http://www.362tq.com/huanren/zuotian.html
 推荐查看天气：http://www.362tq.com/huanren/7tian.html
 推荐查看天气：http://www.362tq.com/huanren/10tian.html
 推荐查看天气：http://www.362tq.com/huanren/15tian.html
 推荐查看天气：http://www.362tq.com/huanren/40tian.html
 推荐查看天气：http://www.362tq.com/dandong/
 推荐查看天气：http://www.362tq.com/dandong/zuotian.html
 推荐查看天气：http://www.362tq.com/dandong/7tian.html
 推荐查看天气：http://www.362tq.com/dandong/10tian.html
 推荐查看天气：http://www.362tq.com/dandong/15tian.html
 推荐查看天气：http://www.362tq.com/dandong/40tian.html
 推荐查看天气：http://www.362tq.com/yuanbao/
 推荐查看天气：http://www.362tq.com/yuanbao/zuotian.html
 推荐查看天气：http://www.362tq.com/yuanbao/7tian.html
 推荐查看天气：http://www.362tq.com/yuanbao/10tian.html
 推荐查看天气：http://www.362tq.com/yuanbao/15tian.html
 推荐查看天气：http://www.362tq.com/yuanbao/40tian.html
 推荐查看天气：http://www.362tq.com/zhenxing/
 推荐查看天气：http://www.362tq.com/zhenxing/zuotian.html
 推荐查看天气：http://www.362tq.com/zhenxing/7tian.html
 推荐查看天气：http://www.362tq.com/zhenxing/10tian.html
 推荐查看天气：http://www.362tq.com/zhenxing/15tian.html
 推荐查看天气：http://www.362tq.com/zhenxing/40tian.html
 推荐查看天气：http://www.362tq.com/kuandian/
 推荐查看天气：http://www.362tq.com/kuandian/zuotian.html
 推荐查看天气：http://www.362tq.com/kuandian/7tian.html
 推荐查看天气：http://www.362tq.com/kuandian/10tian.html
 推荐查看天气：http://www.362tq.com/kuandian/15tian.html
 推荐查看天气：http://www.362tq.com/kuandian/40tian.html
 推荐查看天气：http://www.362tq.com/donggangshi/
 推荐查看天气：http://www.362tq.com/donggangshi/zuotian.html
 推荐查看天气：http://www.362tq.com/donggangshi/7tian.html
 推荐查看天气：http://www.362tq.com/donggangshi/10tian.html
 推荐查看天气：http://www.362tq.com/donggangshi/15tian.html
 推荐查看天气：http://www.362tq.com/donggangshi/40tian.html
 推荐查看天气：http://www.362tq.com/jinzhou/
 推荐查看天气：http://www.362tq.com/jinzhou/zuotian.html
 推荐查看天气：http://www.362tq.com/jinzhou/7tian.html
 推荐查看天气：http://www.362tq.com/jinzhou/10tian.html
 推荐查看天气：http://www.362tq.com/jinzhou/15tian.html
 推荐查看天气：http://www.362tq.com/jinzhou/40tian.html
 推荐查看天气：http://www.362tq.com/guta/
 推荐查看天气：http://www.362tq.com/guta/zuotian.html
 推荐查看天气：http://www.362tq.com/guta/7tian.html
 推荐查看天气：http://www.362tq.com/guta/10tian.html
 推荐查看天气：http://www.362tq.com/guta/15tian.html
 推荐查看天气：http://www.362tq.com/guta/40tian.html
 推荐查看天气：http://www.362tq.com/linghe/
 推荐查看天气：http://www.362tq.com/linghe/zuotian.html
 推荐查看天气：http://www.362tq.com/linghe/7tian.html
 推荐查看天气：http://www.362tq.com/linghe/10tian.html
 推荐查看天气：http://www.362tq.com/linghe/15tian.html
 推荐查看天气：http://www.362tq.com/linghe/40tian.html
 推荐查看天气：http://www.362tq.com/heishan/
 推荐查看天气：http://www.362tq.com/heishan/zuotian.html
 推荐查看天气：http://www.362tq.com/heishan/7tian.html
 推荐查看天气：http://www.362tq.com/heishan/10tian.html
 推荐查看天气：http://www.362tq.com/heishan/15tian.html
 推荐查看天气：http://www.362tq.com/heishan/40tian.html
 推荐查看天气：http://www.362tq.com/jinzhouyixian/
 推荐查看天气：http://www.362tq.com/jinzhouyixian/zuotian.html
 推荐查看天气：http://www.362tq.com/jinzhouyixian/7tian.html
 推荐查看天气：http://www.362tq.com/jinzhouyixian/10tian.html
 推荐查看天气：http://www.362tq.com/jinzhouyixian/15tian.html
 推荐查看天气：http://www.362tq.com/jinzhouyixian/40tian.html

JavaScript 的类型系统看似简单，实则暗藏玄机。所有数据类型可以划分为两大类：基本类型（Primitive）​ 和 引用类型（Reference）。

JS 六种基本数据类型全解析：特点、用法与避坑指南

编程语言

深度解析JavaScript基本类型与引用类型的核心差异，涵盖undefined、null、Number精度陷阱、String不可变性、Boolean假值、Symbol唯一性及类型判断最佳实践，助力开发者掌握隐式转换与底层存储逻辑。

代码解释

TypeScript 

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

JS 六种基本数据类型全解析：特点、用法与避坑指南-腾讯云开发者社区-腾讯云

JS 六种基本数据类型全解析：特点、用法与避坑指南

JS 六种基本数据类型全解析：特点、用法与避坑指南

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐