Web前端自学记录二十二 ES6新特性

ES6 2022-09-16

ES6新特性

1.let

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <script>
        //声明变量
        let a,b,c,d;
        let e = 100;
        let f = 100, g = 200;

        //1.变量不能重复声明
        //2.块级作用域  全局，函数，eval
        // {
        //     let a = 100；
        //     // 在外部无法读取
        // }
        //3.不存在变量提升
        //4.不影响作用域链
    </script>
</body>
</html>

2.const

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 声明常量
        const SCHOOL = "尚硅谷";
        // 1.一定要赋初始值
        // 2.一般常量使用大写
        // 3.常量的值不能修改
        // 4.块级作用域
        // 5.对于数组和对象的元素修改，不算做对常量的修改，不会报错
        
    </script>
</body>
</html>

3.变量的解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值
        // 这被称为解构赋值
        // 1.数组的解构
        const F4 = ["小沈阳","刘能","赵四","宋小宝"];
        let [xiao,liu,zhao,song] = F4;
        // 2.对象的解构
        const zhao ={
            name: "赵本山",
            age:"不详",
            xiaopin: function() {
                console.log("我可以演小品");
            }
        };

        let{name,age,xiaopin} = zhao;
    </script>
</body>
</html>

4.模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // ES6 引入新的声明字符串的方式 ``
        // 1.声明
        let str = `我是一个字符串`;
        // 2.内容中可以直接出现换行符
        let str1 = `<ul>
                    <li>沈腾</li>
                    <li>玛丽</li>
                    </ul>`;
        // 3.变量拼接
        let lovest = `魏翔`;
        let out = `${lovest}是我心目中最搞笑的演员`;
    </script>
</body>
</html>

5.简化对象写法

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // ES6 允许在大括号里面直接写入变量和函数，作为对象的属性和方法
        // 这样的书写更加简洁
        let name = '尚硅谷';
        let change = function() {
            console.log('改变名称');
        }
        const school = {
            name,
            change,
            improve(){
                console.log("我们可以提高你的技能")
            }
        }
    </script>
</body>
</html>

6.箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // ES6允许使用 箭头 (=>)定义函数
        // 声明一个函数
        let fn = (a,b) =>{
            return a + b;
        }
        // 调用函数
        fn(1,2);
        // 1.this是静态的，this始终指向函数声明时所在作用域下的this的值
        function getName() {
            console.log(this.name);
        }
        let getName2 = () =>{
            console.log(this.name);
        }
        // 设置window对象的name属性
        window.name = '尚硅谷';
        const school = {
            name:"ATGUIGU"
        };
        // 直接调用
        // getName();
        // getName2();

        // call方法调用
        getName.call(school);
        getName2.call(school);

        // 2.不能作为构造函数实例化对象
        // 3.不能使用arguments变量
        // 4.箭头函数的简写
            // 1) 省略小括号，当形参有且只有一个的时候
            // 2) 省略花括号，当代码体只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值
            let pow = n => n*n;
        // 箭头函数适合与this无关的回调，定时器，数组的方法回调
        // 箭头函数不适合于this有关的回调，事件回调，对象的方法
            
    </script>
</body>
</html>

7.函数参数默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // ES6 允许给函数参数赋值默认值
        // 1.形参的初始值 具有默认值的参数，一般位置要靠后
        // 2.默认值可以与解构赋值结合
        function add(a,b,c=10) {
            return a + b + c;
        }
        function connect({host="127.0.0.1",username,password,port}) {
            console.los(host);
        }
        connect({
            host:"localhost",
            username:"root",
            password:"root",
            port:3306
        })
    </script>
</body>
</html>

8.rest参数

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // ES6引入rest参数，用于获取函数的实参，用来代替arguments
        // ES5获取实参的方式
        // function date() {
        //     console.log(arguments);
        // }
        // date("a","b","c");
        // rest 参数
        function date(...args) {
            console.log(args);
        }
        date("a","b","c");
        // rest 参数必须要放到参数的最后
    </script>
</body>
</html>

