目录
一、ES6
二、ES7
三、ES8
四、ES9
一、ES6
点击跳转
二、ES7
1.Includes方法:检测数组是否包含某个元素,返回布尔值
const mingzhu = ['西游记', '红楼梦', '三国演义', '水浒传'];
console.log(mingzhu.includes('西游记')); // true
console.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返回成功的promise
async 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:// www.atguigu.com">尚硅谷</a>';
// 提取 url 与 尚硅谷文本
const reg = /<a href="(.*)">(.*)<\/a>/;
// 执行
const result = reg.exec(str); // [0: <a href="http:// www.atguigu.com">尚硅谷</a>, 1: http:// www.atguigu.com, 2: 尚硅谷];
// 获取第一个分组的(.*)的内容
console.log(result[1]); // http:// www.atguigu.com
// 获取第二个分组的(.*)的内容
console.log(result[1]); // 尚硅谷
通过命名捕获分组
// 声明一个字符串
let str = '<a href="http:// www.atguigu.com">尚硅谷</a>';
// 提取 url 与 尚硅谷文本
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
// 执行
const result = reg.exec(str);
// 获取命名为url的内容
console.log(result.groups.url); // http:// www.atguigu.com
// 获取命名为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