ES7新特性

一、Array.prototype.includes

二、指数操作符

ES8新特性

一、async 和 await

1.async 函数

2.await 表达式

async和await结合读取文件：

二、Object.values 和 Object.entries

ES9新特性

一、Rest/Spread 属性

二、正则表达式命名捕获组

三、正则表达式反向断言

四、正则表达式 dotAll 模式

ES10新特性

一、Object.fromEntries

二、trimStart 和 trimEnd

三、Array.prototype.flat 与 flatMap

四、Symbol.prototype.description

ES11新特性

一、String.prototype.matchAll

二、类的私有属性

三、Promise.allSettled

四、可选链操作符

五、动态 import 导入

六、globalThis 对象

七、BigInt

ES7新特性

一、Array.prototype.includes

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

    const name = ['Tom','Jerry','Bob']//判断console.log(name.includes("Tom"));  //trueconsole.log(name.includes("Jack")); //false

二、指数操作符

在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同

    console.log(2 ** 10);   //1024console.log(Math.pow(2,10));    //1024

ES8新特性

一、async 和 await

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

1.async 函数

async 函数的返回值为 promise 对象，
promise 对象的结果由 async 函数执行的返回值决定

    async function fn(){//return "Tom"//throw new Error("出错了！")//抛出错误，返回的结果是一个失败的Promise//返回的结果如果是一个Promise对象return new Promise((resolve,reject)=>{resolve('成功的数据')//reject('失败的错误')})}const result = fn()//调用then方法result.then(value=>{console.log(value);},reason=>{console.warn(reason);})console.log(result);

2.await 表达式

await 必须写在 async 函数中
await 右侧的表达式一般为 promise 对象
await 返回的是 promise 成功的值
await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理

async和await结合读取文件：

//1.引入fs模块
const fs = require("fs")
//读取【01】
function read01(){return new Promise((resolve,reject)=>{fs.readFile("./resources/01.md",(err,data)=>{//如果失败if(err) reject(err);//如果成功resolve(data)})})
}
//读取【02】
function read02(){return new Promise((resolve,reject)=>{fs.readFile("./resources/02.md",(err,data)=>{//如果失败if(err) reject(err);//如果成功resolve(data)})})
}
//读取【01】
function read03(){return new Promise((resolve,reject)=>{fs.readFile("./resources/03.md",(err,data)=>{//如果失败if(err) reject(err);//如果成功resolve(data)})})
}//声明一个async函数
async function main(){try{//获取01内容let read1 = await read01()//获取02内容let read2 = await read02()//获取03内容let read3 = await read03()console.log(read1.toString());console.log(read2.toString());console.log(read3.toString());}catch(e){console.log(e);}}
main()

二、Object.values 和 Object.entries

1. Object.values()方法返回一个给定对象的所有可枚举属性值的数组

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

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

    const person = {name:"Tom",hobby:['basketball','dance','rap'],subject:['Math','English']}//获取对象所有的键console.log(Object.keys(person));//获取对象所有的值console.log(Object.values(person));//entriesconsole.log(Object.entries(person));//创建Mapconst m = new Map(Object.entries(person))console.log(m);console.log(m.get('hobby'));//对象属性的描述对象console.log(Object.getOwnPropertyDescriptors(person));

ES9新特性

一、Rest/Spread 属性

Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符

例一：

    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"})

例二：

    const one = {a:"aa"}const two = {b:"bb"}const three = {c:"cc"}const all = {...one,...two,...three}console.log(all);

二、正则表达式命名捕获组

ES9 允许命名捕获组使用符号『?<name>』,这样获取捕获结果可读性更强

一般方式：

    //声明一个字符串let str = "<a href='http://www.baidu.com'>百度</a>"//提取url与【标签文本】const reg = /<a href='(.*)'>(.*)<\/a>/;//执行const result = reg.exec(str)console.log(result);console.log(result[1]);console.log(result[2]);

命名捕获组：

    let str = "<a href='http://www.baidu.com'>百度</a>"const reg = /<a href='(?<url>.*)'>(?<text>.*)<\/a>/;const result = reg.exec(str)console.log(result);console.log(result.groups.url);console.log(result.groups.text);

三、正则表达式反向断言

ES9 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选。

正向断言：

    let str = "js234566酷酷酷222啦啦啦"//正向断言const reg = /\d+(?=啦)/console.log(reg.exec(str));

反向断言：

    let str = "js234566酷酷酷222啦啦啦"//反向断言const reg = /(?<=酷)\d+/console.log(reg.exec(str));

四、正则表达式 dotAll 模式

正则表达式中点.匹配除回车外的任何单字符，标记『s』改变这种行为，允许行终止符出现

//dot . 元字符 除换行符以外的任意单个字符
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>/gs
let result;
let data = []
while(result = reg.exec(str)){data.push({title:result[1],time:result[2]})
}
console.log(data);

ES10新特性

一、Object.fromEntries

在ES8中使用Object.entries将对象转化为数组，在ES10中，使用Object.fromEntries将数组转换为对象。

    const result = Object.fromEntries([['name',"Tom"],['hobby','dance,rap']])console.log(result);//Mapconst m = new Map();m.set('name','Tom')const result1 = Object.fromEntries(m)console.log(result1);//在ES8中const arr = Object.entries({name:"Tom"})console.log(arr);

二、trimStart 和 trimEnd

trimStart清除字符串左侧空白；trimEnd清除字符串右侧空白

    let str = "   kkk    "console.log(str);   //'   kkk    'console.log(str.trimStart());   //'kkk    'console.log(str.trimEnd()); //'   kkk'

三、Array.prototype.flat 与 flatMap

Array.prototype.flat将多维数组转化为低维数组，参数为深度，是一个数字

    const arr = [1,2,[3,4,5]]console.log(arr.flat());const arr1 = [1,2,[3,4,[5,6]]]console.log(arr1.flat(2));//flatMapconst arr2 = [1,2,3,4]const result = arr2.flatMap(item => [item*10])console.log(result);

四、Symbol.prototype.description

获取Symbol的字符串描述

    let s = Symbol("Tom")console.log(s.description); //Tom

ES11新特性

一、String.prototype.matchAll

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)
const arr = [...result]
console.log(arr);

二、类的私有属性

    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('Tom',12,"45KG")//console.log(girl.#age); //获取不到girl.intro()

三、Promise.allSettled

接收一个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);

四、可选链操作符

?. 在对象层级较深时，不用做层级判断的简便写法

    function main(config){//const cache1Host = config && config.cache1 &&config.cache1.hostconst cache1Host = config?.cache1?.hostconsole.log(cache1Host);}main({cache1:{host:'192.168.1.100',username:'root'},cache2:{host:'192.168.1.200',username:'admin'}})

五、动态 import 导入

实现按需加载

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><button id="btn">点一下</button>
</body>
<script src="./app.js" type="module"></script>
</html>

六、globalThis 对象

不管在任何环境下，globalThis始终指向全局对象

console.log(globalThis);    //Window

七、BigInt

大整型，应用于大数值运算

    let n = 123nconsole.log(n,typeof(n));//123n "bigint"//函数let a = 123console.log(BigInt(a));//123n

    //大数值运算let max = Number.MAX_SAFE_INTEGER;console.log(max);   //9007199254740991console.log(max+1);//9007199254740992console.log(max+2);//9007199254740992console.log(BigInt(max));   //9007199254740991nconsole.log(BigInt(max)+BigInt(1));//9007199254740992nconsole.log(BigInt(max)+BigInt(2));//9007199254740993n

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 ...
七月学习之E6、ES7、ES8、ES9、ES10、ES11新特性
目录 ES6新特性(2015) 1. let 和 const 命令 2. 解构赋值 3. 扩展运算符(spread) 4. 箭头函数 5. 函数参数默认值 6. 模板字符串 7. 对象属性和方法的简写 ...
ES7、ES8、ES9、ES10、ES11新特性
一.ES7新特性 1. Array.prototype.includes includes 方法用来检测数组中是否包含某个元素,返回布尔值 2. 指数操作符指数运算符 ** ,用来实现幂运算,功能与 ...
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 新特性总结

ES7新特性

一、Array.prototype.includes

二、指数操作符

ES8新特性

一、async 和 await

1.async 函数

2.await 表达式

async和await结合读取文件：

二、Object.values 和 Object.entries

ES9新特性

一、Rest/Spread 属性

二、正则表达式命名捕获组

三、正则表达式反向断言

四、正则表达式 dotAll 模式

ES10新特性

一、Object.fromEntries

二、trimStart 和 trimEnd

三、Array.prototype.flat 与 flatMap

四、Symbol.prototype.description

ES11新特性

一、String.prototype.matchAll

二、类的私有属性

三、Promise.allSettled

四、可选链操作符

五、动态 import 导入

六、globalThis 对象

七、BigInt

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

最新文章

热门文章

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

ES7新特性

一、Array.prototype.includes

二、指数操作符

ES8新特性

一、async 和 await

1.async 函数

2.await 表达式

async和await结合读取文件：

二、Object.values 和 Object.entries

ES9新特性

一、Rest/Spread 属性

二、正则表达式命名捕获组

三、正则表达式反向断言

四、正则表达式 dotAll 模式

ES10新特性

一、Object.fromEntries

二、trimStart 和 trimEnd

三、Array.prototype.flat 与 flatMap

四、Symbol.prototype.description

ES11新特性

一、String.prototype.matchAll

二、类的私有属性

三、Promise.allSettled

四、可选链操作符

五、动态 import 导入

六、globalThis 对象

七、BigInt

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

最新文章

热门文章

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

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