前端面試題之ES6保姆級教程

ES6 核心特性深度解析：現代 JavaScript 開發基石

2015 年發布的 ECMAScript 2015（ES6）徹底改變了 JavaScript 的編程范式，本文將全面剖析其核心特性及最佳實踐

一、ES6 簡介與背景

ECMAScript 6.0（簡稱 ES6）是 JavaScript 語言的下一代標準，于 2015 年 6 月正式發布。ECMAScript 和 JavaScript 本質上是同一種語言，前者是后者的規格標準，后者是前者的一種實現。ES6 的目標是使 JavaScript 能夠編寫復雜的大型應用程序，成為企業級開發語言。3

ES6 的發布解決了 ES5 時代的諸多痛點，包括變量提升、作用域混亂、回調地獄等問題，同時引入了類模塊化支持、箭頭函數、Promise?等現代化語言特性。目前所有現代瀏覽器和 Node.js 環境都已全面支持 ES6 特性，對于舊版瀏覽器可通過 Babel 等轉譯工具進行兼容處理。5

二、變量聲明：let 與 const

2.1 塊級作用域的革命

ES6 之前，JavaScript 只有全局作用域和函數作用域，這導致了許多意想不到的行為：

// ES5 的陷阱
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {console.log(i); // 總是輸出 btns.length};
}

let 和 const 引入了塊級作用域，解決了這個問題：

