JS ECMAScript各版本详解（持续更新）_js版本

(JavaScript和ECMAScript之间关系不清楚的可以看我上篇)

开始

简单了解一下ECMAScript

（If you’re willing to take the trouble. Look Look）The document at https://tc39.es/ecma262/ is the most accurate and up-to-date ECMAScript specification. It contains the content of the most recent yearly snapshot plus any finished proposals (those that have reached Stage 4 in the proposal process and thus are implemented in several implementations and will be in the next practical revision) since that snapshot was taken.

• ECMAScript(查看)，简称ES，是由Ecma国际（前身为欧洲计算机制造商协会European Computer Manufacturers Association）按照ECMA-262和ISO/IEC 16262标准制定的一种脚本语言规范。

• Ecma国际制定了许多标准，而ECMA-262（ECMAScript）只是其中的一个（所有标准）（ECMA-262最新规范）

• JavaScript 每隔一段时间就会出新的特性（重点），而浏览器只有不断的升级才能满足这些，而且同一个浏览器各版本对新特性的支持情况也不一样。

• （网站：https://caniuse.com/ 提供了查看某个功能浏览器的支持情况）

JavaScript 命名约定始于 ES1、ES2、ES3、ES5 和 ES6。但是，ECMAScript 2016 和 2017 未被称为 ES7 和 ES8（官方），大多数人应该还是把ES2016称为ES7这样，自 2016 年以来，新版本按年份命名（ECMAScript 2016/2017/2018）。

---

也许有不理解ECMAScript为什么有56789的，那简单说一下，它们是js 语法发展过程中的一个版本，（看上面重点）比如在某段时间它增加了一些功能然后他就叫ES5，某段时间它增加了一些功能然后它就叫ES6

