ES6、ES7、ES8、ES9、ES10、ES11

目录

一、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出去的是一个失败的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

其他的不写了  感觉用不上浪费时间