一、ES7新特性

1. Array.prototype.includes

includes 方法用来检测数组中是否包含某个元素，返回布尔值

2. 指数操作符

指数运算符 ** ，用来实现幂运算，功能与 Math.pow 结果相同

二、ES8新特性

1. async 和 await

async 和 await 两种语法结合可以让异步代码像同步代码一样

async

（1）async 函数的返回值为 promise 对象

（2）promise 对象的结果由 async 函数执行的返回值决定

返回结果：

a. 只要async 函数返回的不是一个promise对象,则函数的执行结果就是一个成功的promise对象

b. 抛出错误，返回的结果是一个失败的promise对象

c. 返回结果如果是一个promise对象，成功的promise则函数执行结果为成功的promise对象，失败的promise则函数执行结果为失败的promise对象

await

（1）await 必须写在 async 函数中

（2）await 右侧的表达式一般为promise对象

（3）await 返回的是peomise对象成功的值

（4）若 await 的promise失败了，就会抛出异常，需要通过 try...catch 捕获处理

三、ES8 对象方法的扩展

1. Object.values 和 Object.entries

Object.keys() 方法返回对象所有的键

Object.values() 方法返回一个给定对象的所有的值的数组

Object.entries() 方法返回一个给定对象自身可遍历属性 [key, value] 的数组

2. Object.getOwnPropertyDescriptors

该方法返回指定对象所有自身属性的描述对象

四、ES9新特性

剩余参数和扩展运算符在ES6中已经引入，但ES6中只针对于数组，在ES9中为对象提供了像数组一样的剩余参数和扩展运算符

1. 剩余参数

        function connect({ host, port, ...user }) {console.log(host);console.log(port);console.log(user);}connect({host: '127.0.0.1',port: 3306,username: 'root',password: 'root',type: 'master'})

2. 扩展运算符

        const skillOne = {q: '天音波',q2: '天音波二段'}const skillTwo = {w: '金钟罩'}const skillThree = {e: '天音波'}const skillFour = {r: '猛龙摆尾'}const mangseng = { ...skillOne, ...skillTwo, ...skillThree, ...skillFour };console.log(mangseng); //{q: '天音波', q2: '天音波二段', w: '金钟罩', e: '天音波', r: '猛龙摆尾'}

五、ES9正则扩展

1. 命名捕获分组

        // 命名捕获分组// 声明一个字符串let str = '<a href="http://www.atguigu.com">尚硅谷</a>';// 需求:提取url与标签文本// ES5普通方法:const reg = /<a href="(.*)">(.*)<\/a>/;// 执行const result = reg.exec(str);console.log(result[1]);console.log(result[2]);

        // 命名捕获分组方法:let str = '<a href="http://www.atguigu.com">尚硅谷</a>';const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;const result = reg.exec(str);console.log(result.groups.url);console.log(result.groups.text);

2. 反向断言

        // 正则扩展-反向断言// 需求:提取555let str = 'JS51343中输出啊555啦啦啦';// 正向断言:根据目标后面的内容做识别const reg = /\d+(?=啦)/;const result = reg.exec(str);console.log(result);// 反向断言:根据目标前面的内容做识别const reg2 = /(?<=啊)\d+/;const result2 = reg2.exec(str);console.log(result2);

3. dotAll 模式

dot代表正则中的“.”，即表示任意的单个字符，除了换行和行结束符

        // 需求:提取电影名称和上映日期,存到一个对象中let str = `<ul><li><a>肖申克的救赎</a><p>上映日期:1994-09-10</p></li><li><a>阿甘正传</a><p>上映日期:1994-07-06</p></li></ul>`;// 1.传统方法(需要添加换行符)// const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;// const result = reg.exec(str);// console.log(result);// 2.dotAll模式sconst reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;let result;let data = [];while (result = reg.exec(str)) {console.log(result);data.push({ title: result[1], time: result[2] });}console.log(data);

六、ES10新特性

Object.fromEntries

用于创建一个对象，但该方法参数较为特殊，接受一个二维数组或Map

        // 二维数组const result = Object.fromEntries([['name', '尚硅谷'],['xueke', 'Java,大数据,前端,云计算']])console.log(result);

        // Mapconst m = new Map();m.set('name', 'ATGUIGU');const result = Object.fromEntries(m);console.log(result);

Object.entries() 和 Object.fromEntries() 是逆运算，Object.entries() 将对象转换为二维数组，Object.fromEntries() 将二维数组转换为对象

七、ES10字符串扩展方法

ES5 字符串方法 trim() 用于清除字符串两端的空白字符

1. trimStart

清除字符串左侧空白

2. trimEnd

清除字符串右侧空白

        let str = '     iloveyou    ';console.log(str);console.log(str.trimStart());console.log(str.trimEnd());

八、ES10数组扩展方法

1. flat

将多维数组转换为低维数组，参数为一个数字，表示数组展开的深度，省略则默认1，展开一层

arr.flat(参数)

        const arr = [1, 2, 3, 4, [5, [6, 7], 8]];console.log(arr.flat());console.log(arr.flat(2));

2. flatMap

相当于 map 和 flat 两个操作的结合，若map返回的结果是一个多维数组，可以直接使用flatMap把结果变为一维数组

        const arr = [1, 2, 3, 4];const result = arr.flatMap(item => [item * 10]);console.log(result);

九、ES10 Symbol扩展

Symbol.prototype.description

用于获取Symbol的描述字符串

十、ES11新特性

