前端八股文es6篇

好的，这里是专门针对 ES6+ 的前端面试"八股文"，它已经成为现代前端开发的绝对主流和面试必考内容。

---

一、核心语法与声明

1. let 与 const

（这部分在JS篇已详述，但它是ES6的基石，必须掌握）

• let：块级作用域变量，不可重复声明，存在暂时性死区。
• const：用于声明常量，必须在声明时初始化。对于基本类型，值不可改变；对于引用类型，其指向的内存地址不可改变（但属性或元素可修改）。

2. 模板字符串

• 用法 ：使用反引号（`````）标识。

• 特性 ：

  1. 字符串插值 ：使用 ${expression} 嵌入变量或表达式。

  const name = 'Alice';
  console.log(`Hello, ${name}!`); // Hello, Alice!
  console.log(`1 + 2 = ${1 + 2}`); // 1 + 2 = 3

  2. 多行字符串 ：直接换行即可，无需使用 \n 或字符串连接符。

  const multiLine = `
    This is
    a multi-line
    string.
  `;

3. 箭头函数

• 语法 ：(parameters) => { statements } 或 parameter => expression（单一参数可省略括号，单一表达式可省略大括号并隐式返回）。
• 特性与限制 ：
  1. 没有自己的 this ：它继承自定义它时所处的外层作用域的 this。这使得它特别适合用在回调函数（如 setTimeout, map, filter）中，避免 this 指向错误。
  2. 没有 arguments 对象 ：需要使用剩余参数（...args）来获取参数列表。
  3. 不能作为构造函数 ：使用 new 调用会抛出错误。
  4. 没有 prototype 属性。
  5. 不能用作 Generator 函数。

经典 this 对比示例：

const obj = {
  value: 'abc',
  traditional: function() {
    setTimeout(function() {
      console.log(this.value); // undefined (this 指向 window 或 undefined)
    }, 100);
  },
  arrow: function() {
    setTimeout(() => {
      console.log(this.value); // 'abc' (this 继承自 arrow 函数，即 obj)
    }, 100);
  }
};
obj.traditional();
obj.arrow();

---

二、解构赋值

从数组或对象中提取值，对变量进行赋值。

1. 数组解构

• 基本用法 ：按顺序对应。

  const [a, b] = [1, 2]; // a=1, b=2

• 跳过元素 ：使用空位。

  const [a, , c] = [1, 2, 3]; // a=1, c=3

• 默认值 ：当解构出的值为 undefined 时使用默认值。

  const [a = 5, b = 10] = [1]; // a=1, b=10

• 剩余模式 ：使用 ... 将剩余元素放入一个数组。

  const [a, ...rest] = [1, 2, 3, 4]; // a=1, rest=[2,3,4]

2. 对象解构

• 基本用法 ：按属性名对应。

  const { name, age } = { name: 'Bob', age: 20 }; // name='Bob', age=20

• 重命名 ：{ originalKey: newKey }。

  const { name: userName } = { name: 'Bob' }; // userName='Bob'

• 默认值 ：

  const { name = 'Anonymous', age = 0 } = { name: 'Bob' }; // name='Bob', age=0

• 混合使用 ：重命名 + 默认值。

  const { name: userName = 'Anonymous' } = {}; // userName='Anonymous'

• 函数参数解构 ：非常常用。

  function greet({ name, age = 18 }) {
    console.log(`Hello, ${name}. You are ${age}.`);
  }
  greet({ name: 'Alice' }); // Hello, Alice. You are 18.

---

三、扩展运算符与剩余参数

1. 扩展运算符

• 用途：将可迭代对象（如数组、字符串）或对象"展开"为单个元素。

• 在数组中的使用 ：

  const arr1 = [1, 2];
  const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4] (数组合并)
  console.log(Math.max(...arr1)); // 2 (将数组展开为参数)

• 在对象中的使用 （ES2018）：

  const obj1 = { a: 1, b: 2 };
  const obj2 = { ...obj1, c: 3 }; // { a:1, b:2, c:3 } (对象浅拷贝与合并)

2. 剩余参数

• 用途 ：将不定数量的参数表示为一个数组。取代了 arguments。

• 在函数参数中的使用 ：

  function sum(...numbers) {
    return numbers.reduce((prev, curr) => prev + curr, 0);
  }
  sum(1, 2, 3); // 6

• 在解构中的使用 ：

  const [a, b, ...others] = [1, 2, 3, 4, 5]; // a=1, b=2, others=[3,4,5]
  const { a, b, ...restProps } = { a:1, b:2, c:3, d:4 }; // a=1, b=2, restProps={c:3, d:4}

---

四、新的数据结构

1. Map 与 Object 的区别

特性	Map	Object
键的类型	任意值（函数、对象、基本类型）	String 或 Symbol
键的顺序	键值对按插入顺序排列	无序（ES6后虽有顺序但不保证所有情况）
大小	通过 size 属性获取	需要手动计算
性能	频繁增删键值对的场景下表现更好	未优化此场景
默认键	无	从原型链继承可能有默认键

常用API ：new Map(), map.set(key, value), map.get(key), map.has(key), map.delete(key), map.size。

2. Set 与数组的区别

• Set 是值的集合，成员的值都是唯一的（自动去重）。
• 常用API ：new Set(), set.add(value), set.has(value), set.delete(value), set.size。

应用场景：数组去重。

const uniqueArray = [...new Set([1, 2, 2, 3, 3])]; // [1, 2, 3]

3. WeakMap 与 WeakSet

• 弱引用：键/值是对象的弱引用，不计入垃圾回收机制。如果键/值对象没有其他引用了，它会被自动回收。
• 不可迭代 ：没有 size 属性，无法遍历。
• 用途：用于存储一些"附属"信息，而不用担心内存泄漏。例如 DOM 元素作为键，存储与之相关的元数据。

---

五、面向对象与 Class

ES6 的 class 是构造函数的语法糖，更接近传统面向对象语言的写法。

1. 基本语法

class Person {
  // 构造函数
  constructor(name) {
    this.name = name;
  }
  // 实例方法（挂在原型上）
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
  // 静态方法（类本身的方法）
  static isPerson(obj) {
    return obj instanceof Person;
  }
}
const alice = new Person('Alice');
alice.sayHello(); // Hello, I'm Alice
Person.isPerson(alice); // true

2. 继承

使用 extends 和 super。

• super 在构造函数中调用父类构造函数。
• super 在普通方法中调用父类的方法。

class Student extends Person {
  constructor(name, grade) {
    super(name); // 必须在使用 this 前调用 super
    this.grade = grade;
  }
  study() {
    console.log(`${this.name} is studying.`);
  }
  // 重写父类方法
  sayHello() {
    super.sayHello(); // 调用父类的方法
    console.log(`I'm in grade ${this.grade}`);
  }
}

