JavaScript篇：JS数据类型大乱斗：谁才是类型判断的王者？

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：906392632

大家好，我是小杨，一个在前端圈子里摸爬滚打多年的开发者。今天咱们来聊聊 JavaScript的数据类型，以及如何准确判断它们。

你是不是也遇到过这样的场景？

• 代码里明明是个数字，typeof 却告诉你它是 "object"？
• 用 == 比较变量时，0 和 false 竟然相等？
• 想判断一个变量是不是数组，结果发现 typeof [] 返回 "object"？

别慌！今天我们就来彻底搞懂JS的数据类型，以及如何正确判断它们。

---

一、JS有哪些数据类型？

JS的数据类型可以分为两大类：

1. 基本类型（Primitive Types）
2. 引用类型（Reference Types）

1. 基本类型（值类型）

• number（数字）
• string（字符串）
• boolean（布尔值）
• undefined（未定义）
• null（空值）
• symbol（ES6新增，唯一标识符）
• bigint（ES11新增，大整数）

特点：

• 存储在栈内存，直接访问值。
• 赋值时是值拷贝，修改不会影响原变量。

let age = 18;  
let newAge = age;  
newAge = 20;  

console.log(age); // 18（原值不变）
console.log(newAge); // 20

2. 引用类型（对象类型）

• object（普通对象、数组、函数、日期等）

特点：

• 存储在堆内存 ，变量存储的是内存地址。
• 赋值时是引用拷贝，修改会影响原变量。

let me = { name: "我", age: 18 };  
let you = me;  
you.age = 20;  

console.log(me.age); // 20（原对象被修改）
console.log(you.age); // 20

---

二、如何判断数据类型？

JS提供了好几种判断数据类型的方法，但各有优缺点：

方法	示例	优点	缺点
typeof	typeof 123 → "number"	能识别基本类型	typeof null → "object"
instanceof	[] instanceof Array → true	能判断引用类型	不能用于基本类型
Object.prototype.toString.call()	toString.call([]) → "[object Array]"	最精准	写法稍复杂
Array.isArray()	Array.isArray([]) → true	专门判断数组	只能用于数组

1. typeof ------ 基本类型的首选

console.log(typeof 123); // "number"  
console.log(typeof "我"); // "string"  
console.log(typeof true); // "boolean"  
console.log(typeof undefined); // "undefined"  
console.log(typeof null); // "object"（历史遗留bug！）  
console.log(typeof []); // "object"（不能区分数组和对象）  
console.log(typeof function() {}); // "function"  

适用场景 ：判断基本类型（除了 null）。

2. instanceof ------ 引用类型的判断

console.log([] instanceof Array); // true  
console.log({} instanceof Object); // true  
console.log(function() {} instanceof Function); // true  
console.log(123 instanceof Number); // false（基本类型不行）  

适用场景：判断对象的具体类型（如数组、函数）。

3. Object.prototype.toString.call() ------ 终极方案

console.log(Object.prototype.toString.call(123)); // "[object Number]"  
console.log(Object.prototype.toString.call("我")); // "[object String]"  
console.log(Object.prototype.toString.call([])); // "[object Array]"  
console.log(Object.prototype.toString.call(null)); // "[object Null]"  

适用场景：最精准的判断方式，适用于所有类型。

4. Array.isArray() ------ 数组专用

console.log(Array.isArray([])); // true  
console.log(Array.isArray({})); // false  

适用场景 ：专门判断数组，比 instanceof 更可靠。

---

三、总结：如何选择判断方法？

数据类型	推荐判断方式
基本类型	typeof（注意 null 要用 ===）
数组	Array.isArray() 或 toString.call()
对象/函数	instanceof 或 toString.call()
终极方案	Object.prototype.toString.call()

代码示例

function getType(data) {
  if (data === null) return "null"; // 单独处理null
  if (typeof data !== "object") return typeof data; // 基本类型
  return Object.prototype.toString.call(data).slice(8, -1).toLowerCase();
}

console.log(getType(123)); // "number"  
console.log(getType("我")); // "string"  
console.log(getType([])); // "array"  
console.log(getType(null)); // "null"  

---

四、常见坑点

1. typeof null 返回 "object"

   • 这是JS的历史遗留问题，只能用 === null 判断。

2. [] instanceof Object 返回 true

   • 因为数组也是对象，所以要用 Array.isArray() 更准确。

3. == 会进行隐式类型转换

   console.log(0 == false); // true（因为0和false都会转成0）
   console.log("" == false); // true（空字符串和false都会转成0）

   建议用 === 严格比较。

---

五、总结

• 基本类型 ：number、string、boolean、undefined、null、symbol、bigint。

• 引用类型 ：object（包括数组、函数等）。

• 判断方法：

  • typeof → 适合基本类型（除 null）。
  • instanceof → 适合引用类型（如数组、函数）。
  • Object.prototype.toString.call() → 终极方案，最精准。
  • Array.isArray() → 专门判断数组。

现在，你是不是对JS的数据类型和判断方法更清晰了？如果有疑问，欢迎在评论区交流！ 🚀