// 使用 let 的正確方式
for (let i = 0; i < btns.length; i++) {btns[i].onclick = function() {console.log(i); // 正確輸出對應索引};
}

2.2 let 與 const 詳解

特性	var	let	const
作用域	函數作用域	塊級作用域	塊級作用域
重復聲明	允許	禁止	禁止
變量提升	存在	暫時性死區	暫時性死區
值可變性	可變	可變	不可變（基本類型）

const 的實質：const 實際上保證的是變量指向的內存地址不變，而非值不變。對于引用類型：

const arr = [1, 2, 3];
arr.push(4);    // 允許，修改引用指向的內容
arr = [5, 6];   // 報錯，試圖改變引用本身

三、箭頭函數：簡潔與 this 綁定

3.1 語法革新

箭頭函數提供更簡潔的函數表達式：

// 傳統函數
const sum = function(a, b) {return a + b;
};// 箭頭函數
const sum = (a, b) => a + b;// 單個參數可省略括號
const square = n => n * n;// 無參數需要空括號
const logHello = () => console.log('Hello');

3.2 this 綁定的顛覆

箭頭函數沒有自己的 this，它繼承定義時所在上下文的 this 值：

// ES5 中的 this 問題
var obj = {name: 'Alice',sayHi: function() {setTimeout(function() {console.log('Hello, ' + this.name); // this 指向 window}, 100);}
};// 箭頭函數解決方案
const obj = {name: 'Alice',sayHi: function() {setTimeout(() => {console.log(`Hello, ${this.name}`); // 正確輸出 'Hello, Alice'}, 100);}
};

重要限制：箭頭函數不能用作構造函數，也沒有 arguments 對象。需要獲取參數時可用剩余參數替代：

const add = (...args) => args.reduce((acc, val) => acc + val, 0);
console.log(add(1, 2, 3)); // 輸出 6

四、解構賦值：數據提取的藝術

4.1 數組與對象解構

// 數組解構
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest); // [3, 4, 5]// 對象解構
const { name, age } = { name: 'Alice', age: 30, job: 'Engineer' };
console.log(name); // 'Alice'// 重命名變量
const { name: personName } = { name: 'Bob' };
console.log(personName); // 'Bob'// 嵌套解構
const { p: [x, { y }] } = { p: ['Hello', { y: 'World' }] };
console.log(x); // 'Hello'
console.log(y); // 'World'

4.2 默認值與函數參數

// 解構默認值
const { setting = 'default' } = {};// 函數參數解構
function connect({ host = 'localhost', port = 8080 } = {}) {console.log(`Connecting to ${host}:${port}`);
}
connect({ port: 3000 }); // Connecting to localhost:3000

五、模板字符串：字符串處理的新范式

模板字符串使用反引號（``）定義，支持多行字符串和表達式插值：

const name = 'Alice';
const age = 30;// 基礎用法
const greeting = `Hello, ${name}! 
You are ${age} years old.`;// 表達式計算
const price = 19.99;
const taxRate = 0.08;
const total = `Total: $${(price * (1 + taxRate)).toFixed(2)}`;// 標簽模板（高級用法）
function highlight(strings, ...values) {return strings.reduce((result, str, i) => `${result}${str}<mark>${values[i] || ''}</mark>`, '');
}const message = highlight`Hello ${name}, your total is ${total}`;

六、展開與收集運算符：…

三點運算符（...）具有雙重功能：收集剩余參數和展開可迭代對象

6.1 函數參數處理

// 收集參數
function sum(a, b, ...rest) {return rest.reduce((acc, val) => acc + val, a + b);
}
console.log(sum(1, 2, 3, 4)); // 10// 代替 arguments 對象
const logArguments = (...args) => console.log(args);

6.2 數組與對象操作

// 數組合并
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]// 對象合并
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a:1, b:2, c:3 }// React 中的 props 傳遞
const Button = (props) => {const { size, ...rest } = props;return <button size={size} {...rest} />;
};

七、增強的對象字面量與 Class

7.1 對象字面量增強

const name = 'Alice';
const age = 30;// 屬性簡寫
const person = { name, age };// 方法簡寫
const calculator = {add(a, b) {return a + b;},multiply(a, b) {return a * b;}
};// 計算屬性名
const key = 'uniqueKey';
const obj = {[key]: 'value',[`${key}Hash`]: 'hashedValue'
};

7.2 Class 語法糖

ES6 的 class 本質上是基于原型的語法糖：

class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}class Dog extends Animal {constructor(name, breed) {super(name);this.breed = breed;}speak() {console.log(`${this.name} barks!`);}static info() {console.log('Dogs are loyal animals');}
}const lab = new Dog('Max', 'Labrador');
lab.speak(); // 'Max barks!'
Dog.info(); // 'Dogs are loyal animals'

八、Set 與 Map：全新的數據結構

8.1 Set：值唯一的集合

const unique = new Set();
unique.add(1);
unique.add(2);
unique.add(1); // 重復添加無效console.log(unique.size); // 2
console.log([...unique]); // [1, 2]// 數組去重
const duplicates = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(duplicates)]; // [1, 2, 3, 4, 5]

8.2 Map：鍵值對集合

Map 與普通對象的核心區別：Map 的鍵可以是任意類型，而對象的鍵只能是字符串或 Symbol。

const map = new Map();// 對象作為鍵
const user = { id: 1 };
const settings = { darkMode: true };map.set(user, settings);
console.log(map.get(user)); // { darkMode: true }// 其他類型作為鍵
map.set(42, 'The Answer');
map.set(true, 'Boolean key');// 迭代 Map
for (const [key, value] of map) {console.log(`${key}: ${value}`);
}

九、Promise：異步編程的救星

9.1 解決回調地獄

Promise 通過鏈式調用解決了傳統回調嵌套的問題：

// 回調地獄示例
doAsyncTask1((err, result1) => {if (err) handleError(err);doAsyncTask2(result1, (err, result2) => {if (err) handleError(err);doAsyncTask3(result2, (err, result3) => {if (err) handleError(err);// 更多嵌套...});});
});// Promise 解決方案
doAsyncTask1().then(result1 => doAsyncTask2(result1)).then(result2 => doAsyncTask3(result2)).then(result3 => console.log('Final result:', result3)).catch(err => handleError(err));

9.2 Promise 高級模式

// Promise.all：并行執行
Promise.all([fetch('/api/users'),fetch('/api/posts'),fetch('/api/comments')
])
.then(([users, posts, comments]) => {console.log('All data loaded');
})
.catch(err => {console.error('One of the requests failed', err);
});// Promise.race：競速模式
Promise.race([fetch('/api/data'),new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), 5000)
])
.then(data => console.log('Data loaded'))
.catch(err => console.error('Timeout or error', err));

十、模塊系統：代碼組織的新方式

10.1 export 與 import

// math.js
export const PI = 3.14159;export function square(x) {return x * x;
}export default class Calculator {add(a, b) { return a + b; }
}// app.js
import Calculator, { PI, square } from './math.js';console.log(PI); // 3.14159
console.log(square(4)); // 16const calc = new Calculator();
console.log(calc.add(5, 3)); // 8

10.2 動態導入

// 按需加載模塊
button.addEventListener('click', async () => {const module = await import('./dialog.js');module.openDialog();
});

十一、其他重要特性

11.1 函數參數默認值

function createElement(type, height = 100, width = 100, color = 'blue') {// 不再需要參數檢查代碼return { type, height, width, color };
}createElement('div'); // { type: 'div', height: 100, width: 100, color: 'blue' }
createElement('span', 50); // { type: 'span', height: 50, width: 100, color: 'blue' }

11.2 迭代器與生成器

// 自定義可迭代對象
const myIterable = {*[Symbol.iterator]() {yield 1;yield 2;yield 3;}
};console.log([...myIterable]); // [1, 2, 3]// 生成器函數
function* idGenerator() {let id = 1;while (true) {yield id++;}
}const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

11.3 尾調用優化

尾調用優化可避免遞歸導致的棧溢出：

// 非尾遞歸
function factorial(n) {if (n <= 1) return 1;return n * factorial(n - 1); // 有乘法操作，不是尾調用
}// 尾遞歸優化
function factorial(n, total = 1) {if (n <= 1) return total;return factorial(n - 1, n * total); // 尾調用
}