大家好，我是刘布斯。

我在面试过程中，经常喜欢问 “ES6+ 有哪些新特性？”，原因其实很简单：

• 考察基础广度：你对 JavaScript 的语言进化是否跟得上。
• 考察实际应用：会不会把新语法用在合理的场景里，而不是背书。
• 考察学习能力：能否快速吸收和应用新标准，是工程师核心竞争力。

很多候选人只会说 let/const、箭头函数、解构赋值这些 ES6 的内容。

但真要让面试官眼前一亮，就得拿出 ES2016 - ES2025 的关键特性，结合实际场景讲清楚。

ES2016（ES7）

1. Array.prototype.includes

• 功能：判断数组是否包含某个元素，比 indexOf 更直观。
• 示例：

[1, 2, 3].includes(2); // true

• 应用场景：权限校验、关键字过滤。比 indexOf > -1 可读性好。

2. 指数运算符 **

• 2 ** 3 等价于 Math.pow(2, 3)。
• 常用于数值计算，比如动画过渡时指数曲线。

ES2017（ES8）

1. async/await

• 解决的痛点：Promise 链过长，回调地狱依旧存在。
• 示例：

async function getUser() {
  const res = await fetch('/api/user');
  return res.json();
}

• 场景：网络请求、数据库查询，逻辑更像同步代码。

2. Object.entries / Object.values

• 功能：快速遍历对象。

Object.entries({a:1, b:2}).forEach(([k,v]) => console.log(k,v));

• 场景：对象转数组做表格渲染。

ES2018（ES9）

1. 异步迭代器 for await...of

• 功能：顺序处理一批异步任务。

for await (let chunk of stream) {
  console.log(chunk);
}

• 场景：处理文件流、分页 API。

2. 对象 Rest/Spread

const {id, ...info} = user; // 拆分对象

• 场景：React props 拆分、Redux reducer。

ES2019（ES10）

1. Array.flat / flatMap

• 解决的痛点：多维数组需要手写递归。

[1,[2,[3]]].flat(2); // [1,2,3]

• 场景：树结构转一维列表。

2. Object.fromEntries

Object.fromEntries([['a',1],['b',2]]); // {a:1,b:2}

• 场景：表单序列化结果转对象。

ES2020（ES11）

1. 可选链 ?.

• 解决的痛点：深层对象访问报错。

user?.profile?.name

• 场景：前端接口返回字段不确定时。

2. 空值合并运算符 ??

• 只在 null / undefined 时才取默认值。

user.age ?? 18

• 场景：区分 0 和 null。

3. Promise.allSettled

• 获取所有 promise 结果，不因 reject 中断。
• 场景：并行加载多个模块，统计成功失败数。

ES2021（ES12）

1. String.replaceAll

• 替代正则全局替换。

'foo_foo'.replaceAll('foo','bar'); // bar_bar

• 场景：模板替换。

2. Promise.any

• 返回第一个成功的 promise。
• 场景：CDN 资源多源加载，选最快的那个。

ES2022（ES13）

1. 顶层 await

• 解决的痛点：模块外不能直接用 await。

const data = await fetch('/api/data').then(r=>r.json());

• 场景：初始化数据时无需再套 async 函数。

2. class 私有字段 #

class User { #pwd = '123'; }

• 场景：保护内部数据，避免随意访问。

ES2023（ES14）

1. Array.findLast / findLastIndex

• 从尾部开始查找。
• 场景：查找最新一条日志、最后一次匹配。

ES2024（ES15）

1. Object.groupBy / Map.groupBy

Object.groupBy(users, u => u.age>18?'adult':'minor');

• 场景：快速分组数据，不再写 reduce。

2. Set 新集合运算

setA.union(setB)

• 场景：权限集合计算。

3. Promise.withResolvers

• 快速创建可控的 Promise：

const {promise, resolve, reject} = Promise.withResolvers();

• 场景：手动触发异步完成。

ES2025（ES16）

1. Iterator Helpers

• 链式惰性操作：

[1,2,3].values().map(x=>x*2).filter(x=>x>2).toArray();
// [4,6]

• 场景：数据流处理，避免创建临时数组。

2. Promise.try

• 捕获同步异常，统一写法：

Promise.try(()=>JSON.parse('err')).catch(console.error);

• 场景：接口数据解析时。

3. RegExp.escape

• 安全转义用户输入：

RegExp.escape('a+b'); // 'a\\+b'

• 场景：防止正则注入。

4. Import Attributes

import data from './config.json' with { type: 'json' };

• 场景：安全、规范地导入 JSON。

最后

从 ES2016 到 2025，JavaScript 的进化路线大致是：

1. 语法糖与可读性（includes、optional chaining、findLast）
2. 异步与模块化增强（async/await、Promise.any、顶层 await、import attributes）
3. 数据处理与性能（Set 运算、Iterator helpers、Float16Array）
4. 安全性（RegExp.escape、Error cause）

另外，还没有使用过我们刷题网站（https://fe.ecool.fun/）或者刷题小程序的同学，如果近期准备或者正在找工作，千万不要错过，题库主打无广告和更新快哦~。

有会员购买、辅导咨询的小伙伴，可以通过下面的二维码，联系我们的小助手。