9.扩展运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // "..." 扩展运算符，能将数组转换为逗号分隔的参数序列
        // 声明一个数组
        const tfboys = ['易烊千玺','王俊凯','王源'];// =>'易烊千玺','王俊凯','王源'
        // 声明一个函数
        function chunwan() {
            console.log(arguments);
        }
        chunwan(...tfboys);

        // 数组的合并
        const arr1 = ['a','b'];
        const arr2 = ['c','d'];
        const hebing =[...arr1,...arr2];
        // 数组的克隆
        const arr3 = ['e','f'];
        const arr4 = [...arr3];
        // 将伪数组转为真正的数组
    </script>
</body>
</html>

10.Symbol对象

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // Symbol对象 唯一值，用于防止属性名冲突
        // 创建Symbol
        let s = Symbol();
        // console.log(s,typeof s);
        let s2 = Symbol("a");
        let s3 = Symbol("a");
        console.log(s2 === s3);//false
        // Symbol.for创建
        let s4 = Symbol.for("b");
        let s5 = Symbol.for("b");
        console.log(s4 === s5);//true

        // 不能与其他数据进行运算
    </script>
</body>
</html>

Symbol创建对象属性

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 向对象中添加方法 up down
        let game ={}

        // 声明一个对象
        let methods = {
            up: Symbol(),
            down:Symbol()
        }
        game[methods.up] = function() {
            console.log("我可以改变形状");
        }
        game[methods.down] = function() {
            console.log("我可以快速下降");
        }
        console.log(game);

        let youxi = {
            name:"狼人杀",
            [Symbol("say")]:function () {
                console.log("我可以发言")
            },
            [Symbol("zibao")]:function () {
                console.log("我可以发言")
            }
        }
    </script>
</body>
</html>

Symbol的内置值

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        class Person{
            static [Symbol.hasInstance](param){
                console.log(param);
                console.log("我被用来检测类型了");
            }
        }
        let o = {};
        console.log(o instanceof Person)

        const arr = [1,2,3]
        const arr2 = [4,5,6]
        arr2[Symbol.isConcatSpreadable] = false;
    </script>
</body>
</html>

11.迭代器

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 声明一个对象
        const banji = {
            name:"终极一班",
            stus:[
                "xiaoming",
                "xiaoning",
                "xiaotian",
                "knight"
            ],
            [symbol.iterator](){
                // 索引变量
                let index = 0;
                let _this = this
                return{
                    next:function(){
                        if(index < _this.stus.length){
                            const result = {value:_this.stus[index],done:false};
                            // 下标自增
                            index++;
                            // 返回结果
                            return result;
                        }else{
                            return{value:undefined,done:true};
                        }
                        
                    }
                };
            }
        }
        // 遍历这个对象
        for(let v of banji){
            console.log(v);
        }


        // // 使用for...of遍历数组
        // for(let v of xiyou){
        //     console.log(v);
        // }
        // // 
    </script>
</body>
</html>

12.生成器

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 生成器其实就是一个特殊的函数
        // 异步编程 纯回调函数
        // yield 函数代码的分隔符
        function * gen() {
            yield 'a';
            yield 'b';
            yield 'c';
        }
        // let iterator = gen();
        // iterator.next();
        // iterator.next();
        // iterator.next();
        // iterator.next();

        // 遍历
        for(let v of gen()){
            console.log(v);
        }
    </script>
    
</body>
</html>

生成器的函数参数

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function * gen(arg) {
            console.log(arg);
            let one = yield 111;
            console.log(one);
            let two = yield 222;
            console.log(two);
            let three =yield 333;
            console.log(three);
        }
        // 执行获取迭代器对象
        let iterator = gen("AAA");
        // next方法可以传入实参
        console.log(iterator.next());
        console.log(iterator.next('BBB'));
        console.log(iterator.next('CCC'));
        console.log(iterator.next('DDD'));
    </script>
</body>
</html>

生成器的函数实例

<!DOCTYPE html>
<html lang="en">

