ES2015 至今 JavaScript 新增特性全解析：从 ES6 到 ES2023 的完整指南

已于 2025-02-10 16:46:58 修改
阅读量943 收藏 6
点赞数 8
分类专栏： JavaScript 文章标签： javascript es6 es13 前端 开发语言
于 2025-02-10 16:19:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nxiaotan/article/details/145552393
版权

引言
自 ES2015（ES6）发布以来，JavaScript 语言经历了多次重大更新，每年都会引入新特性，极大地提升了开发效率和代码可读性。无论是前端开发还是后端开发，掌握这些新特性都是必不可少的。本文将详细列举从 ES2015 到 ES2023 的所有重要特性，并通过代码示例帮助你快速理解和应用。

目录

  1. ES2015（ES6）

  2. ES2016（ES7）

  3. ES2017（ES8）

  4. ES2018（ES9）

  5. ES2019（ES10）

  6. ES2020（ES11）

  7. ES2021（ES12）

  8. ES2022（ES13）

  9. ES2023（ES14）

  10. 总结

1. ES2015（ES6）

ES2015 是 JavaScript 的一次重大更新，引入了许多核心特性：

1.1 let 和 const

  • 作用：块级作用域变量声明。

  • 示例：

    let a = 1;
const b = 2;

1.2 箭头函数

  • 作用：简化函数写法并绑定 this。

  • 示例：

    const add = (a, b) => a + b;

1.3 模板字符串

  • 作用：支持多行字符串和嵌入表达式。

  • 示例：

    const name = 'World';
console.log(`Hello, ${name}!`);

1.4 解构赋值

  • 作用：从数组或对象中提取值。

  • 示例：

    const [x, y] = [1, 2];
const { a, b } = { a: 1, b: 2 };

1.5 默认参数

  • 作用：为函数参数设置默认值。

  • 示例：

    function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}

1.6 Rest 参数和扩展运算符

  • 作用：处理不定参数和数组/对象展开。

  • 示例：

    function sum(...args) {
  return args.reduce((a, b) => a + b, 0);
}
const arr = [...[1, 2], ...[3, 4]];

1.7 类（Class）

  • 作用：提供更清晰的面向对象编程语法。

  • 示例：

    class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

1.8 模块化（import/export）

  • 作用：支持模块化开发。

  • 示例：

    // module.js
export const foo = 42;

// main.js
import { foo } from './module.js';

1.9 Promise

  • 作用：用于异步编程。

  • 示例：

    const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Done!'), 1000);
});
promise.then(result => console.log(result));

1.10 Symbol

  • 作用：唯一且不可变的数据类型。

  • 示例：

    const sym = Symbol('key');
const obj = { [sym]: 'value' };

1.11 迭代器和生成器

  • 作用：支持自定义迭代行为。

  • 示例：

    function* gen() {
  yield 1;
  yield 2;
}
const iterator = gen();
console.log(iterator.next().value); // 1

1.12 Map 和 Set

  • 作用：新的数据结构。

  • 示例：

    const map = new Map();
map.set('key', 'value');
const set = new Set([1, 2, 3]);

1.13 Proxy 和 Reflect

  • 作用：元编程工具。

  • 示例：

    const target = {};
