微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：ES6作者：编程之家原文地址AI导航网

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>

后续会持续更新

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

ES6模块的import和export用法总结
原文连接：https://www.cnblogs.com/dupd/p/5951311.htmlES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。ES6在语言规格的层面上，实现了模块功能，而且...
浅谈Es6中import * as xxx from几种基本用法
以为Es6，javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块，其中在项目中，我们会经常看到一种用法import * as obj from，这种写法是把所有的输出包裹到obj对象里。示例一 1 2 3 4 5 6 7 // index.js export function fn1(data){ console.log(1) } export f.
ES6系列文章 异步神器async-await
视频讲解关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。async-await和Promise的关系经常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特点，接收了这些信息后，就蒙圈了。现在才知道...
TypeScript看完就会了
TypeScript什么是TypeScript?TypeScript是由微软开发的一款开源的编程语言TypeScript是JavaScript的超集，遵循最新的ES5 ES6规范，TypeScript扩展了JavaScript的语法TypeScript更像后端 Java c# 这样的面向对象语言可以让js开发大型企业项目谷歌也在大力支持TypeScript的推广，React ，VUE 都集成了TypeScriptTypeScript安装安装-- 安装npm install -g type
typeScript 变量名 冒号 类名 ＜–这种写法什么意思?
export class AppComponent { title = 'Tour of heroes'; hero: Hero = { id: 1, name: '张三' };}export class Hero { id: number; name: string;}就是这一段,看起来有点晕,这里是实例化一个Hero类型的对象hero,还是创建一个变量?后面是赋值,但是不知道什么意思?hero: Hero = { id: 1, na.
用 async/await 来处理异步
用 async/await 来处理异步昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，是时候学习一下了。先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数async function timeout() {return 'hello world'
es6之解构赋值
es6的语法已经出了很长的时间了，在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法，但是依旧有很多开发在写代码的时候，依旧没有用es6的语法，而是习惯使用老的语法，这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势，让大家从根本上了解es6语法的优势基本用法数组解构让我们一起先来看数组解构的基本用法：let [a, b, c] ...
TypeScript 定义函数的几种写法
参考链接1 参考链接2写法1 - 使用 function 关键字function greeter(fn: (a: string) =&gt; void) { fn("Hello, World");}function printToConsole(s: string) { console.log(s);}greeter(printToConsole);(a: string) =&gt; void上述语法的含义：表示一个函数，接收一个字符串作为输入参数，没有返回参数。可
es6
ES6简介-ECMAScript是javascript标准-ES6就是ECMAScript的第6个版本-ECMAScript6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6新增加的功能：1.let
ES6的函数写法总结，一看就会！
ES6  在ES5的基础上增加了一些新的特性和写法，特别在函数写法上，增加了箭头函数 1.正经的函数写法//普通的传递值的写法functionsum1(x,y){returnx+y;}constres=sum1(2,3);console.log(res);//传递对象的方式,调用时需要传递一个对象过去function
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native