<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 异步编程 文件操作 网络操作(ajax request) 数据库操作
        // 1s后控制台输出111 2s后输出222 3s后输出333
        // 回调地狱
        /* 
            setTimeout(() => {
                console.log(111);
                setTimeout(() => {
                    console.log(222);
                    setTimeout(() => {
                        console.log(333);
                    }, 3000);
                }, 2000);
            }, 1000); 
        */
       function one() {
           setTimeout(()=>{
               console.log(111);
               iterator.next();
           },1000)
       }
       function two() {
           setTimeout(()=>{
               console.log(222);
               iterator.next();
           },2000)
       }
       function three() {
           setTimeout(()=>{
               console.log(333);
               iterator.next();
           },3000)
       }
       function * gen(){
           yield one()
           yield two()
           yield three()
       }
    // 调用生成器函数
    let iterator = gen();
    iterator.next();
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 模拟录取 用户数据 订单数据 商品数据
        function getUsers() {
            setTimeout(()=>{
                let data = '用户数据'
                // 调用next方法，并且将数据传入
                iterator.next(data);
            },1000)
        }
        function getorders() {
            setTimeout(()=>{
                let data = '订单数据'
                iterator.next(data);
            },1000)
        }
        function getGoods() {
            setTimeout(()=>{
                let data = '商品数据'
                iterator.next(data);
            },1000)
        }
        function * gen(){
            let users = yield getUsers();
            console.log(users);
            let orders = yield getorders();
            console.log(orders);
            let goods = yield getGoods();
            console.log(goods);
        }
        let iterator = gen();
        iterator.next();
    </script>
</body>
</html>

13.Promise

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 实例化promise对象
        const p = new Promise(function(resolve, reject) {
            setTimeout(function() {
                // 
                let data = '数据库中的用户数据';
                // resolve
                resolve(data);
            },1000)
        });
        // 调用 promise 对象的 then方法
        p.then(function(value) {
            console.log(value);
        },function (reason) {
            console.error(reason);
        })
    </script>
</body>
</html>

Promise.prototype.then

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 创建promise对象
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve("用户数据");
            },1000)
        });

        // 调用then方法 then方法的返回结果是promise对象，对象状态由回调函数的执行结果决定
        // 1.如果回调函数中返回的结果是 非promise类型的属性，状态为成功，返回值为对象的成功值

        // const result = p.then(value =>{
        //     console.log(value);
        //     // 1.非promise类型的属性
        //     // return 'aaa'
        //     // 2.是promise对象
        //     // return new Promise((resolve,reject)=>{
        //     //     resolve('ok')
        //     // })
        //     // 3.抛出错误
        //     throw new Error('出错了')
        // },reason=>{
        //     console.warn(reason);
        // });
        p.then(value=>{

        },reason=>{

        }).then(value=>{

        },reason=>{

        })

        console.log(result);


    </script>
</body>
</html>

promise-catch

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const p =  new Promise((resolve,reject)=>{
            setTimeout(()=>{
                // 设置p对象的状态为失败，并设置失败的值
                reject("出错了")
            },1000);
        });

        p.catch(function(reason) {
            console.warn(reason);
        });
    </script>
</body>
</html>

14.set

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 声明一个 set
        let s = new Set();
        let s2 = new Set(['a','b','c','d','a'])

        // 元素个数
        console.log(s2.size);
        // 添加新的元素
        s2.add('e')
        // 删除元素
        s2.delete('e')
        // 检测
        s2.has('a')
        // 清空
        s2.clear();

        for(let v of s2){
            console.log(v);
        }
    </script>
</body>
</html>

集合实践

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr = [1,2,3,4,5,4,3,2,1];
        // 1.数组去重
        // let result = [...new Set(arr)]
        // console.log(result);
        // 2.交集
        // let arr2 = [4,5,6,5,6];
        // let result = [...new Set(arr).filter(item=>{
        //     let s2 = new Set(arr2);
        //     if(s2.has(item)){
        //         return true;
        //     }else{
        //         return false
        //     }
        // })]
        // let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        // 3.并集
        // let union = [...new Set([...arr,...arr2])];
        // console.log(union);
        // 4.差集
        let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(diff);
    </script>
