当前位置：首页 > article >正文

JavaScript如何判断变量数据类型 - 2024最新版前端秋招面试短期突击面试题【100道】

article 2025/1/22 23:53:23

JavaScript如何判断变量数据类型 - 2024最新版前端秋招面试短期突击面试题【100道】 🖥️

在JavaScript中，判断变量的数据类型是前端开发中的一个基本技能。虽然JavaScript提供了多种方法来判断变量类型，但每种方法都有其适用场景和优缺点。以下是几种常用的方式，帮助你更准确地判断变量的数据类型。

1. 使用 `typeof` 运算符 🔍

typeof 运算符可以返回一个变量值的类型，返回值包括：“string”, “number”, “bigint”, “boolean”, “undefined”, “symbol”, “object”, “function”。

示例代码

let num = 10;
console.log(typeof num); // 输出 "number"

let str = "Hello";
console.log(typeof str); // 输出 "string"

let bool = true;
console.log(typeof bool); // 输出 "boolean"

let arr = [1, 2, 3];
console.log(typeof arr); // 输出 "object" (注意，数组也被视为对象)

let obj = { name: "Alice" };
console.log(typeof obj); // 输出 "object"

let func = function() {};
console.log(typeof func); // 输出 "function"

let undef;
console.log(typeof undef); // 输出 "undefined"

let sym = Symbol();
console.log(typeof sym); // 输出 "symbol"

2. 使用 `instanceof` 操作符 🧩

instanceof 操作符可以判断一个变量是否是特定构造函数的实例。

示例代码

let arr = [1, 2, 3];
console.log(arr instanceof Array); // 输出 true

let obj = { name: "Alice" };
console.log(arr instanceof Object); // 输出 true

3. 使用 `Object.prototype.toString` 方法 🛠️

这种方法利用了 Object.prototype.toString 方法返回对象类型字符串的特性，通过调用 call 方法传入需要判断的变量，可以得到该变量的类型字符串。

示例代码

let arr = [1, 2, 3];
console.log(Object.prototype.toString.call(arr)); // 输出 '[object Array]'

4. 使用 `constructor` 属性 🔑

判断一个变量的 constructor 属性是否指向特定构造函数。

示例代码

let arr = [1, 2, 3];
console.log(arr.constructor === Array); // 输出 true

选择方法 ⚖️

typeof 运算符：适用于判断基本数据类型，但对于 null 和数组返回值不够精确。
instanceof 操作符：适用于判断引用类型，但需要注意 instanceof 可能受到原型链的影响。
Object.prototype.toString.call() 方法：返回更精确的对象类型字符串，但需要对字符串进行解析。
constructor 属性：可能会被修改，不是最可靠的方法。

示例函数

以下是一个综合使用上述方法的示例函数，用于判断变量类型：

function getType(value) {
    if (typeof value === "object") {
        if (value === null) {
            return "null";
        }
        return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
    }
    return typeof value;
}

console.log(getType(10)); // 输出 "number"
console.log(getType([1, 2, 3])); // 输出 "array"
console.log(getType({ name: "Alice" })); // 输出 "object"
console.log(getType(function() {})); // 输出 "function"
console.log(getType(undefined)); // 输出 "undefined"
console.log(getType(Symbol())); // 输出 "symbol"