JavaScript 基础核心知识点闯关练习 🚀
欢迎来到 JS 基础闯关！
我为你准备了 5 大关卡，每个关卡 5-8 道题，由易到难，覆盖 JS 最核心的知识点。
玩法规则：
- 每题我会给出 题目 + 代码（如果有），你先自己思考答案。
- 然后看我给出的 解析 + 正确答案（带详细解释）。
- 做完一关后，可以告诉我“进入下一关” 或 “重做第X关”，我继续出题或讲解。
- 全部通关后，我会给你 总评 + 进阶建议。
第 1 关：数据类型与变量（基础入门）
1. JavaScript 有哪些基本数据类型？ES6 后新增了哪些？它们存储在栈还是堆？
2. 下面代码输出什么？为什么？
console.log(typeof null);
console.log(typeof NaN);
console.log(typeof []);
3. var、let、const 的区别是什么？（至少说出 3 点）
4. 以下代码会报错吗？为什么？
const obj = { name: '张三' };
obj.name = '李四';
console.log(obj.name);
5. 隐式类型转换：输出结果是？
console.log('5' + 3);
console.log('5' - 3);
console.log('5' * 3);
console.log([] + []);
console.log([] + {});
第 2 关：作用域与闭包（高频必考）
1. 解释什么是作用域链？全局作用域、函数作用域、块级作用域的区别？
2. 下面代码输出什么？为什么？（经典闭包题）
for (var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i);
}, 0);
}
3. 如何修改上面代码，让它输出 0 1 2 3 4？（至少给出 2 种方法）
4. 什么是闭包？闭包有什么优点和缺点？举一个实际使用闭包的例子。
5. 下面代码输出什么？
function createCounter() {
let count = 0;
return function() {
return ++count;
};
}
const counter1 = createCounter();
const counter2 = createCounter();
console.log(counter1()); // ?
console.log(counter1()); // ?
console.log(counter2()); // ?
第 3 关：this 指向与原型/原型链（核心难点）
1. this 的指向规则有哪些？（new、显式绑定、隐式绑定、默认绑定）
2. 下面代码输出什么？
const obj = {
name: 'obj',
say: function() {
console.log(this.name);
}
};
const fn = obj.say;
fn();
3. new 操作符具体做了哪 4 件事？
4. 原型链是什么？Object.prototype 是原型链的终点吗？
5. 下面代码中 a、b、c 分别输出什么？
function Foo() {}
Foo.prototype.name = 'Foo';
const f1 = new Foo();
const f2 = new Foo();
f1.name = 'f1';
console.log(f1.name); // ?
console.log(f2.name); // ?
console.log(Foo.prototype.name); // ?
第 4 关：异步编程与 Event Loop（现代 JS 必备）
1. JavaScript 是单线程的，为什么还能实现异步？说说 Event Loop 的执行过程。
2. 下面代码的输出顺序是？（宏任务 + 微任务）
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
3. async/await 的本质是什么？它和 Promise 的关系？
4. 以下代码会输出什么？为什么？
async function asyncFunc() {
console.log('A');
await Promise.resolve();
console.log('B');
}
asyncFunc();
console.log('C');
5. 手写一个 Promise.all（或简单描述实现思路）。
第 5 关：数组、对象与 ES6+ 特性（实战应用）
1. 数组去重有哪几种方法？（至少 3 种，包含 ES6）
2. 下面代码输出什么？
const arr = [1, 2, 3];
arr.forEach(item => {
console.log(item);
return item * 2; // 这行有效吗？
});
3. 深拷贝和浅拷贝的区别？如何实现一个深拷贝？（考虑循环引用）
4. 解释一下解构赋值、扩展运算符（…）的用途，并举例。
5. Map 和 Object 的区别？Set 和 Array 的区别？什么时候该用哪一个？
6. 箭头函数和普通函数的区别（this、arguments、构造函数等方面）。
准备好了吗？
回复以下任意内容开始闯关：
- “开始第1关”
- “直接全部出题”
- “我要看答案解析”
- 或者直接说 “第X关”
我还会根据你的回答情况，实时调整难度或补充更多变体题。
通关奖励：
- 全部正确 → 我给你出一套 进阶挑战题（Promise 手写、事件委托、防抖节流等）
- 有错 → 我针对性讲解 + 额外练习题
快来挑战吧！💪
你现在想从哪一关开始？