</body>
</html>

15.map

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 声明map
        let m = new Map();

        // 添加元素
        m.set('name','aaa')
        m.set('change',function () {
            console.log('改变');
        });
        let key = {
            username : 'eee'
        };
        m.set(key,['bbb','ccc','ddd'])
        // 删除
        m.delete('name')
        // 获取
        console.log(m.get('change'));
        // 清空
        m.clear()
        // 遍历
        for(let v of m){
            console.log(v);
        }
    </script>
</body>
</html>

16.class

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // // 手机
        // function Phone(brand,price) {
        //     this.brand = brand;
        //     this.price = price;
        // }
        // // 添加方法
        // Phone.prototype.call = function () {
        //     console.log('我可以打电话');
        // }
        // // 实例化对象
        // let Huawei = new Phone("华为",9999);

        // class
        class Phone{
            // 构造方法 名字不能修改
            constructor(brand,price){
                this.brand = brand;
                this.price = price;
            }
            // 方法必须使用该语法，不能使用ES5的对象完整形式
            call(){
                console.log('我可以打电话');
            }
        }
        let onePlus = new Phone('1+',1999)
        onePlus.call()
    </script>
</body>
</html>

class静态成员

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // function Phone() {
            
        // }
        // Phone.name = '手机'
        // Phone.change = function () {
        //     console.log('我可以改变世界');
        // }
        // let nokia = new Phone();
        
        class Phone{
            // 静态属性
            static name = '手机';
            static change(){
                console.log("我可以改变世界");
            }
        }
    </script>
</body>
</html>

17.ES6构造函数继承

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function Phone(brand,price) {
            this.brand = brand;
            this.price = price;
        }
        Phone.prototype.call = function () {
            console.log('我可以打电话');
        }
        function SmartPhone(brand,price,color,size) {
            Phone.call(this,brand,price);
            this.color = color;
            this.size = size;
        }
        // 设置子集构造器的原型
        SmartPhone.prototype = new Phone;
        SmartPhone.prototype.constructor = SmartPhone;
        // 声明子类的方法
        SmartPhone.prototype.photo = function () {
            console.log('我可以拍照');
        }

        const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch')
        
    </script>
</body>
</html>

类继承

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        class Phone{
            // 构造方法
            constructor(brand,price){
                this.brand = brand;
                this.price = price;
            }
            // 父类的成员属性
            call(){
                console.log('我可以打电话');
            }
        }

        class SmartPhone extends Phone{
            // 构造方法
            constructor(brand,price,color,size){
                super(brand,price);//Phone.call(this,brand,price)
                this.color = color
                this.size = size
            }
            photo(){
                console.log('拍照');
            }
            // 对父类方法的重写
            call(){
                console.log("视频通话");
            }
        }
        const xiaomi = new SmartPhone('小米',799,'白色','4.7inch')
    </script>
</body>
</html>

18.get和set

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // get 和 set
        class Phone{
            get price(){
                console.log('价格属性被读取了')
                return '价格';
            }
            set price(newVal){
                console.log('价格属性被修改了');
                return 'jiage'
            }
        }
        // 实例化对象
        let s = new Phone();

        console.log(s.price);
        s.price = 'free';
    </script>
</body>
</html>

19.数值扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 0. Number.EPSILON是JavaScript表示的最小精度
        function equal(a,b) {
            if(Math.abs(a-b)< Number.EPSILON){
                return true;
            }else{
                return false;
            }
        }
        console.log(0.1 + 0.2 === 0.3);//false
        console.log(equal(0.1+0.2,0.3));//true
        // 1.二进制和八进制
        let b = 0b0110;
        let o = 0o777;
        // 2.Nubmer.isFinite 检测一个数值是否为有限数
        console.log(Number.isFinite(100));
        // 3.Number.isNaN 检测一个数是否为Nan
        console.log(Number.isNaN(123));
        // 4.Number.parseInt Number.parseFloat字符串转整数/浮点数
        console.log(Number.parseInt('123aaa'));
        // 5.Number.isInteger 判断一个数是否为整数
        console.log(Number.isInteger(123));
        // 6.Math.trunc 将数字的小数部分抹掉
        console.log(Math.trunc(3.5));
        // 7.Math.sign 判断一个数到底为整数、负数还是零
        console.log(Math.sign(100));
    </script>