const handler = {
  get(target, prop) {
    return prop in target ? target[prop] : 42;
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.foo); // 42

1.14 新的数组方法

  • 作用：增强数组操作。

  • 示例：

    const arr = [1, 2, 3];
console.log(Array.from('foo')); // ['f', 'o', 'o']
console.log(arr.find(x => x > 1)); // 2

1.15 对象字面量增强

  • 作用：简化对象定义。

  • 示例：

    const a = 1, b = 2;
const obj = { a, b, method() {} };

2. ES2016（ES7）

2.1 Array.prototype.includes()

  • 作用：检查数组是否包含某个元素。

  • 示例：

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

2.2 指数运算符

  • 作用：简化指数运算。

  • 示例：

    2 ** 3; // 8

3. ES2017（ES8）

3.1 async/await

  • 作用：简化异步代码。

  • 示例：

    async function fetchData() {
  const data = await fetch('/api/data');
  console.log(data);
}

3.2 Object.values() 和 Object.entries()

  • 作用：获取对象的值或键值对。

  • 示例：

    const obj = { a: 1, b: 2 };
console.log(Object.values(obj)); // [1, 2]
console.log(Object.entries(obj)); // [['a', 1], ['b', 2]]

3.3 字符串填充方法

  • 作用：在字符串前后填充字符。

  • 示例：

    'x'.padStart(4, '0'); // '000x'
'x'.padEnd(4, '0');   // 'x000'

3.4 Object.getOwnPropertyDescriptors()

  • 作用：获取对象属性的描述符。

  • 示例：

    const obj = { a: 1 };
console.log(Object.getOwnPropertyDescriptors(obj));

3.5 共享内存和 Atomics

  • 作用：用于多线程编程。

  • 示例：

    const buffer = new SharedArrayBuffer(16);
const view = new Int32Array(buffer);
Atomics.add(view, 0, 1);

4. ES2018（ES9）

4.1 异步迭代器

  • 作用：支持异步迭代。

  • 示例：

    async function* asyncGen() {
  yield 1;
  yield 2;
}
for await (const value of asyncGen()) {
  console.log(value);
}

4.2 Rest/Spread 属性

  • 作用：支持对象解构和展开。

  • 示例：

    const { a, ...rest } = { a: 1, b: 2, c: 3 };
const newObj = { ...rest, d: 4 };

4.3 Promise.prototype.finally()

  • 作用：无论 Promise 成功或失败都会执行。

  • 示例：

    promise.finally(() => console.log('Done'));

4.4 正则表达式改进

  • 作用：增强正则表达式功能。

  • 示例：

    const regex = /(?<year>\d{4})-(?<month>\d{2})/;
const match = regex.exec('2023-10');
console.log(match.groups.year); // 2023

5. ES2019（ES10）

5.1 Array.prototype.flat() 和 flatMap()

  • 作用：扁平化数组。

  • 示例：

    [1, [2]].flat(); // [1, 2]
[1, 2].flatMap(x => [x * 2]); // [2, 4]

5.2 Object.fromEntries()

  • 作用：将键值对列表转换为对象。

  • 示例：

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

5.3 字符串的 trimStart() 和 trimEnd()

  • 作用：去除字符串前后空格。

  • 示例：

    '  abc  '.trimStart(); // 'abc  '
'  abc  '.trimEnd();   // '  abc'

5.4 可选的 catch 绑定

  • 作用：无需绑定错误变量。

  • 示例：

    try {} catch {}

5.5 Function.prototype.toString() 改进

  • 作用：返回函数的完整源码。

  • 示例：

    function foo() {}
console.log(foo.toString());

6. ES2020（ES11）

6.1 可选链操作符（Optional Chaining）

  • 作用：简化属性访问。

  • 示例：

    const value = obj?.a?.b;

6.2 空值合并操作符（Nullish Coalescing）

  • 作用：提供默认值。

  • 示例：

    const value = a ?? 'default';

6.3 BigInt

  • 作用：支持大整数。

  • 示例：

    const bigNum = 123n;

6.4 动态导入（Dynamic Import）

  • 作用：动态加载模块。

  • 示例：

    const module = await import('./module.js');

6.5 globalThis

  • 作用：统一的全局对象访问方式。

  • 示例：

    console.log(globalThis === window); // true (浏览器环境)

6.6 Promise.allSettled()

  • 作用：无论成功或失败，都会返回结果。

  • 示例：

    Promise.allSettled([promise1, promise2]);

7. ES2021（ES12）

7.1 String.prototype.replaceAll()

  • 作用：替换所有匹配的子串。

  • 示例：

    'aabbcc'.replaceAll('b', 'x'); // 'aaxxcc'

7.2 Promise.any()

  • 作用：返回第一个成功的 Promise。

  • 示例：

    Promise.any([promise1, promise2]);

7.3 逻辑赋值操作符

  • 作用：简化逻辑赋值。

  • 示例：

    a ||= b; // a = a || b
a &&= b; // a = a && b
a ??= b; // a = a ?? b

7.4 WeakRef

  • 作用：弱引用。

  • 示例：

    const ref = new WeakRef(obj);

7.5 数字分隔符

  • 作用：提高数字可读性。

  • 示例：

    const num = 1_000_000;

8. ES2022（ES13）

8.1 类的静态块

  • 作用：静态初始化代码。

  • 示例：

    class MyClass {
  static {
    console.log('Static block');
  }
}

8.2 私有字段和方法

  • 作用：支持私有成员。

  • 示例：

    class MyClass {
  #privateField = 42;
  #privateMethod() {}
}

8.3 at() 方法

  • 作用：支持负索引访问。

  • 示例：

    'abc'.at(-1); // 'c'
[1, 2, 3].at(-1); // 3

8.4 Error Cause

  • 作用：错误链支持。

  • 示例：

    throw new Error('message', { cause: error });

9. ES2023（ES14）

9.1 Array.prototype.findLast() 和 findLastIndex()

  • 作用：从后向前查找数组元素。

  • 示例：

    [1, 2, 3].findLast(x => x > 1); // 3
[1, 2, 3].findLastIndex(x => x > 1); // 2

9.2 Hashbang 语法支持

  • 作用：在脚本文件中支持 #!。

  • 示例：

    #!/usr/bin/env node
console.log('Hello, World!');

总结

从 ES2015 到 ES2023，JavaScript 新增了大量特性，涵盖了语法糖、异步编程、数据结构、元编程等多个方面。这些特性极大地提升了开发效率和代码可读性。建议根据项目需求逐步学习和应用这些新特性。

互动话题
你最喜欢哪个 ES 新特性？在实际开发中是否已经用上了？欢迎在评论区分享你的看法！

JS：ES6（ES2015）新特性之常量、箭头函数、解构赋值
彭世瑜的博客
09-20 2148
几个概念 1、JavaScript VS ECMAScript ECMAScript 一种标准 JavaScript 一种标准的实现 2、ES6 == ES2015 ES6 版本号 ES2015 发布年份 3、新特性 常量 Const 箭头函数 Arrow Function 解构赋值 Desctructuring 4、准备工具 开发工具 VSCode 插件 Live Server 浏览器 Chrome const常量 // ES3声明常量，可以被修改 var BASE_NAME = "Tom"; BASE_
Js——ES2015（ES6）基础语法
qq_63654439的博客
02-22 721
JavaScript遵循ECMAScript标准，简单理解就是用ES表示js版本 例： Java8、Java9，说的是java se的版本 python2、python3说的是python的版本 变量 使用 let 代替 var 块级作用域 不存在变量提升 不允许重复声明 常量 const定义常量 定义以后不允许修改 用常量声明不变的值 函数表达式可以使用常量 对象声明可以使用常量 引入外部模块使用常量 模板字符串 支持换行 支持嵌入变量 解构赋值 数组的解构赋值 对象的解
揭秘ES2020令人兴奋的语言特性
dlcxycg的博客
09-20 266
将介绍ES2020的语言特性和功能，包括可选链操作符、空值合并操作符、Promise.allSettled()、import.meta等等。通过故事形式以及详细的阐述和示例，带领大家一起探索这些特性的用处，作为刚入门的新手，它能让你能够在前端开发中游刃有余。废话不多说，让我们一起探索ES2020的语言特性和功能，开启前端开发的新征程吧！
js版本之ES10（2019）、ES11（2020） 新增特性（八）
最新发布
Cshaosun的博客
03-10 954
array.flat()方法接受一个可选的参数，该参数指定要展平的深度。如果不提供参数，默认深度为1，意味着它只会展平一层嵌套数组。如果该参数为Infinity，则将数组完全展开（为一维数组）。指定要展平的深度(可选参数)，默认情况下，深度为1。返回一个新数组，其中包含原数组及其所有子数组的元素。
JS ES2015
wwy6191的博客
09-25 203
一、var let const 1.var var a = 1; var a = 2; console.log(a); // 结果：2 var a=1；在之前已经被声明，之后var a=2; 再一次声明，重写了已声明的变量，存在两个同名变量容易出错。 2.let let a = 1; let a = 2; console.log(a); // 结果直...
给 JavaScript 初心者的 ES2015 实战
King-Blog
04-07 2430
前言 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6（亦称 ECMAScript Harmony，简称 ES6）终于在 2015 年 6 月正式发布。自从上一个标准版本 ES5 在 2009 年发布以后，ES6 就一直以 新语法 、 新特性 的优越性吸引著众多 JavaScript 开发者，驱使他们积极尝鲜。 虽然至今各大浏览器厂商所开发的 Java
给JavaScript 初心者的ES2015 实战
西涛offbye-移动全栈技术博客
09-07 4953
这篇文章本来是繁体中文的，我把它转成简体放在这里。原文是http://lifemap.in/es2015-in-action/，对于Javascript ES6 介绍的比较全面。前言历时将近6年的时间来制定的新ECMAScript标准ECMAScript 6（亦称ECMAScript Harmony，简称ES6）终于在2015年6月正式发布。自从上一个标准版本ES5在2009年发布以后，ES6就一
ECMAScript 新特性解析：从ES6到ES11的JavaScript进化
标题“ajs:很棒的javascript”暗示了讨论主题将集中于JavaScript，特别是ECMAScript标准的发展和新增特性。ECMAScript是JavaScript的标准化脚本语言规范，其每个版本都为这门语言带来了一系列改进和新特性。以下是...
重学JavaScript高级（八）：ES6-ES12新增特性学习
weixin_55041125的博客
01-05 1385
在先前的文章 重学JavaScript高级（三）：深入JavaScript运行原理中提到过，只不过是ES5的执行描述。因此WeakSet就是弱引用类型，其指向的对象，有可能会被GC回收。在ES6中，有些执行描述进行了改变，ES6中引入了解构的用法。，那么他们之间有什么区别。
ES6、ES7、ES8、ES9、ES10新特性一览1
08-08
ECMAScript（简称ES）是JavaScript的标准化规范，由ECMA国际制定，每年都会发布新的版本，引入新的特性和改进。下面将详细讲解ES6、ES7、ES8、ES9以及ES10的主要新特性。 ### ES6（2015） #### 1. 类（Class） ES6...
JavaScript：ES6新特性：模板字符串与解构赋值
07-14
### JavaScript：ES6新特性详解：模板字符串与解构赋值 #### 1. ES6简介与环境设置 ##### 1.1 ES6新特性概述 ES6，即ECMAScript 2015，是JavaScript语言的一个重要版本，自2015年发布以来，对JavaScript的发展...
javascript-practice-es6:练习ES5至ES6代码
05-12
JavaScript是Web开发中不可或缺的一部分，尤其在ES6（ECMAScript 2015）发布之后，它引入了许多新特性，极大地提升了JavaScript的表达能力和可读性。本实践项目主要聚焦于从ES5到ES6的过渡，通过一系列小代码片段...
JavaScript基础（五）——ES2015（ES6）基础语法
pro1822的博客
04-10 756
ES2015（ES6）基础语法
ES2015(ES6)+
weixin_46873254的博客
08-11 1754
JES2015-ES6目录名词释义ECMAScriptES2015ES6let 和 const箭头函数函数的参数默认值用法示例模板字符串扩展（展开） 运算符解构赋值对象解构赋值数组的解构赋值应用-解构赋值结合函数声明对象成员的简写概述Symbol作为对象属性Symbol.for内置SymbolSymbol的属性Set和WeakSetSet实例WeakSetMap和WeakMapMap实例1：扩展对象实例2：完善私有属性的实现WeakMap实例：完善私有属性的实现ProxyReflect 反射Iterator
JavaScript ES6(ES2015) 特性学习
wechatonly的博客
11-11 1094
这些ES6的特性你都知道嘛？
ES2015简介和基本语法
qq_43183527的博客
09-20 517
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。 说明：此文章根据《实战ES2015：深入现代JavaScript+应用开发》这本书做的笔记，更多详细内容请查看书籍。电子版在文章底部。 一、ECMAScript的发展历程 image.png 二、ES2015能为实际开发带来什么 ECMAScript的发展速度在不断加快，影响范围越来越大，除了Web前端开发以外
js之ECMAScript概念和ES2015新特性
sundaoli_0的博客
10-09 636
ECMAScript 也是一门脚本语言 缩写 ES 通常看作为JavaScript 的标准化规范 实际上JavaScript 是ECMAScript 的扩展语言 因为 ECMASscript 只提供了最基本的语法 在浏览器中 JavaScript = ECMAScript + Web APIs (BOM , DOM 等) 在NodeJs中 JavaScript = ECMAScript + Node APIs(fs, net, etc. 等)
1.5万字概括ES6全部特性(已更新ES2020)(coding)
CSDN_KONGlX的博客
07-07 464
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(51, 51, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...
1.5万字概括ES6全部特性(已更新ES2020)
油墨香^-^的博客
03-16 166
本文的知识点完全是参考或摘录《ES6》里的语句，有部分语句为了方便理解和记忆，进行了相同意思的转义，同时对知识点进行归类划分。为了让大家能集中精力来记住这些特性，全文一句废话和题外话都没有，全部模块以笔记的形式进行书写，如果看得不是很惯建议对照《ES6》的内容来学习。本文整理出来的笔记都是书中的精华内容，囊括了整个ES6体系的所有特性，非常方便大家重新认识全部ES6特性。半小时的阅读就可对ES6有一个全面的了解，可认为是一本ES6特性小字典即使看不完也要拉到本文末尾喔，有个大彩蛋，嘻嘻！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值