JavaScript开发中5个隐藏陷阱与解决方法详解

// 反面教材：变量声明混乱
function calculatePrice(quantity, price) {
    total = quantity * price;  // 隐式全局变量，太危险了！
    discount = 0.1;           // 又一个隐式全局变量
    return total - total * discount;
}

// 正确写法：使用const和let
function calculatePrice(quantity, price) {
    const discount = 0.1;     // 不会变的用const
    let total = quantity * price;  // 可能会变的用let
    return total - total * discount;
}

// 你以为的执行顺序 vs 实际的执行顺序
console.log(myVar);    // 输出undefined，而不是报错
var myVar = 'hello';

// 相当于：
var myVar;            // 变量声明被提升到顶部
console.log(myVar);   // 此时myVar是undefined
myVar = 'hello';      // 赋值操作留在原地

// 一个典型的异步陷阱
function fetchUserData(userId) {
    let userData;
    
    // 模拟API调用
    setTimeout(() => {
        userData = {name: '小明', age: 25};
    }, 1000);
    
    return userData;  // 这里返回的是undefined！
}

// 改进版本：使用Promise
function fetchUserData(userId) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({name: '小明', age: 25});
        }, 1000);
    });
}

// 或者用更现代的async/await
async function getUserInfo(userId) {
    try {
        const userData = await fetchUserData(userId);
        const userProfile = await fetchUserProfile(userData.id);
        return { ...userData, ...userProfile };
    } catch (error) {
        console.error('获取用户信息失败:', error);
        throw error;  // 不要静默吞掉错误！
    }
}

// 这些结果可能会让你怀疑人生
console.log([] == false);           // true
console.log([] == 0);              // true  
console.log('' == 0);              // true
console.log(null == undefined);     // true
console.log(' \t\r\n ' == 0);       // true

// 更安全的做法：使用严格相等
console.log([] === false);          // false
console.log('' === 0);              // false

// 以前的写法：层层判断
const street = user && user.address && user.address.street;

// 现在的写法：简洁安全
const street = user?.address?.street ?? '默认街道';

// 函数调用也可以安全了
const result = someObject.someMethod?.();

// this指向的经典陷阱
const buttonHandler = {
    message: '按钮被点击了',
    setup() {
        document.getElementById('myButton').addEventListener('click', function() {
            console.log(this.message);  // 输出undefined，因为this指向按钮元素
        });
    }
};

// 解决方案1：使用箭头函数
const buttonHandler = {
    message: '按钮被点击了',
    setup() {
        document.getElementById('myButton').addEventListener('click', () => {
            console.log(this.message);  // 正确输出：按钮被点击了
        });
    }
};

// 解决方案2：提前绑定
const buttonHandler = {
    message: '按钮被点击了',
    setup() {
        document.getElementById('myButton').addEventListener('click', this.handleClick.bind(this));
    },
    handleClick() {
        console.log(this.message);
    }
};

// 闭包的经典问题
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);  // 输出5个5，而不是0,1,2,3,4
    }, 100);
}

// 解决方案1：使用let
for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);  // 正确输出：0,1,2,3,4
    }, 100);
}

// 解决方案2：使用闭包保存状态
for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(j);  // 正确输出：0,1,2,3,4
        }, 100);
    })(i);
}

// TypeScript能在编译期就发现类型错误
interface User {
    name: string;
    age: number;
    email?: string;  // 可选属性
}

function createUser(user: User): User {
    // 如果传入了不存在的属性，TypeScript会报错
    return {
        name: user.name,
        age: user.age,
        email: user.email
    };
}

// 调用时如果缺少必需属性，也会报错
const newUser = createUser({
    name: '小红',
    age: 23
    // 忘记传email不会报错，因为它是可选的
});

// .eslintrc.js 配置示例
module.exports = {
    extends: [
        'eslint:recommended',
        '@typescript-eslint/recommended'
    ],
    rules: {
        'eqeqeq': 'error',           // 强制使用===
        'no-var': 'error',           // 禁止使用var
        'prefer-const': 'error',     // 建议使用const
        'no-unused-vars': 'error'    // 禁止未使用变量
    }
};

// 示例测试用例
describe('用户管理功能', () => {
    test('应该能正确创建用户', () => {
        const user = createUser({name: '测试用户', age: 30});
        expect(user.name).toBe('测试用户');
        expect(user.age).toBe(30);
    });

    test('创建用户时缺少必需字段应该报错', () => {
        expect(() => {
            createUser({name: '测试用户'}); // 缺少age字段
        }).toThrow();
    });
});