JavaScript 中基本数据类型及数据类型判断方法详解

在 JavaScript 中，数据类型分为原始数据类型和引用数据类型，了解这些数据类型以及如何准确判断它们，对于编写高质量的 JavaScript 代码至关重要。

一、JavaScript 中的数据类型

（一）原始数据类型

JavaScript 中的原始数据类型包括：

1. number：用于表示数字，包括整数和浮点数，例如 1、3.14 等。
2. string：用于表示文本字符串，例如 "Hello, World!"。
3. boolean：只有两个值，true 和 false，用于表示逻辑上的真或假。
4. null：表示一个空值，通常用于表示一个变量尚未指向任何对象。
5. undefined：当一个变量被声明但未被赋值时，其值为 undefined。
6. symbol（ES6 引入）：是一种唯一的标识符，通过 Symbol() 函数创建，每个 symbol 值都是独一无二的。
7. bigInt（ES10 引入）：用于表示任意精度的整数，可以处理超出 number 类型范围的大整数。

（二）引用数据类型

引用数据类型主要是 object，其中又包含了多种具体类型，如：

1. array：用于存储一组有序的数据，可以包含不同类型的元素。
2. function：在 JavaScript 中函数也是一种对象，用于定义可执行的代码块。
3. object：最基本的引用类型，用于存储键值对形式的数据。

二、JavaScript 中的构造函数

JavaScript 中有多种构造函数，用于创建特定类型的对象，常见的有：String、Number、Boolean、Symbol、Object、Array、Function、RegExp 等。

三、判断 JavaScript 数据类型的方法

（一）typeof 操作符

typeof 操作符用于检测数据类型，它返回一个字符串，表示数据的类型。

1. 使用方法及示例：

   • 数值：

收起

javascript

typeof 333 === 'number';
typeof NaN === 'number';
typeof Number(333) === 'number'; // Number 会把值转为数值类型

• 字符串：

收起

javascript

typeof '333' ==='string';
typeof String(333) ==='string';

• 布尔值：

收起

javascript

typeof true === 'boolean';
typeof Boolean(1) === 'boolean';

• symbol：

收起

javascript

typeof Symbol() ==='symbol';
typeof Symbol('foo') ==='symbol';

• undefined：

收起

javascript

typeof undefined === 'undefined';
typeof declaredButUndefined === 'undefined';

• object（通过 new 创建的数据，除了 new Function()） ：

收起

javascript

typeof { name: '张三' } === 'object';
typeof [1, 2, 3] === 'object';
typeof null === 'object';
typeof new String() === 'object';
typeof new Number() === 'object';
typeof new Boolean() === 'object';

• function：

收起

javascript

typeof function () {} === 'function';
typeof class c {} === 'function';
typeof Math.sin === 'function';
typeof new Function() === 'function';

2. 注意点：

   • typeof 检测数据类型返回结果皆为字符串。
   • typeof 检测结果除了 JavaScript 数据类型中的 'array'、'null' 外，其他类型都有：number、string、boolean、undefined、function、object、symbol。
   • typeof [1, 2, 3] === 'object'，typeof null === 'object'，这是 JavaScript 语言的历史遗留问题。
   • typeof 判断引用类型时不太准确，例如 typeof '123' ==='string' 而 typeof new String('123') === 'object'。
   • 由构造函数 new() 创建的数据对象检测结果都为 'object'，除了 new Function() 结果为 'function'。

（二）instanceof 操作符

instanceof 用于判断一个实例是否属于某种类型，即检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

1. 使用示例：

收起

javascript

console.log(1 instanceof Number); // false
console.log("1" instanceof String); // false
console.log(true instanceof Boolean); // false

console.log(new Number(1) instanceof Number); // true
console.log(new String("1") instanceof String); // true
console.log(new Boolean(true) instanceof Boolean); // true

console.log(function Foo() {} instanceof Function); // true
console.log({} instanceof Object); // true
console.log([] instanceof Array); // true

2. 注意点：

   • 待检测数据应该是个实例对象，像 '123'、123、false 等 JavaScript 基础类型数据（非引用类型数据）无法判断其类型。
   • 一般可结合 typeof 判断结果（如 typeof {} === 'object'），再继而用 instanceof 判断数据类型就会很精确。
   • “引用类型数据” instanceof Object === true。

（三）constructor 属性

每个对象都有 constructor 属性，它指向创建该对象的构造函数。

1. 使用示例：

收起

javascript

console.log((1).constructor === Number); // true
console.log("1".constructor === String); // true
console.log(true.constructor === Boolean); // true
console.log([].constructor === Array); // true
console.log({}.constructor === Object); // true
console.log(function Foo() {}.constructor === Function); // true

2. 注意点：当创建一个对象并改变它的原型时，constructor 判断就不再准确了，例如：

收起

javascript

function Foo() {}
Foo.prototype = new Array();
let foo = new Foo();
console.log(foo.constructor === Array); // true

（四）Object.prototype.toString.call(variable).slice(8, -1)

这是最直接有效的判断数据类型的方式，通过 Object.prototype.toString() 方法来获取对象的内部类型信息。

1. 使用示例：

收起

javascript

const getType = (variable) => Object.prototype.toString.call(variable).slice(8, -1).toLowerCase();
getType('');     // string
getType(0);      // number
getType();       // undefined
getType(null);   // null
getType({});     // object
getType([]);     // array
getType(0);      // number
getType(() => {});  // function

四、延伸：判断 typeof 为 object 时数据是数组还是对象

（一）使用数组内置方法 isArray

Array.isArray() 方法用于判断一个变量是否是数组，但是只能判断变量是否是数组，对象需要另外判断。

收起

javascript

const a = [1, 2, 3, 4];
const b = { "name": "abc" };
console.log(Array.isArray(a)); // true  
console.log(Array.isArray(b)); // false

（二）使用 constructor 来判断

可以通过对象的 constructor 属性来判断是数组还是对象，但要注意原型被改变的情况。

（三）使用 instanceOf 运算符

通过 instanceof 运算符判断对象是否是 Array 的实例，同时结合 typeof 判断是否为 object 类型来准确区分。

通过对 JavaScript 数据类型及其判断方法的深入了解，我们能够在开发过程中更加准确地处理数据，避免因数据类型判断错误而导致的问题。希望本文对你理解 JavaScript 数据类型有所帮助。