ES6/ES7/ES8新特性汇总

ES6起各个版本的新特性汇总


ES6/ES7/ES8新特性汇总_第1张图片


ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以浏览 ECMA news查看。ECMAScript 标准建立在一些原有的技术上,最为著名的是 JavaScript (网景) 和 JScript (微软)。它最初由网景的 Brendan Eich 发明,第一次出现是在网景的 Navigator 2.0 浏览器上。Netscape 2.0 以及微软 Internet Explorer 3.0 后序的所有浏览器上都有它的身影。


ES6(2015年发布)

1.Class

2.模块化 :导入 export 、导出 import

3.箭头函数 :this指向定义时所在的对象,而不是使用时所值的对象

4.函数参数默认值:function app (age=25){…}

5.模版字符串

6.解构赋值:let [a,b]=[2,3] //a:2. b:3

7.延展运算符:...

8.对象属性简写 :{name :name}====>{name}

9.promise对象

10.let,const


ES7(2016年发布)

1.新增数组的includes属性:

Array.prototype.includes():[1].includes(1);//true

2.引入了(**指数操作符:2**10 //1024


ES8(2017年发布)

1.新增async await使得异步改同步成为可能,避免代码书写的来回嵌套

2.新增Object.values():对象转数组

Object.values({a:1,b:2,c:3})===>[1,2,3]

3.新增Object.entries():对象转数组

Object.entries({a:1,b:2,c:3})===>[[a,1],[b,2],[c,3]]

4.新增字符串填充(padStart,padEnd)

1.padStart 
 'hello'.padStart(10) =>>>' hello'

2.padEnd 
'hello'.padEnd(10) =>>> 'hello ' 
'hello'.padEnd(10,'222') =>>> 'hello22222'

5.允许函数参数列表结尾存在逗号

6.添加Object.getOwnPropertyDescriptors(): 获取一个对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象

7.新增SharedArrayBuffer 对象:用来表示一个通用的,固定长度的原始二进制数据缓冲区

/*
 * @param {*} length 所创建的数组缓冲区的大小,以字节(byte)为单位。
 * @returns {SharedArrayBuffer} 一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。
 */
new SharedArrayBuffer(10)

8.新增Atomics对象:提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作


ES9(2018年发布)

1.允许异步迭代:await可以和for…of循环一起使用,以串行的方式运行异步操作

2.添加Promise.finally()

3.修改了正则表达式的一些属性(这块比较细节,MDN上查一下当前怎么用就行了)

const reg = /(year[0-9]{4})-(month[0-9]{2})-(day[0-9]{2})/;
const match = reg.exec(2021-02-23);

ES10(2019年发布)

1.新增数组的flat() flatMap()方法

  • flat():把数组里的数组打开
[1, 2, [3, 4]].flat(Infinity);       // [1, 2, 3, 4]
  • flatMap():将map和flat两者结合起来
[1, 2, 3, 4].flatMap(a = [a**2]);     // [1, 4, 9, 16]

2.修改了try catch 的使用,catch不必再由入参

3.增加字符串的trimStart, trimEnd方法,分别是去掉首尾空格

4.增加Object.fromEntries方法,可以把对应数组转成对象

5.增加Function.prototype.toString()方便看到函数对应的内部代码

6.增加Symbol.prototype.description方法

Symbol(‘test’). description === ‘test’ // true

7.对JSON对象的优化 JSON.supersetJSON.stringify


ES11(2020年发布)

1.增加Bigint:用于大数计算

2.增加可选链: 简化书写判断

3.增加 ?? 运算,如果左侧不为null或者undefined则返回 ??左侧内容

4.解决了 let num = number || 1 这种计算方式的bug

5.增加Promise.allSettled方法

6.支持import()函数用于异步加载


ES12(2021年发布)

1.增加字符串的replactAll方法,之前要实现替换全部,需要使用正则表达式

const str = 'hello world';
str.replaceAll(l, );  // heo word

// 之前
const str = '2-4-6-8-10';
const newStr = str.replace(/\-/g, '+');
console.log(newStr); //2+4+6+8+10

// 现在可以
const str = '2-4-6-8-10';
const newStr = str.replaceAll('-', '+');
console.log(newStr); //2+4+6+8+10

2.新增Promise.any方法 ,只要其中一个promise 成功,就返回那个promise 。

3.弱引用:

使用 WeakRefs 的 Class 类创建对对象的弱引用(对对象的弱引用是指当该对象应该被 GC 回收时不会阻止 GC 的回收行为)

4.新增了逻辑赋值操作符 ??=、&&=、 ||=

??=指的是当左侧变量值为 null 或 undefined 时, 右侧值赋值给左侧变量,并返回赋值后的值

&&=指的是逻辑与赋值,当左右条件都为真时,右侧值赋值给左侧变量

||=指的是逻辑或赋值,当左侧条件都为假时,右侧值赋值给左侧变量

5.增加下划线 (_) 分隔符,它是数字间隔性符,可以在数字之间创建分隔符,通过下划线来分割数字,使数字化可计算

const money1=1_000_000_000
//等价于
const money2=1000000000

money1===money2 //true

你可能感兴趣的:(前端,javascript,开发语言,ecmascript)