前端面试题 说一下es6的新特性有哪些

<think>嗯，用户问的是ES6的新特性有哪些，前端面试题。首先，我需要回忆一下ES6的主要更新点。ES6，也就是ECMAScript 2015，是JavaScript的重要版本，带来了很多新特性。常见的比如let和const，箭头函数，模板字符串，解构赋值，默认参数，类，模块化，Promise，还有扩展运算符之类的。 用户可能是在准备前端面试，所以需要简明扼要地列出主要的特性，同时可能需要解释每个特性的用途和例子。需要结构清晰，分点说明，这样用户容易记住。另外，用户可能希望知道这些特性在实际开发中的应用，比如箭头函数解决this指向的问题，或者Promise用于异步处理。 还要注意不要遗漏一些重要的点，比如模块化的import和export，新增的数据结构如Set和Map，还有迭代器、生成器这些可能高级一点的内容。不过如果是面试题的话，可能更关注常用的部分，比如解构赋值、模板字符串这些日常使用频率高的特性。 另外需要确认每个特性的正确性，比如let和const的块级作用域，箭头函数不能作为构造函数这些细节。可能还需要提到新增的方法，比如数组的includes、find，字符串的startsWith、endsWith等方法。 还有，ES6的类语法，虽然本质还是原型继承，但提供了更接近传统面向对象的写法。模块化使得代码组织更方便，避免全局变量污染。Promise解决了回调地狱的问题，之后可能还会被async/await进一步优化。 要确保回答的结构清晰，分点列出，每个特性有简短的说明和例子。比如用箭头函数的例子，模板字符串的例子，解构赋值的例子，这样用户更容易理解。同时要注意使用中文，避免技术术语的直译，保持口语化但专业。</think>### ES6 新特性详解（前端面试高频考点） 以下是 ES6 的核心特性及典型应用场景，按使用频率和重要性排序： --- #### 1. **块级作用域变量声明：`let` 和 `const`** ```javascript let a = 1; // 块级作用域，可重新赋值 const b = 2; // 块级作用域，不可重新赋值（引用类型内容可变） ``` - 替代 `var`，解决变量提升和重复声明问题 - 常见面试题：循环中闭包问题（用 `let` 解决） --- #### 2. **箭头函数（Arrow Functions）** ```javascript const sum = (a, b) => a + b; setTimeout(() => console.log('Hello'), 100); ``` - 特点： - 无自己的 `this`（继承外层上下文） - 不能作为构造函数 - 无 `arguments` 对象 - 应用场景：简化回调，解决传统函数 `this` 指向问题 --- #### 3. **模板字符串（Template Literals）** ```javascript const name = 'Alice'; console.log(`Hello ${name}, 1+2=${1+2}`); // Hello Alice, 1+2=3 ``` - 支持多行文本和表达式嵌入 - 替代字符串拼接 --- #### 4. **解构赋值（Destructuring）** ```javascript // 数组 const [x, y] = [1, 2]; // 对象 const { name, age } = { name: 'Bob', age: 20 }; ``` - 应用场景：函数参数提取、模块导入等 --- #### 5. **默认参数（Default Parameters）** ```javascript function greet(name = 'Guest') { return `Hello ${name}`; } ``` - 解决 `undefined` 参数处理问题 --- #### 6. **扩展运算符（Spread Operator）** ```javascript const arr1 = [1, 2]; const arr2 = [...arr1, 3]; // [1, 2, 3] const obj = { a: 1 }; const newObj = { ...obj, b: 2 }; // { a:1, b:2 } ``` - 用途：数组合并、对象浅拷贝、函数传参 --- #### 7. **Promise 异步处理** ```javascript fetch('/data') .then(response => response.json()) .catch(error => console.log(error)); ``` - 解决回调地狱（Callback Hell） - 后续演进：`async/await`（ES2017） --- #### 8. **模块化（Modules）** ```javascript // math.js export const add = (a, b) => a + b; // app.js import { add } from './math.js'; ``` - 浏览器需配置 `<script type="module">` --- #### 9. **Class 类语法** ```javascript class Person { constructor(name) { this.name = name; } sayHi() { console.log(`Hi, I'm ${this.name}`); } } ``` - 本质仍是原型继承的语法糖 - 支持继承（`extends`）和 `super` --- #### 10. **新增数据类型与结构** - **Symbol**：唯一值，用于对象属性键 ```javascript const key = Symbol('unique'); ``` - **Set/Map**：去重集合、键值对集合 ```javascript const set = new Set([1, 2, 2]); // {1, 2} const map = new Map([['a', 1]]); ``` --- #### 其他重要特性 1. **对象属性简写** ```javascript const name = 'Alice'; const obj = { name }; // { name: 'Alice' } ``` 2. **函数参数剩余操作符** ```javascript function sum(...nums) { return nums.reduce((a,b) => a+b); } ``` 3. **新增数组方法** - `Array.from()`：类数组转数组 - `find()` / `findIndex()`：查找元素 - `includes()`：判断包含关系 --- ### 面试回答技巧 1. **分类记忆**：变量声明、函数、异步、数据结构等 2. **结合场景**：如箭头函数解决 `this` 问题，Promise 优化异步代码 3. **提及演进**：如 ES6 模块化 vs CommonJS，`class` 与传统原型继承 建议通过实际编码练习巩固理解，例如用 ES6 重写旧项目代码片段。