如何判别JS中的数据类型？一篇文章教你彻底弄懂typeof和instanceof

console.log(typeof "Hello");      // "string"
console.log(typeof 42);           // "number"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object" (历史遗留问题！)
console.log(typeof []);           // "object"
console.log(typeof {});           // "object"
console.log(typeof function(){}); // "function"

class Animal {}
class Dog extends Animal {}

const fido = new Dog();

console.log(fido instanceof Dog);    // true
console.log(fido instanceof Animal);  // true
console.log(fido instanceof Object);  // true

const arr = [];
console.log(arr instanceof Array);   // true
console.log(arr instanceof Object);  // true

const date = new Date();
console.log(date instanceof Date);   // true

// 场景1：检查数组
const myArray = [1, 2, 3];

console.log(typeof myArray);      // "object" - 不够具体
console.log(myArray instanceof Array); // true - 完美！

// 场景2：检查数字
const myNumber = 42;

console.log(typeof myNumber);     // "number" - 正确
console.log(myNumber instanceof Number); // false - 失败！

// 场景3：检查null
const myNull = null;

console.log(typeof myNull);       // "object" - 错误！
// console.log(myNull instanceof Object); // 报错！

// 场景4：自定义类
class Pizza {}
const myPizza = new Pizza();

console.log(typeof myPizza);      // "object" - 不够具体
console.log(myPizza instanceof Pizza); // true - 完美！

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

console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
console.log(Object.prototype.toString.call(42)); // "[object Number]"

const arr = [];
console.log(arr.constructor === Array); // true

function Car() {}
const myCar = new Car();
console.log(myCar.constructor === Car); // true

// 检查是否是类数组对象
function isArrayLike(obj) {
    return obj && 
           typeof obj.length === 'number' && 
           typeof obj[0] !== 'undefined';
}

console.log(isArrayLike([])); // true
console.log(isArrayLike({length: 0})); // true
console.log(isArrayLike("hello")); // true

const user = {
    address: {
        street: "Main St"
    }
};

// 安全访问嵌套属性
console.log(user?.address?.street); // "Main St"
console.log(user?.contacts?.email); // undefined (不会报错)

const name = null;
console.log(name ?? "Anonymous"); // "Anonymous"

const age = 0;
console.log(age ?? 21); // 0 (不会误判0)

function isFish(pet: Fish | Bird): pet is Fish {
    return (pet as Fish).swim !== undefined;
}

const myPet: Fish | Bird = getPet();

if (isFish(myPet)) {
    myPet.swim(); // TypeScript知道myPet是Fish
} else {
    myPet.fly(); // TypeScript知道myPet是Bird
}

function validateFormField(value) {
    if (value === null || value === undefined) {
        return "值不能为空";
    }
    
    if (typeof value === "string" && value.trim() === "") {
        return "字符串不能为空";
    }
    
    if (typeof value === "number" && isNaN(value)) {
        return "数字无效";
    }
    
    return "验证通过";
}

async function fetchUserData() {
    try {
        const response = await fetch("/api/user");
        const data = await response.json();
        
        // 检查是否是期望的数据结构
        if (data && typeof data === "object" && 
            Array.isArray(data.posts) && 
            typeof data.name === "string") {
            return data;
        }
        
        throw new Error("无效的响应格式");
    } catch (error) {
        console.error("获取用户数据失败:", error);
        return null;
    }
}

function calculateArea(shape) {
    if (shape instanceof Rectangle) {
        return shape.width * shape.height;
    }
    
    if (shape instanceof Circle) {
        return Math.PI * shape.radius ** 2;
    }
    
    if (Array.isArray(shape) && shape.length === 2) {
        // 处理 [width, height] 数组
        return shape[0] * shape[1];
    }
    
    throw new Error("不支持的形状类型");
}