基礎概念
- 解釋
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 的核心語法、特性、應用場景及底層原理，建議結合代碼實踐和官方文檔深入學習。如果需要詳細解答，可以針對具體題目進一步探討！