</body>
</html>

20.对象方法扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.Object.is 判断两个值是否完全相等
        console.log(Object.is(120,120));
        console.log(Object.is(NaN,NaN));//true
        // 2.Object.assign对象的合并
        const config1 ={
            port:123,
            test:'test'
        }
        const config2 ={
            port:456
        }
        Object.assign(config1.config2)
        // 3.Object.setPrototypeOf 设置原型对象 Object.getPrototypeof
        const school = {
            name : 'a'
        }
        const cities = {
            xiaoqu:['北京','上海']
        }
        Object.setPrototypeOf(school,cities)
        console.log(Object.getPrototypeOf(school));
    </script>
</body>
</html>

21.模块化

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来

            优势
                防止命名冲突
                代码复用
                高维护性

            产品
                Commonjs => Node.js browerify
                AMD => requireJS
                CMD => seaJS
        */
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
        // // 引入30.m1.js模块内容 通用的导入方式
        // import * as m1 from "./m1.js";
        // console.log(m1);

        // // 2.解构赋值的形式
        // import{school,teach} from "./m1.js";
        // import{school as aaa,findJob} from "./m2.js"
        // import{default as m3} from "./m3.js"

        // // 简便形式
        // import m3 from "./m3.js"
    </script>

    <script src="./js/app.js" type="module"></script>
</body>
</html>

m1

/* 
    export命令用于规定模块的对外接口
    import命令用于输入其他模块提供的功能
*/
// 分别暴露
export let school = 'aaa'
export function teach() {
    console.log('teach');
}

m2

// 统一暴露
let school = 'aaa'
function findJob() {
    console.log('找工作');
}
// 
export{school,findJob};

m3

// 默认暴露
export default{
    school:'aaa',
    change:function () {
        console.log('gaibian');
    }
}

22.ES7新特性

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // includes
        const word = ['a','b','c','d']
        console.log(word.includes('a'));

        // **幂运算
        console.log(2**10);//Math.pow(2,10)
    </script>
</body>
</html>

23.async函数

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // async函数
        async function fn() {
            // 返回的是一个promise对象
            // return 'a'
            // 返回的结果不是一个Promise类型的对象，返回的就是一个成功的Promise
            // 抛出错误，返回的结果是一个失败的Promise
            // throw new Error('出错了')
            // 返回的结果如果是一个Promise对象
            return new Promise((resolve,reject)=>{
                resolve('成功的数据')
            })
        }
        const result = fn();
        // 调用then方法
        result.then(value =>{
            console.log(value);
        },reason=>{
            console.warn(reason);
        })
    </script>
</body>
</html>

24.await表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            await必须写在async函数中
            await右侧的表达式一般为promise对象
            await返回的是promise成功的值
            await的promise失败了，就会抛出异常，需要通过try...catch捕获处理
        */
    //    创建promise对象
    const p = new Promise((resolve,reject)=>{
        // resolve('成功的值')
        reject("失败啦");
    })

        async function main() {
            try{
                let result = await p;
                console.log(result);
            }catch(e){
                console.log(e);
            }
        }
        main()
    </script>
</body>
</html>

async和await结合读取文件

// 引入fs模块
const fs = require('fs')

