目录
一、ES6
二、ES7
三、ES8
四、ES9
一、ES6
点击跳转
二、ES7
1.Includes方法：检测数组是否包含某个元素，返回布尔值
const mingzhu = ['西游记', '红楼梦', '三国演义', '水浒传'];console.log(mingzhu.includes('西游记')); // trueconsole.log(mingzhu.includes('金瓶梅')); // false
2.指数操作符用** 来实现幂运算 ， 与Math.pow结果一样
// **console.log(2 ** 10); // 1024// Math.pow()console.log(Math.pow(2, 10)); // 1024
三、ES8
1.async和await:这两种语法结合可以让异步代码像同步代码一样
2.promise函数
1)、async函数的返回值为promise对象
2)、promise对象的结果由async函数返回值决定
async function fn() {// 1.返回一个不是promise类型的对象， return出去的都是一个成功的promise对象// return '返回成功的状态'// 2.抛出错误， return出去的是一个失败的promisethrow new Error('出错了')// 3.返回的结果如果是一个promise对象return new Promise((resolve, reject) => {resolve('我成功返回的就是一个成功的promise');reject('我失败返回的就是一个失败的promise');})}const result = fn();console.log(result);
通过then、catch获取到的不是promise 而是promise的值
// 调用resolve返回成功的promiseasync function fn() {return new Promise((resolve, reject) => {resolve('我成功返回的就是一个成功的promise');reject('我失败返回的就是一个失败的promise');})}const result = fn();// 调用 then 方法result.then(res => {console.log(res) // 直接打印出primice对象的值 我成功返回的就是一个成功的promise}).catch(err => {console.log(err) // 直接打印出primice对象的值 我失败返回的就是一个失败的promise})
3.await表达式
// 创建promise 对象const p = new Promise((resolve, reject) => {resolve('成功啦');reject('失败啦')})// await 要放在async函数中async function main() {try {let result = await p; // await p 是获取成功的返回值console.log(result); // 成功啦} chtch(e) { // e为失败的返回值console.log(e); // 失败啦}}// 上面的try其实你可以理解为then和catch方法一样记
4.async和await的结合使用把异步变同步
const fn1 = () => console.log("fn1")const fn2 = () => console.log("fn1")const fn3 = () => console.log("fn1")// 声明一个async函数async function main() {let fun1 = await fn1();let fun2 = await fn2();let fun3 = await fn3();console.log(fun1);console.log(fun2);console.log(fun3);}main();// 分别打印出:// fn1// fn2// fn3// 从上到下跟同步一样按顺序执行 因为有一个await关键字 只有上一个await执行完毕了才会执行下一个await
5.Object.keys()和Object.values()
const school = {name: '尚硅谷',cities: ['上海', '上海', '深圳'],xueke: ['前端', 'java'],};// 获取对象的所有键console.log(Object.keys(school)); // ['name', 'cities', 'xueke']// 获取对象的所有值console.log(Object.values(school)); // ['尚硅谷', ['上海', '上海', '深圳'], ['前端', 'java']]
6.entres
const school = {name: '尚硅谷',cities: '啊啊啊',xueke: '哦哦哦',};console.log(Object.entries(school)); // [["name", "尚硅谷"], ["cities", "啊啊啊"], ["xueke", "xueke"]]
四、ES9
1.对象的rest参数
function connect({host, prot, ...user}) {console.log(host); // 127.0.0.1console.log(port); // 3306console.log(user); // {username: "root", password: "root", type: "mater"}}connect({host: '127.0.0.1',port: 3306,username: 'root',password: 'root',type: 'mater'})
2.对象的扩展运算符
const skillOne = {q: '天音波'}console.log(...skillOne); // q: '天音波'const skillTwo = {W: '金钟罩'}const skillThree = {e: '天雷破'}const mangseng = {...skillOne, ...skillTwo, ...skillThree};console.log(mangseng); // {q: '天音波', W: '金钟罩', e: '天雷破'}
3.正则扩展-命名捕获分组
通过下标捕获分组
// 声明一个字符串let str = '<a href="http:// ">尚硅谷</a>';// 提取 url 与 尚硅谷文本const reg = /<a href="(.*)">(.*)<\/a>/;// 执行const result = reg.exec(str); // [0: <a href="http:// ">尚硅谷</a>, 1: http:// , 2: 尚硅谷];// 获取第一个分组的(.*)的内容console.log(result[1]); // http:// // 获取第二个分组的(.*)的内容console.log(result[1]); // 尚硅谷
通过命名捕获分组
// 声明一个字符串let str = '<a href="http:// ">尚硅谷</a>';// 提取 url 与 尚硅谷文本const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;// 执行const result = reg.exec(str); // 获取命名为url的内容console.log(result.groups.url); // http:// // 获取命名为text的内容console.log(result.groups.text); // 尚硅谷
3.正则扩展 - 正向断言
// 声明字符串let str = 'JS5211314你知道么555啦啦啦';// 正向断言const reg = /\d+(?=啦)/;const result = reg.exec(str);console.log(result[0]); // 555
4.正则扩展 - 反向断言
// 声明字符串let str = 'JS5211314你知道么555啦啦啦';// 反向断言const reg = /(?<=么)\d+/;const result = reg.exec(str);console.log(result[0]); // 555
其他的不写了 感觉用不上浪费时间
如果觉得《ES6 ES7 ES8 ES9 ES10 ES11》对你有帮助，请点赞、收藏，并留下你的观点哦！
