数据类型与判断
文章目录
- 数据类型与判断
- **1. JS 的数据类型有哪些?**
- **2. `null` 和 `undefined` 的区别**
- **3. 如何判断数据类型**
- **(1) `typeof`**
- **(2) `Array.isArray()`**
- **(3) `instanceof`**
- **(4) `Object.prototype.toString.call()`**
- **(5) 自定义工具函数**
- **4. 常见问题与陷阱**
- **总结**
- **总结表:类型判断方法对比**
1. JS 的数据类型有哪些?
JavaScript 数据类型分为 基本数据类型 和 引用数据类型:
类型 | 说明 | 示例 |
---|---|---|
基本数据类型 | ||
number | 整数、浮点数、Infinity 、NaN 等 | 42 , 3.14 , NaN |
string | 字符串(单引号、双引号、模板字符串) | 'hello' , "world" |
boolean | 布尔值 | true , false |
null | 表示空值(通常由程序员显式赋值) | let a = null; |
undefined | 变量未初始化时的默认值 | let b; → undefined |
symbol | 唯一且不可变的值(ES6 新增,用于对象属性键) | Symbol('key') |
bigint | 大整数(ES2020 新增,用于精确表示大数) | 123n |
引用数据类型 | ||
object | 对象、数组、函数、日期等 | {} , [] , function(){} |
2. null
和 undefined
的区别
特性 | null | undefined |
---|---|---|
含义 | 显式表示“空值” | 变量未初始化时的默认值 |
类型 | typeof null → 'object' | typeof undefined → 'undefined' |
赋值场景 | 程序员主动赋空值 | 变量声明未赋值时自动获得 |
相等性 | null == undefined → true | null === undefined → false |
典型用途 | 清空对象引用 | 变量未初始化或函数无返回值 |
示例:
let a;
console.log(a); // undefined(未赋值)let b = null;
console.log(b); // null(主动赋值)
3. 如何判断数据类型
(1) typeof
-
返回值的字符串表示(如
"number"
、"string"
)。
局限性:
typeof null
→"object"
(历史遗留问题)。- 无法区分
object
的具体类型(如数组、日期)。
示例:
typeof 123; // "number"
typeof "abc"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof {}; // "object"
typeof []; // "object"
typeof null; // 'object'
typeof function(){}; // "function"
typeof Symbol(); // "symbol"
typeof 10n; // "bigint"
(2) Array.isArray()
- 专门用于判断是否为数组。
- 优势:比
instanceof
更可靠(跨 iframe/窗口时有效)。
示例:
Array.isArray([1, 2]); // true
Array.isArray({ a: 1 }); // false
(3) instanceof
- 判断对象是否是某个构造函数的实例。
- 局限性:跨上下文(如 iframe)时可能失效。
示例:
[] instanceof Array; // true
{} instanceof Object; // true
(function() {}) instanceof Function; // true
'str' instanceof String; // false(基本数据类型无法用 instanceof)
(4) Object.prototype.toString.call()
- 通用方法,返回
[object Type]
。 - 优势:可准确判断所有类型。
示例:
Object.prototype.toString.call(123); // "[object Number]"
Object.prototype.toString.call("abc"); // "[object String]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call({}); // "[object Object]"
(5) 自定义工具函数
结合上述方法封装通用类型判断:
function getType(value) {return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}getType(123); // "number"
getType("abc"); // "string"
getType([]); // "array"
getType({}); // "object"
getType(null); // "null"
getType(undefined); // "undefined"
4. 常见问题与陷阱
typeof null
返回"object"
- 这是 JavaScript 的历史设计错误,需通过
value === null
判断。
- 这是 JavaScript 的历史设计错误,需通过
- 区分数组和普通对象
- 推荐使用
Array.isArray()
或Object.prototype.toString.call()
。
- 推荐使用
- 跨上下文类型判断
instanceof
在跨 iframe 时可能失效,需用其他方法。
总结
判断目标 | 推荐方法 |
---|---|
基本类型 | typeof |
数组 | Array.isArray() 或 Object.prototype.toString.call() |
null | value === null |
undefined | value === undefined |
通用类型判断 | Object.prototype.toString.call() |
总结表:类型判断方法对比
方法 | 适用场景 | 示例 |
---|---|---|
typeof | 基本数据类型类型(null 除外) | typeof 'str' → 'string' |
Array.isArray() | 判断数组 | Array.isArray([]) → true |
instanceof | 对象实例判断(不跨全局环境) | [] instanceof Array → true |
判断数组 | Array.isArray([]) → true | |
instanceof | 对象实例判断(不跨全局环境) | [] instanceof Array → true |
Object.prototype.toString | 通用类型判断 | toString.call(null) → '[object Null]' |