1. 私有属性

        class Person {// 公有属性// name;// 私有属性// #age;// #weight;// 构造方法constructor(name, age, weight) {this.name = name;this.#age = age;this.#weight = weight;}intro() {console.log(this.name);console.log(this.#age);console.log(this.#weight);}}// 实例化const girl = new Person('小徐', 24, '48kg');console.log(girl);girl.intro();

2. Promise.allSettled

Promise.allSettled() 接收一个数组，始终返回一个成功的promise，得到数组中每一个promise成功和失败的状态和结果

Promise.all() 接收一个数组，只有数组中的promise全部成功，才会返回成功的promise

        // 声明两个Promise对象const p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('商品数据-1');}, 1000);});const p2 = new Promise((resolve, reject) => {setTimeout(() => {// resolve('商品数据-2');reject('出错啦');}, 1000);});// 调用 allSettled 方法const result = Promise.allSettled([p1, p2]);console.log(result);const res = Promise.all([p1, p2]);console.log(res);

3. String.prototype.matchAll

用于得到正则批量匹配的结果

        // 需求:提取电影名称和上映日期,存到一个对象中let str = `<ul><li><a>肖申克的救赎</a><p>上映日期:1994-09-10</p></li><li><a>阿甘正传</a><p>上映日期:1994-07-06</p></li></ul>`;// 声明正则const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg;// 调用方法const result = str.matchAll(reg);console.log(result);// for (let v of result) {//     console.log(v);// }const arr = [...result];console.log(arr);

4. 可选链操作符 ?.

        // 可选链操作符 ?.function main(config) {// 传统方法：需要先判断值是否传进来，再进行输出// const dbHost = config && config.db && config.db.host;// 可选链操作符 ?. 判断前面的值有没有传入，免去层层判断const dbHost = config?.db?.host;console.log(dbHost);}main({db: {host: '192.168.1.100',username: 'root'},cache: {host: '192.168.1.200',username: 'admin'}})

5. 动态 import

我们往往在入口文件写大量import语句，这样不能实现按需加载（懒加载），ES11引入动态import，实现按需加载

//入口文件// 静态引入
// import * as hello from "./hello.js";
// const btn = document.getElementById('btn');
// btn.onclick = function () {
//     hello.hello();
// }// 动态引入
const btn = document.getElementById('btn');
btn.onclick = function () {import('./hello.js').then(module => {module.hello();});
}

6. ES11新数据类型 BigInt 大整数

用于大数值运算

表示方式：在普通整数的基础上加一个n

BigInt() 函数：把普通整数值转化为大整形

BigInt不能直接和普通Int做运算

        // 大整形let n = 521n;console.log(n);console.log(typeof n)// BigInt() 函数：把普通整数值转化为大整形let m = 123;console.log(BigInt(m));// 大数值运算let max = Number.MAX_SAFE_INTEGER; //表示最大安全整数console.log(max);console.log(max + 1);console.log(max + 2);console.log(BigInt(max));console.log(BigInt(max) + BigInt(1));console.log(BigInt(max) + BigInt(2));

7. 绝对全局对象 globalThis

始终指向全局对象

ES7、ES8、ES9、ES10、ES11新特性相关推荐

ES6/ES7/ES8/ES9/ES10常用特性和新特性最全总结
ES6 ES6在ES5的基础上新增了一系列特性,这里仅列出常用特性变量的改变,添加了块级作用域的概念 let声明变量(块级作用域),let是更完美的var,它声明的全局变量不是全局属性widow的变 ...
ES7 ES8 ES9 ES10 新特性总结思考
学习在于总结,发现并没有对于新出的一些语言特性进行总结,正好最近有时间,可以把这些进行总结以及运用,也许在项目中已经使用. ES7 Array includes方法求幂运算符 ES8 Async F ...
ES7、ES8、ES9、ES10、ES11 新特性总结
目录 ES7新特性一.Array.prototype.includes 二.指数操作符 ES8新特性一.async 和 await 1.async 函数 2.await 表达式 async和awa ...
七月学习之E6、ES7、ES8、ES9、ES10、ES11新特性
目录 ES6新特性(2015) 1. let 和 const 命令 2. 解构赋值 3. 扩展运算符(spread) 4. 箭头函数 5. 函数参数默认值 6. 模板字符串 7. 对象属性和方法的简写 ...
es7,es8,es9新特性
es7,es8,es9新特性 1. ES7新特性(ECMAScript 2016) ES7在ES6的基础上主要添加了两项内容: Array.prototype.includes()方法求幂运算符(* ...
【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)
一.介绍现在的网络上已经有各样关于 ECMAScript 规范介绍和分析的文章,而我自己重新学习一遍这些规范,整理出这么一份笔记,比较精简,主要内容涵盖ES6.ES7.ES8.ES9,后续会增加面试 ...
ECMAScript 2019(ES10) 的新特性总结
快速通道: ES6.ES7.ES8.ES9.ES10.ES11.ES12.ES13新特性大全老规矩,先纵览下 ES2019 的新功能: Array.flat()和Array.flatMap():数组 ...
从ES6到ES10的新特性万字大总结
本文转自https://cloud.tencent.com/developer/article/1615505[作者:陈大鱼头•github: KRISACHAN[1]] 介绍 ECMAScript是 ...
ES8都有哪些新特性，你还在用ES6吗？
原文:ES8 was Released and here are its Main New Features 作者: Dor Moshe 翻译:黑色巧克力译者注:EcmaScript第8版已经发布, ...

ES7、ES8、ES9、ES10、ES11新特性