function readWeiXue() {
    return new Promise((resolve, reject) => {
        fs.readFile("./为学.md", (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data)
        })
    })
}
function readChaYangShi() {
    return new Promise((resolve, reject) => {
        fs.readFile("./插秧诗.md", (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data)
        })
    })
}
function readGuanShuYouGan() {
    return new Promise((resolve, reject) => {
        fs.readFile("./观书有感.md", (err, data) => {
            // 如果失败
            if (err) reject(err);
            // 如果成功
            resolve(data)
        })
    })
}
async function main() {
    // 获取为学内容
    let weixue = await readWeiXue()
    let chayang = await readChaYangShi()
    let guanshuyougan = await readGuanShuYouGan()

    console.log(weixue.toString());
    console.log(chayang.toString());
    console.log(guanshuyougan.toString());
}
main()

async和await结合发送Ajax请求

<!DOCTYPE html>
<html lang="en">

<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 发送AJAX请求，返回的结果是Promise对象
        function sendAJAX(url) {

            return new Promise((resolve, reject) => {
                // 1.创建对象
                const x = new XMLHttpRequest;
                // 2.初始化
                x.open('GET', url);
                // 3.发送
                x.send();
                // 4.事件绑定
                x.onreadystatechange = function () {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            // 成功
                            resolve(x.response);
                        }else{
                            // 失败
                            reject(x.status);
                        }
                    }
                }
            })
        }
        // async与await测试
        async function main() {
            // 发送ajax请求
            let result = await sendAJAX("https://api.apiopen.top/getJoke");
            console.log(result);
        };

        main();
    </script>
</body>

</html>

25.ES8对象方法扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 声明对象
        const school = {
            name:'aaa',
            cities:['北京','上海'],
            xueke:['前端','java']
        }
        // 获取对象所有的键
        console.log(Object.keys(school));
        // 获取对象所有的值
        console.log(Object.values(school));
        // entries
        // console.log(Object.entries(school));
        // 创建map
        const m = new Map(Object.entries(school));
        console.log(m);
        // 对象属性的描述对象
        console.log(Object.getownPropertyDescriptors(school));
    </script>
</body>
</html>

26.ES9扩展运算符与rest参数

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        Rest参数与spread扩展运算符在ES6中已经引入，不过ES6中只针对于数组，
        在ES9中为对象提供了像数组一样的rest参数和扩展运算符
     -->
     <script>
        //  function connect(host,port,...user) {
        //      console.log(host);
        //      console.log(port);
        //      console.log(username);
        //      console.log(password);
        //  }

        //  connect({
        //      host:"127.0.0.1",
        //      port:3386,
        //      username:'root',
        //      password:'root',
        //      type:"master"
        //  });
        const skillOne = {
            q:"天音波"
        }
        const skillTwo = {
            w:"金钟罩"
        }
        const mangseng ={...skillOne,...skillTwo}
        // ...skillOne => q:"天音波",w:"金钟罩"

     </script>
</body>
</html>

27.正则扩展

命名捕获分组

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // // 声明一个字符串
        // let str = '<a href="http://www.atguigu.com">尚硅谷</a>'

        // // 提取url与标签文本
        // const reg = /<a href="(.*)">(.*)<\/a>/;
        // // 执行
        // const result = reg.exec(str);

        // console.log(result[1]);
        // console.log(result[2]);
        let str = '<a href="http://www.atguigu.com">尚硅谷</a>'
        const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
        const result = reg.exec(str);
        console.log(result);
    </script>
</body>
</html>

反向断言

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 声明字符串
        let str = 'JS5211314你知道么555啦啦啦'
        // 正向断言
        // const reg = /\d+(?=啦)/;
        // const result = reg.exec(str)
        // 反向断言
        const reg = /(?<=么)\d+/
        const result = reg.exec(str);
    </script>
</body>
</html>