---

六、模块化

使用 export 和 import 来导出和导入模块。

1. 导出

• 命名导出 ：

  // math.js
  export const pi = 3.14;
  export function add(a, b) { return a + b; }
  // 或者一起导出
  export { pi, add };

• 默认导出 （一个模块只能有一个）：

  // App.js
  export default function() { ... }
  // 或者
  const App = ...;
  export default App;

2. 导入

• 导入命名导出 ：需要 {}，且名称必须匹配。

  import { pi, add } from './math.js';
  // 重命名
  import { pi as圆周率 } from './math.js';

• 导入默认导出 ：不需要 {}，可以任意命名。

  import MyApp from './App.js';

• 全部导入 ：

  import * as math from './math.js'; // 使用 math.pi, math.add

---

七、其他重要特性

1. 函数参数默认值

function multiply(a, b = 1) {
  return a * b;
}
multiply(5); // 5

2. 对象字面量增强

• 属性简写 ：{ name } 等同于 { name: name }。
• 方法简写 ：{ sayHello() { ... } } 等同于 { sayHello: function() { ... } }。
• 计算属性名 ：{ [propKey]: value }。

3. Promise

（在JS异步编程中是核心，此处略，但面试必考）

4. 可选链操作符

• ?. ：如果前面的值是 null 或 undefined，则表达式短路返回 undefined。

  const street = user?.address?.street; // 无需层层判断

5. 空值合并运算符

• ?? ：只有当左侧操作数为 null 或 undefined 时，才返回右侧操作数。

  const value = input ?? 'default'; // 与 `||` 不同，它不会过滤 0, ''， false

掌握这些 ES6+ 特性，不仅能让你在面试中对答如流，更能极大地提升你的日常开发效率和代码质量。务必做到理解原理，并能熟练运用。