基础概念
- 解释
let
、const
和var
的区别。 - 什么是块级作用域?ES6 如何实现它?
- 箭头函数和普通函数的主要区别是什么?
- 解释模板字符串(Template Literals)的用途,并举例嵌套变量的写法。
- 解构赋值的语法是什么?如何解构对象和数组?
- 如何为解构赋值设置默认值?
- 扩展运算符(Spread Operator)有哪些用途?举例说明。
- 剩余参数(Rest Parameters)的作用是什么?和
arguments
对象的区别? - 解释 ES6 的
class
语法与传统构造函数的异同。 - 模块化中
export default
和export
的区别是什么?
代码输出与分析
- 以下代码输出什么?为什么?
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0);
}
// 改为 let 后输出什么?
- 以下代码的输出结果是什么?
const obj = { a: 1, b: 2 };
const { a: x, b: y } = obj;
console.log(x, y);
- 箭头函数中的
this
指向哪里?以下代码输出什么?
const obj = {
name: "Alice",
greet: () => console.log(this.name)
};
obj.greet();
- 以下代码的输出是什么?
const [a, , b] = [1, 2, 3];
console.log(a, b);
- 以下代码是否报错?为什么?
const a = 1;
a = 2;
- 以下代码的输出结果是什么?
const arr = [...'hello'];
console.log(arr);
- 以下代码的输出是什么?
function foo(x = 1, y = x) { console.log(y); }
foo(2);
- 以下代码的输出结果是什么?
const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 };
console.log(obj2 === obj1);
- 以下代码是否合法?
const func = (a, b, ...rest, c) => {};
- 以下代码的输出是什么?
const { a = 10, b = 5 } = { a: 3 };
console.log(a + b);
高级特性
- 什么是
Promise
?如何解决回调地狱问题? - 手写一个简单的
Promise
实现。 Promise.all
和Promise.race
的区别是什么?async/await
的工作原理是什么?如何捕获错误?- 解释生成器(Generator)的执行过程,写出一个生成器示例。
Symbol
的作用是什么?如何创建全局唯一的 Symbol?Map
和普通对象的区别是什么?WeakMap
有什么特性?Set
如何实现数组去重?Proxy
的用途是什么?写出一个拦截读取属性的示例。Reflect
对象的设计目的是什么?
综合应用
- 使用解构赋值交换两个变量的值。
- 用箭头函数实现一个阶乘函数。
- 使用扩展运算符合并两个对象。
- 用
Array.from
将类数组转为数组。 - 使用模板字符串编写多行 HTML 模板。
- 用
fetch
和async/await
实现数据请求。 - 实现一个简单的模块化项目(导出函数,导入并使用)。
- 使用
Map
实现一个缓存机制。 - 用
Proxy
实现数据双向绑定。 - 使用生成器实现斐波那契数列。
原理与陷阱
- 解释暂时性死区(Temporal Dead Zone)。
const
声明的对象属性可以修改吗?为什么?- 箭头函数能否用作构造函数?为什么?
Object.assign
是深拷贝还是浅拷贝?- 如何实现类的私有属性?(使用 Symbol 或 WeakMap)
- 解释
for...of
循环的内部机制(迭代器协议)。 - 模块加载的
import
是同步还是异步? - 为什么
WeakMap
的键必须是对象? - 解释尾调用优化(Tail Call Optimization)的条件。
async
函数的返回值是什么?
进阶题目
- 手写实现
Promise.all
。 - 手写实现
Array.prototype.flat
(扁平化数组)。 - 实现一个观察者模式(使用 Proxy 或 ES6 Class)。
- 使用生成器实现异步任务调度。
- 解释
Object.is
与===
的区别。 - 如何用
Reflect
替代Object
上的方法? - 用 ES6 语法实现单例模式。
- 使用
Array.reduce
实现Array.map
功能。 - 解释
String.raw
的用途。 - 如何用
Intl
对象实现国际化?
代码改错与优化
- 找出以下代码的问题:
let x = 10;
if (true) {
var x = 20;
}
- 修复箭头函数中的
this
问题:
const obj = {
data: [1, 2, 3],
getData: () => {
return this.data;
}
};
- 以下代码有何隐患?
const obj = { a: 1 };
const copy = Object.assign({}, obj);
copy.a = 2;
- 如何让以下代码输出
0, 1, 2
?
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0);
}
- 如何正确使用
async/await
改写以下代码?
fetch(url)
.then(res => res.json())
.then(data => console.log(data));
开放性问题
- ES6 中最值得推荐的特性是什么?为什么?
- 如何理解 JavaScript 的“模块化演进”?
Promise
和async/await
如何改变异步编程?- ES6 的类与 ES5 的构造函数有何本质区别?
- 解释 Event Loop 并画图说明
Promise
的执行顺序。
更多代码题
- 输出以下代码的结果:
console.log(typeof Symbol('id'));
- 以下代码的输出是什么?
const map = new Map();
map.set('a', 1);
map.set('b', 2);
console.log([...map]);
- 以下代码的输出是什么?
const set = new Set([1, 2, 2, 3]);
console.log(set.size);
- 以下代码是否报错?
new Promise((resolve) => resolve(1)).then(console.log);
- 以下代码的输出顺序是什么?
console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
- 如何使以下对象可迭代?
const obj = { a: 1, b: 2 };
// 使用 for...of 遍历值
- 以下代码的输出是什么?
function* gen() {
yield 1;
yield 2;
}
const g = gen();
console.log(g.next().value);
console.log(g.next().value);
- 以下代码的输出是什么?
const obj = { a: 1 };
const proxy = new Proxy(obj, {
get(target, prop) {
return prop in target ? target[prop] : 0;
}
});
console.log(proxy.b);
- 以下代码的输出是什么?
const { a, ...rest } = { a: 1, b: 2, c: 3 };
console.log(rest);
- 以下代码的输出是什么?
const arr = [1, 2];
const result = arr.map(num => num * 2).filter(num => num > 2);
console.log(result);
高级原理
- 解释
Proxy
和Reflect
的关系。 Object.create(null)
和{}
的区别是什么?- 如何实现一个可取消的
Promise
? - 解释
Generator
的协程(Coroutine)概念。 async/await
如何通过 Babel 转换为 ES5 代码?- ES6 Module 和 CommonJS 的区别是什么?
- 如何检测浏览器是否支持 ES6 特性?
- 解释
super
关键字的用法和限制。 - 如何实现继承(使用
class
和extends
)? new.target
的作用是什么?
综合实战
- 实现一个基于
Promise
的延迟函数delay(ms)
。 - 用 ES6 语法实现一个简单的观察者模式(Pub/Sub)。
- 手写一个函数,实现对象的深拷贝。
- 使用
reduce
实现数组的扁平化和去重。 - 用
Proxy
实现数组的负数索引访问(如arr[-1]
)。 - 使用
Generator
实现一个状态机。 - 用
async/await
实现并发请求(Promise.all
)。 - 手写一个简单的
Router
类(基于 History API)。 - 使用
Intersection Observer API
实现懒加载。 - 实现一个基于
Web Workers
的多线程计算示例。
以上题目覆盖了 ES6 的核心语法、特性、应用场景及底层原理,建议结合代码实践和官方文档深入学习。如果需要详细解答,可以针对具体题目进一步探讨!