当前位置：首页 > web >正文

前端面试题之ES6保姆级教程

web 2025/6/27 5:13:37

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); // 尾调用
}