JavaScript 数据类型全景图：从基础到进阶

JavaScript 数据类型全景图从基础到进阶很多初学者认为 JS 只有“字符串”和“数字”或者分不清null和undefined的区别。其实JS 的数据类型设计非常精巧分为两大阵营基本数据类型值类型和引用数据类型。理解它们的区别就理解了 JS 内存管理的核心。 目录️ 两大阵营基本类型 vs 引用类型 8 种数据类型详解 核心差异栈内存 vs 堆内存 如何准确判断数据类型⚠️ 常见面试题与坑点 总结1. ️ 两大阵营基本类型 vs 引用类型JavaScript 共有8 种数据类型ES6 新增 SymbolES10 新增 BigInt。它们被分为两类✅ 基本数据类型Primitive Types存储在**栈Stack**中直接存储值。String字符串Number数字Boolean布尔值Undefined未定义Null空对象指针Symbol符号ES6 新增BigInt大整数ES10 新增✅ 引用数据类型Reference Types存储在堆Heap中栈中只存储指向堆内存的地址指针。8.Object对象包括Array数组、Function函数、Date日期、RegExp正则等。注意虽然Function和Array很特殊但在typeof检测时它们都属于object的子集除了 Function 返回 ‘function’。2. 8 种数据类型详解1. String字符串用于表示文本数据。constnameLingma;constgreetingHello World;consttemplateHi,${name};// 模板字符串2. Number数字包括整数和浮点数。还有一个特殊的NaN(Not a Number)。constage25;constprice9.99;constnotNumNaN;console.log(NaNNaN);// false! NaN 不等于任何值包括它自己3. Boolean布尔值只有两个值true和false。常用于条件判断。constisReadytrue;constisEmptyfalse;4. Undefined未定义声明了变量但未赋值或者对象中不存在的属性。leta;console.log(a);// undefinedconstobj{};console.log(obj.name);// undefined5. Null空表示“空值”或“无对象”。它是一个赋值值通常用于初始化一个将来要存放对象的变量。letusernull;// 明确表示当前没有用户对象6. Symbol符号ES6 引入创建唯一的值。常用于作为对象属性的键防止属性名冲突。constid1Symbol(id);constid2Symbol(id);console.log(id1id2);// false即使描述相同它们也是唯一的7. BigInt大整数ES10 引入用于表示超过Number安全范围2^53 - 1的整数。constbigNum9007199254740991n;constanotherBigBigInt(9007199254740991);8. Object对象键值对的集合。constperson{name:Lingma,age:25,sayHi:function(){console.log(Hi);},};constlist[1,2,3];// 数组也是对象3. 核心差异栈内存 vs 堆内存这是理解 JS 赋值和拷贝的关键 基本类型按值访问存储直接存储在栈内存中。拷贝赋值时会创建一个全新的副本。修改其中一个不影响另一个。leta10;letba;// b 复制了 a 的值b20;console.log(a);// 10 (a 不受影响) 引用类型按引用访问存储实际数据存储在堆内存中栈内存中只存一个**指针地址**指向堆。拷贝赋值时复制的是指针。两个变量指向同一个堆内存对象。修改其中一个另一个也会变。letobj1{name:Lingma};letobj2obj1;// obj2 复制了指针指向同一个对象obj2.nameAliyun;console.log(obj1.name);// Aliyun (obj1 也被改变了)比喻基本类型就像你有一张现金给朋友一张复印件假设能复印他花他的你的还在。引用类型就像你有一个保险箱堆你把保险箱的钥匙指针复制了一把给朋友。朋友用钥匙打开保险箱改了里面的东西你再去开发现东西也变了。4. 如何准确判断数据类型JS 提供了多种检测手段但各有优劣。1.typeof操作符最常用适合检测基本类型和函数。typeof100;// numbertypeofHello;// stringtypeoftrue;// booleantypeofundefined;// undefinedtypeofSymbol();// symboltypeof10n;// biginttypeoffunction(){};// functiontypeof{};// object ⚠️ 陷阱typeof[];// object ⚠️ 陷阱typeofnull;// object ⚠️ 历史遗留 Bug缺点无法区分null、Array和普通Object它们都返回object。2.instanceof操作符用于检测引用类型的原型链。[]instanceofArray;// true{}instanceofObject;// truenewDate()instanceofDate;// true缺点不能检测基本类型在不同 iframe 或窗口间可能失效因为原型链不同。3.Object.prototype.toString.call()✅推荐万能方法这是最准确、最通用的检测方式。consttypeCheck(val)Object.prototype.toString.call(val);typeCheck(100);// [object Number]typeCheck(Hello);// [object String]typeCheck(null);// [object Null]typeCheck(undefined);// [object Undefined]typeCheck([]);// [object Array]typeCheck({});// [object Object]typeCheck(newDate());// [object Date]封装一个通用工具函数functiongetType(val){returnObject.prototype.toString.call(val).slice(8,-1).toLowerCase();}console.log(getType([]));// arrayconsole.log(getType(null));// nullconsole.log(getType(function(){}));// function5. ⚠️ 常见面试题与坑点❓ 问题 1null和undefined的区别特性undefinednull含义“缺少值”未初始化“空值”有意为空来源变量声明未赋值、函数无返回值、对象属性不存在手动赋值表示对象为空类型转换Number(undefined)-NaNNumber(null)-0最佳实践让 JS 引擎自动处理开发者主动赋值为null以释放引用或初始化❓ 问题 2为什么typeof null是object这是一个著名的JS 历史 Bug。在 JS 最初版本中值存储在 32 位单元中低 3 位用于存储类型标签。000代表对象。null的全是 0所以低 3 位也是000被误判为对象。为了兼容性这个 Bug 一直保留至今。❓ 问题 30.1 0.2 0.3吗答案是falseconsole.log(0.10.2);// 0.30000000000000004console.log(0.10.20.3);// false原因JS 使用 IEEE 754 双精度浮点数标准二进制无法精确表示 0.1 和 0.2导致精度丢失。解决使用误差范围比较或使用库如decimal.js。 总结类型存储位置拷贝方式典型检测基本类型栈 (Stack)值拷贝 (深拷贝效果)typeof引用类型堆 (Heap)引用拷贝 (浅拷贝)instanceof/toString 博主寄语数据类型是 JS 的根基。记住三个重点基本类型存值引用类型存地址。typeof null是object是历史遗留问题。想要精准判断类型请用Object.prototype.toString.call()。掌握了这些你就迈出了成为高级前端工程师坚实的一步希望这篇文档能帮你彻底理清 JS 数据类型如果有疑问欢迎在评论区留言。喜欢这篇文章吗记得点赞、收藏、转发哦❤️