(接下来从 ES5开始，为什么从ES5开始？ECMAScript 4-Give up publishing）(*￣0￣)

1.ES5

• 这里ES5泛指标准 ECMA-262 5.1 版 / 2011 年 6 月 ECMAScript® 语言规范（详细），详细中提供了浏览器实现中常见的语言规范上的解释。

• 在该标准中，添加了 支持自第三版发布以来出现的新功能。以及此类功能包括访问器属性、对象的反射创建和检查、属性属性的程序控制、附加数组操作函数，支持 JSON 对象编码格式，以及提供增强的错误检查和程序的严格模式安全。（薛之谦：‘简单点~ 我们都简单点~~ ，就是新的功能有(～￣▽￣)～：严格模式，原生JSON对象，继承的方法 ，高级属性的定义’）

• 简单了解下ES5 Features(下面)
  

---

2.ES6

（重点） 这里ES6指ECMAScript6，从ECMA发布的规范说明来说ES6原义泛指JavaScript语言的下一个版本。ES6指ECMAScript6的同时，是一个历史名词也是一个泛指，ES6意思可以是涵盖了ES2015,ES2016,ES2017,ES2018等等等。

• ES6 指 ECMA-262 6®ECMAScript 2015 语言规范，也就是ECMAScript6和ECMAScript 2015.
• ECMAScript 2015的完成是高潮，十五年的努力。它的目标包括提供更好地支持大型应用程序、库创建和使用 ECMAScript 作为其他语言的编译目标。它的一些 主要增强功能包括模块、类声明、词法块范围，迭代器和生成器，异步承诺编程、解构模式和适当的尾部调用。这 ECMAScript 内置库进行了扩展，以支持其他数据 抽象，包括二进制数值的映射、集合和数组 以及对 Unicode 补充字符的额外支持 字符串和正则表达式。内置功能也具有可扩展性 通过子类化。
• 简单了解下ES6的新特性（下面）
  

---

ECMAScript 2016（民间称呼ES7）

旧的JS版本由数字命名：ES5（2009）和ES6（2015）。
从 2016 年开始，版本按年份命名：ECMAScript 2016、2017、2018、2019、…

• ECMAScript 2016 ，它是 ECMAScript 语言规范的第七版
• 此规范包括对新幂运算符的支持，并向 Array.prototype 添加了一个名为 的新方法。includes
• 了解下新特性（咳咳，更新的东西不多，代码块详细了解一下(*￣0￣)‘），
  JavaScript 求幂 ( * * )
  JavaScript 求幂赋值 ( * * =)
  JavaScript Array.prototype.includes （）

let x = 2;
let z = x ** 3;// z==8
1
2

let x = 5;
let z = Math.pow(x,2); //z==25
1
2

let x = 5;
x **= 2; //z==25
1
2

---

ECMAScript 2017（ES8）

• ECMAScript 2017 语言，它是 ECMAScript 语言规范的第八版。
• 此规范引入了异步函数、共享内存和原子，以及较小的语言和库增强功能、错误修复和编辑更新。异步函数通过为承诺返回函数提供语法来改进异步编程体验。共享内存和原子引入了一种新的内存模型，该模型允许多代理程序使用原子操作进行通信，即使在并行CPU上也能确保明确定义的执行顺序。此规范还包括 Object 上的新静态方法和 Object.valuesObject.entriesObject.getOwnPropertyDescriptors
• 了解下新特性（下图）
  

//JavaScript 字符串填充 #支持在字符串的开头和结尾进行填充。
 let text = "5";
 text = text.padStart(4,0);

 let text = "5";
 text = text.padEnd(4,0);

//JavaScript 对象条目 #返回对象中键/值对的数组：
 let obj={a:1,b:2}
 Object.entries(obj) //a,1,b,2

//JavaScript 对象值 #返回对象值的单维数组
 let obj={a:1,b:2}
 Object.values(obj) //1,2

//JavaScript Async 函数
 async 我是个函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

---

ECMAScript 2018（ES9）

• ECMAScript 2018 语言。它是 ECMAScript 语言规范第九版
• 此规范引入了支持 用于通过异步迭代器协议和异步进行异步迭代 。此规范还包括四个新的正则表达式 功能： dotAll 标志， 命名捕获组， Unicode 属性 逃避，并回顾断言。它还包括 rest 参数和对对象属性的扩展运算符支持
• 了解下新特性（下图）
  
• 异步迭代
• Promise Finally
• 对象 Rest 属性
• 新的 RegExp 特性

 //添加了异步迭代器和可迭代对象，对于异步可迭代对象，我们可以在循环中使用关键字。
 await for（of）
 
 //ECMAScript 2018 完成了 Promise 对象的完整实现：Promise.finally
  let myPromise = new Promise();
  myPromise.then();
  myPromise.catch();
  myPromise.finally();
 
//ECMAScript 2018 添加了 Rest 属性，这允许我们破坏一个对象并将剩余物收集到一个新对象上：
  let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
  x; // 1
  y; // 2
  z; // { a: 3, b: 4 }
 
//新的 JavaScript RegExp 功能，ECMAScript 2018 添加了 4 个新的正则表达式特性：
 Unicode 属性转义 (\p{...})
 后行断言（Lookbehind Assertions） (?<= ) 和 (?<! )
 命名捕获组（Named Capture Groups）
 s (dotAll) 标志
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---

ECMAScript 2019（ES10）

• ECMAScript 2019 语言。它是 ECMAScript 语言规范第十版

• 此规范引入了一些新的内置函数：on 用于扁平化数组，用于直接将 的返回值转换为新对象，以及作为广泛实现但非标准和内置的更好命名的替代方案。此外，此规范还包括一些小更新 语法和语义。更新的语法包括可选的捕获绑定 参数并允许 U+2028（行分隔符）和 U+2029（段落） 分隔符）以与 JSON 对齐。其他更新包括 要求它是稳定的排序，要求 JSON.stringify 返回格式正确的 UTF-8，而不考虑输入，并通过要求它返回相应的原始源文本或标准占位符来澄清。

• 了解下新特性（下图）
  

• String.trimStart()

• String.trimEnd()

• Object.fromEntries

• 可选的 catch 绑定

• Array.flat()

• Array.flatMap()

• 重新修订的 Array.Sort()

• 重新修订的 JSON.stringify()

• 字符串文字中允许的分隔符

• 重新修订的 Function.toString()

//JavaScript 字符串方法 trimStart()与trim()类似，但该方法仅去除开头空格  
 let text1 = "     Hello World!     ";
 let text2 = text1.trimStart(); // "Hello World!     "

//JavaScript 字符串方法 trimEnd() 去除尾部空格
 let text1 = "     Hello World!     ";
 let text2 = text1.trimEnd(); // "     Hello World!"

//JavaScript 对象方法 fromEntries() 方法从可迭代的键/值对创建对象 //静态方法将键值对列表转换为一个对象。
 const fruits = [
 ["a", "1"],
 ["b", "2"]
 ];
 const myObj = Object.fromEntries(fruits);  // myObj :{a:'1',b:'2'}

//可选的 catch 绑定,从 ES2019 开始，如果不需要，可以省略 catch 参数：
 try {                     try {
 // code                   // code
 } catch (err) {   ==>     } catch {
 // code                   // code
 }                         }
                          
//JavaScript ES2019 为 JavaScript 添加了数组方法flat()
//该方法首先映射数组的所有元素 然后通过平展数组来创建新数组
 const myArr = [[1,2],[3,4],[5,6]];
 const newArr = myArr.flat(); //1,2,3,4,5,6

//稳定数组排序 ES2019修订了数组方法。sort()
//根据值对元素进行排序时，元素必须保持其与具有相同值的其他元素的相对位置。
 ~~~(*￣0￣)~~~~
 
//修订后的 JSON.stringify（） 在 2019 年之前，JSON 无法字符串化使用 \ 编码的字符。
let text = JSON.stringify("\u26D4");

//分隔符号
let text = "\u2028"; // 这在 ES2019 中是有效的：

//重新修订的 Function toString()
toString() //必须返回函数的源代码，包括注释， 空格和语法详细信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

---

ECMAScript 2020（ES11）

• ECMAScript 2020 语言。它是 ECMAScript 语言规范第十一版
• 此规范引入了 String 的方法，为全局正则表达式生成的所有匹配对象生成迭代器;，一种使用动态说明符异步导入模块的语法;，用于处理任意精度整数的新数字基元;，一种不会短路的新型承诺组合器;，一种获取全局价值的通用方式;在模块内使用的专用语法;提高枚举顺序的标准化;, 模块中可用的主机填充对象，可能包含 有关模块的上下文信息;以及添加两个新的 语法功能，以改进使用“空”值（或）： 空合并，值选择运算符;和可选链接，a 属性访问和函数调用运算符，如果出现短路，则短路 要访问/调用的值为空。
• 了解下新特性（下图）
  
• BigInt
• 字符串方法 matchAll()
• 空值合并运算符 (??)
• 可选链运算符 (?.)
• 逻辑 AND 赋值运算符 (&&=)
• 逻辑 OR 赋值运算符 (||=)
• 空值合并赋值运算符 (??=)
• Promise.allSettled()
• 动态导入

//JavaScript BigInt 用于存储大整数值  
//JavaScript 整数最多只能精确到 15 位数字。
 let x = 9999999999995999999999;   //9.999999999996e+21
 let y = BigInt(9999999999995999999999); //9999999999995999999999
 let y = 9999999999995999999999n; //9999999999995999999999

//JavaScript 字符串方法 matchAll()
 let text = "I love you you"
 const iterator = text.matchAll("you");  //Array.from(iterator)=> you you

//空值合并运算符（Nullish Coalescing Operator）（?? 运算符）
//如果第一个参数不是空值（null 或 undefined），则 ?? 运算符返回第一个参数。
 let a= null;
 let b= "missing";
 let result = a?? b; //missing

//可选链运算符（Optional Chaining Operator）（?. 运算符）
//如果对象为 undefined 或 null，则可选链运算符返回 undefined（而不是抛出错误）。
 const car = {type:"Fiat", model:"500", color:"white"};
 let name = car?.name;  //undefined

//逻辑 AND 赋值运算符（&&= 运算符）,如果第一个值为 true，则分配第二个值。
 let x = 0;
 x &&= 5; // x=0
 
 //逻辑 OR 赋值运算符（||= 运算符）,如果第一个值为 false，则分配第二个值。
 let x = 1;
 x ||= 5; //x=1
//空值合并赋值运算符（??= 运算符）如果第一个值 undefined 或为 null，则分配第二个值。
let x = 10;
x ??= 5; //x=5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

---

ECMAScript 2021（ES12）
休息一会儿先