1. JavaScript练习题的价值与学习方法
作为一名从业十年的全栈开发者，我深知JavaScript基础练习的重要性。很多人觉得练习题枯燥乏味，但实际上它们就像健身房的哑铃——看似简单，却是打造编程肌肉的最佳工具。JavaScript作为现代Web开发的基石语言，其核心概念如闭包、原型链、异步编程等，都需要通过大量练习才能真正掌握。
我建议的学习路径是：先掌握基础语法，然后通过练习题逐步深入理解语言特性。比如从简单的变量声明、条件判断开始，过渡到数组操作、对象处理，最后挑战高阶函数和异步编程。每个阶段都需要配套的练习题来巩固知识。
2. 基础练习题精选与解析
2.1 变量与数据类型练习
javascript复制// 练习1：交换两个变量的值
let a = 5;
let b = 10;
// 你的代码
这个看似简单的练习其实考察了临时变量的使用和赋值顺序。很多初学者会直接写a = b; b = a;，结果发现两个变量都变成了相同的值。正确的解法是：
javascript复制let temp = a;
a = b;
b = temp;
或者使用ES6的解构赋值：
javascript复制[a, b] = [b, a];
2.2 条件判断练习
javascript复制// 练习2：判断一个年份是否是闰年
function isLeapYear(year) {
// 你的代码
}
闰年判断需要考虑以下规则：
- 能被4整除但不能被100整除
- 或者能被400整除
完整实现：
javascript复制function isLeapYear(year) {
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}
注意：很多开发者会忽略能被400整除的情况，导致1900年等特殊年份判断错误。
3. 数组与对象操作练习
3.1 数组去重
javascript复制// 练习3：实现数组去重
function uniqueArray(arr) {
// 你的代码
}
传统解法使用双重循环，但ES6提供了更简洁的方式：
javascript复制function uniqueArray(arr) {
return [...new Set(arr)];
}
如果考虑兼容性，可以使用filter：
javascript复制function uniqueArray(arr) {
return arr.filter((item, index) => arr.indexOf(item) === index);
}
3.2 对象深拷贝
javascript复制// 练习4：实现对象深拷贝
function deepClone(obj) {
// 你的代码
}
简单实现（不考虑特殊对象类型）：
javascript复制function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
更完整的实现需要考虑各种边界情况：
javascript复制function deepClone(obj) {
if (obj === null || typeof obj !== 'object') return obj;
let clone = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
clone[key] = deepClone(obj[key]);
}
}
return clone;
}
4. 高阶函数与异步编程练习
4.1 实现Promise.all
javascript复制// 练习5：实现Promise.all
function promiseAll(promises) {
// 你的代码
}
这是理解Promise机制的绝佳练习：
javascript复制function promiseAll(promises) {
return new Promise((resolve, reject) => {
let results = [];
let completed = 0;
if (promises.length === 0) return resolve(results);
promises.forEach((promise, index) => {
Promise.resolve(promise).then(result => {
results[index] = result;
completed++;
if (completed === promises.length) {
resolve(results);
}
}).catch(reject);
});
});
}
4.2 实现防抖函数
javascript复制// 练习6：实现防抖函数
function debounce(fn, delay) {
// 你的代码
}
防抖是前端性能优化的重要技术：
javascript复制function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
5. 常见问题与调试技巧
5.1 变量提升陷阱
javascript复制console.log(a); // 输出什么？
var a = 10;
这个练习揭示了JavaScript的变量提升机制。实际执行顺序是：
javascript复制var a;
console.log(a); // undefined
a = 10;
5.2 this指向问题
javascript复制const obj = {
name: 'test',
print: function() {
console.log(this.name);
}
};
const print = obj.print;
print(); // 输出什么？
这里this指向全局对象（浏览器中是window），输出undefined。解决方法：
javascript复制// 使用bind
const print = obj.print.bind(obj);
// 或使用箭头函数定义print方法
6. 进阶练习建议
6.1 实现简易版React
尝试实现一个简易版的React可以深入理解虚拟DOM和组件化：
javascript复制function createElement(type, props, ...children) {
return { type, props, children };
}
function render(element, container) {
// 实现DOM渲染
}
6.2 实现观察者模式
javascript复制class EventEmitter {
constructor() {
this.events = {};
}
on(event, listener) {
// 实现订阅
}
emit(event, ...args) {
// 实现发布
}
}
7. 练习资源推荐
- LeetCode JavaScript专题
- Codewars JavaScript题目
- 30-seconds-of-code项目
- JavaScript30挑战
我在实际教学中发现，坚持每天解决2-3个JavaScript练习题，三个月后学生的编码能力会有质的飞跃。特别是对于闭包、原型链等抽象概念，通过具体问题的反复练习才能真正理解。