目录
四、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出去的是一个失败的promise
throw 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.1
console.log(port); // 3306
console.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