JavaScript编程10个实用技巧

// 传统写法
setTimeout(function() {
    console.log('Hello');
}, 1000);

// 箭头函数
setTimeout(() => console.log('Hello'), 1000);

const config = {apiUrl: 'https://api.example.com', timeout: 5000};
const {apiUrl, timeout} = config;

const name = '李四';
console.log(`欢迎 ${name} 使用我们的服务！`);

// 安全访问嵌套属性
const userCity = user?.address?.city ?? '未知';

const port = process.env.PORT ?? 3000;

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1,2,3,4,5]

// 使用async/await替代.then()
async function fetchData() {
    try {
        const data = await fetch('/api/data');
        return data.json();
    } catch (error) {
        console.error('请求失败', error);
    }
}

const result = array
    .filter(item => item.active)
    .map(item => item.name)
    .slice(0, 10);

// 条件赋值
const isAdmin = user.role === 'admin';
isAdmin && showAdminPanel();

// 避免为每个子元素绑定事件
document.getElementById('list').addEventListener('click', (e) => {
    if (e.target.tagName === 'LI') {
        console.log('点击了:', e.target.textContent);
    }
});