dotAll模式

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // dot . 元字符  除换行符以外的任意单个字符
        let str = `
        <ul>
            <li>
                <a>肖申克的救赎</a>
                <P>上映日期：1994-09-18</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)){
            console.log(result);
            data.push({title:result[1],time:result[2]})
        }
        console.log(data);
    </script>
</body>
</html>

28.ES10对象扩展方法

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 二维数组
        const result = Object.fromEntries([
            ['name','尚硅谷'],
            ['xueke','Java,大数据,前端']
        ]);
        console.log(result);

        // Map
        const m = new Map()
        m.set('name','atguigu')

        const result = Object.fromEntries(m)
    </script>
</body>
</html>

29.ES10字符串扩展方法

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // trim 清除空白
        // trimstart 清除字符串左侧空白
        // trimEnd 清除字符串右侧空白
    </script>
</body>
</html>

30.数组方法扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // flat
        // 将多维数组转化为低维数组
        // const arr = [1,2,3,4,[5,6]];
        // console.log(arr.flat);
        // const arr = [1,2,3,4,[5,6[7,8,9]]]
        // 参数为深度 是一个数字
        // console.log(arr.flat(2));

        // flatMap
        const arr = [1,2,3,4];
        const result = arr.flatMap(item=>[item * 10]);
        console.log(result);
    </script>
</body>
</html>

31.ES10-Symbol.prototype.description

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 创建Symbol
        let s = Symbol('尚硅谷')

        console.log(s.description);
    </script>
</body>
</html>

32.ES11私有属性

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        class Person{
            // 公有属性
            name;
            // 私有属性
            #name;
            #weight;
            // 构造方法
            constructor(name,age,weight){
                this.name = name;
                this.#age = age;
                this.#weight = weight;
            }
        }
        // 实例化
        const girl = new Person('小红',18,'45kg')
        console.log(girl.name);
        console.log(girl.#age);//访问不到
        console.log(girl.#weight);
    </script>
</body>
</html>

33.Promise.allSettled方法

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 声明两个promise
        const p1 = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve("商品数据 - 1");
            },1000)
        });

        const p2 = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve("商品数据 - 2");
            },1000)
        });

        // 调用allsettled方法
        const result = Promise.allSettled([p1,p2]);
        console.log(result);
    </script>
</body>
</html>

34.string.prototype.matchAll

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let str = `
        <ul>
            <li>
                <a>肖申克的救赎</a>
                <P>上映日期：1994-09-18</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);

        for(let v of result){
            console.log(v);
        }
    </script>
</body>
</html>

35.可选链操作符

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 可选的链接运算符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效
        function main(config) {
            // const dbHost = config && config.db && config.db.host;
            const dbHost = config?.db?.host;

            console.log(dbHost);
        }
        main({
            db:{
                host:'192.168.1.100',
                username:"root"
            },
            cache:{
                host:'192.168.1.200',
                username:"admin"
            }
        })
    </script>
</body>
</html>

36.动态import

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击</button>
    <script src=".app1.js" type="module"></script>
</body>
</html>

app1.js

// 获取元素
const btn = document.getElementById('btn');

btn.onclick = function () {
    import('./hello.js').then(module => {
        module.hello()
    });
};

hello.js

export function hello() {
    alert('hello')
}

37.BigInt类型

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 大整型
        // let n = 521n

        // 函数
        let n =123;
        console.log(BigInt(n));
    </script>
</body>
</html>

38.绝对全局对象

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(globalThis);
    </script>
</body>
</html>

39.将ES6代码转换为可识别的ES5代码

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.安装工具 babel-cli bable-preset-env browserify(webpack)
        2.npx babel src/js -d dist/js
        3.打包 npx browserify dist/js/app.js -o dist/bundle.js
     -->
     <script src="./js/app.js" type="module"></script>
</body>
</html>

后续会持续更新

相关文章

ES6模块的import和export用法总结
原文连接：https://www.cnblogs.com/dupd/p/5951311.htmlES6...
浅谈Es6中import * as xxx from几种基本用法
以为Es6，javascript第一次支持了module。ES6的模块化分为导...
ES6系列文章 异步神器async-await
视频讲解关于异步处理，ES5的回调使我们陷入地狱，ES6的Prom...
TypeScript看完就会了
TypeScript什么是TypeScript?TypeScript是由微软开发的一款开...
typeScript 变量名 冒号 类名 ＜–这种写法什么意思?
export class AppComponent { title = 'Tour of heroes...
用 async/await 来处理异步
用 async/await 来处理异步昨天看了一篇vue的教程，作者用as...