用js怎么查看一个数据类型

用JS查看一个数据类型的方法有多种，常见的包括：typeof操作符、instanceof操作符、Object.prototype.toString方法，这里我们详细介绍其中的typeof操作符。typeof操作符是JavaScript中查看数据类型最常用的方法之一，它返回一个字符串，表示未经计算的操作数的数据类型。以下是具体的使用方法和例子：

console.log(typeof 123); // "number"
console.log(typeof 'Hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (这是一个历史遗留问题)

一、JavaScript中的数据类型

JavaScript中的数据类型大致可以分为两类：原始类型（Primitive Types）和引用类型（Reference Types）。原始类型包括：Number、String、Boolean、Undefined、Null、Symbol、BigInt；引用类型包括：Object（包括Array、Function、Date等）。

1、原始类型

原始类型是不可变的简单数据类型。它们包括：

Number: 表示数字，包括整数和浮点数。
String: 表示字符串。
Boolean: 表示布尔值，只有true和false两个值。
Undefined: 表示变量未定义。
Null: 表示空值。
Symbol: 表示唯一且不可变的值，用于对象属性标识符。
BigInt: 表示任意精度的整数。

let num = 123;
let str = "Hello";
let bool = true;
let und;
let n = null;
let sym = Symbol('sym');
let bigInt = 123n;
console.log(typeof num); // "number"
console.log(typeof str); // "string"
console.log(typeof bool); // "boolean"
console.log(typeof und); // "undefined"
console.log(typeof n); // "object"
console.log(typeof sym); // "symbol"
console.log(typeof bigInt); // "bigint"

2、引用类型

引用类型是复杂的数据类型，它们包括对象、数组和函数等。引用类型是通过引用访问的，而不是直接访问。

Object: 用于存储键值对的集合和更复杂的实体。
Array: 用于存储有序集合。
Function: 用于存储可执行的代码块。

let obj = {};
let arr = [];
let func = function() {};
console.log(typeof obj); // "object"
console.log(typeof arr); // "object"
console.log(typeof func); // "function"

二、使用typeof操作符查看数据类型

1、基本用法

typeof操作符的基本用法是直接在变量或值前加上typeof关键字，它会返回一个表示数据类型的字符串。

console.log(typeof 123); // "number"
console.log(typeof 'Hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"

2、检测未定义的变量

typeof操作符在检测未定义的变量时不会抛出错误，它会返回"undefined"，这是它的一个显著优点。

console.log(typeof notDefinedVariable); // "undefined"

三、其他查看数据类型的方法

1、instanceof操作符

instanceof操作符用于检测对象的原型链中是否存在构造函数的prototype属性。它通常用于检测复杂的数据类型。

let arr = [];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true
let func = function() {};
console.log(func instanceof Function); // true
console.log(func instanceof Object); // true

2、Object.prototype.toString方法

Object.prototype.toString方法返回一个表示对象类型的字符串，更加精确，可以区分Array和Object。

console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call(function(){})); // "[object Function]"
console.log(Object.prototype.toString.call('')); // "[object String]"
console.log(Object.prototype.toString.call(123)); // "[object Number]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"

四、实战案例

1、检测函数参数类型

在编写函数时，检测参数类型可以提高代码的健壮性。例如，我们可以编写一个函数来检测传入参数是否为数组：

function isArray(param) {
    return Object.prototype.toString.call(param) === '[object Array]';
}
console.log(isArray([])); // true
console.log(isArray({})); // false

2、基于类型执行不同操作

有时根据数据类型执行不同的操作是必要的。以下是一个简单的例子：

function processData(data) {
    switch (typeof data) {
        case 'number':
            console.log('Processing number:', data);
            break;
        case 'string':
            console.log('Processing string:', data);
            break;
        case 'boolean':
            console.log('Processing boolean:', data);
            break;
        case 'object':
            if (Array.isArray(data)) {
                console.log('Processing array:', data);
            } else {
                console.log('Processing object:', data);
            }
            break;
        default:
            console.log('Unsupported data type:', typeof data);
    }
}
processData(123); // Processing number: 123
processData('Hello'); // Processing string: Hello
processData(true); // Processing boolean: true
processData([1, 2, 3]); // Processing array: [1, 2, 3]
processData({a: 1}); // Processing object: { a: 1 }

五、总结

在JavaScript中，查看数据类型的方法多种多样，typeof操作符是最常用的工具之一，适用于大多数场景。对于更复杂的类型检测，instanceof操作符和Object.prototype.toString方法提供了更强大的功能。无论选择哪种方法，了解这些工具的工作原理和适用场景是编写健壮代码的关键。通过这些方法，可以在实际开发中更好地处理不同类型的数据，提高代码的可读性和维护性。