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

最新推荐文章于 2024-07-15 17:48:30 发布
最新推荐文章于 2024-07-15 17:48:30 发布
阅读量322 收藏
点赞数
文章标签： es6 node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zqc382750716/article/details/116736972
版权

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>

后续会持续更新

淡水鳗鱼的梦Z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
猛男表白案例——自学web前端
11-29
ES6的新特性也是必须要掌握的，如箭头函数、模板字符串和Promise等。 当掌握了基础知识后，可以进一步学习前端框架，如React、Vue或Angular。这些框架大大简化了开发流程，提高了开发效率。React以其组件化思想著称...
Web前端必做笔记之一：let, var, const的区别
qq_42302014的博客
10-24 2806
Web前端必做笔记之一：let, var, const的区别 <script> //var //没有块级作用域，只有函数作用域，支持变量提升 console.log(a); var a = 10; //这样输出会报undefined //var声明变量时，会在上面先声明一个a但是没有赋值，这时就输出undefined //let 这也是用
JavaScript的Let用法
stujike123456的博客
09-14 953
https://www.cnblogs.com/mikeCao/p/8992453.html
web前端视频大全学习资源，内涵css，html等零基础视频
06-15
此外，HTML5引入了许多新特性，如`<canvas>`用于图形绘制，`<video>`和`<audio>`支持多媒体播放，`<form>`表单元素的增强等，这些都是现代网页开发不可或缺的部分。 二、CSS（层叠样式表） CSS则是用来美化HTML元素...
zengxiaodai#Web#01-2019年Web前端入门自学路线1
07-25
一、HTML、CSS基础、JavaScript语法基础 二、JavaScript语法进阶 三、jQuery、Ajax等 四、ES6语法 五、HTML5和CSS3
web前端开发课设.zip
01-06
你需要学习变量、数据类型、函数、对象、DOM操作、事件处理等基础，以及现代JavaScript特性如ES6+的新语法、Promise、async/await等。 4. **前端框架与库**：压缩包可能包含了如React、Vue.js或Angular等流行的前端...
webstudy:前端自学
05-21
6. **ES6及以上版本的新特性**：包括箭头函数、模板字符串、解构赋值、Promise和Async/Await等，这些新特性大大提高了JavaScript的编写效率和代码质量。 7. **前端框架和库**：如React、Vue.js或Angular，它们提供...
ES6 Class(类) 总结（九）
qq_35876316的博客
07-11 564
ES6 中的 class 是一种面向对象编程的语法糖，提供了一种简洁的方式来定义对象的结构和行为。JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
ES6 Class 的继承（十一）
qq_35876316的博客
07-12 527
Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。
JS【详解】ES6 模块规范 vs CommonJS 模块规范
朝阳39的博客
07-11 461
每个 js 文件都是一个模块，默认采用的 CommonJS 模块规范。
js ES6 part3
E___V___E的博客
07-12 295
Number是内置构造函数，用来创建数值。
ES6 Generator函数的异步应用 （八）
qq_35876316的博客
07-11 373
【代码】ES6 Generator函数的异步应用 （八）
ES6 对象的新增方法（十四）
最新发布
qq_35876316的博客
07-15 116
判断对象是否被冻结，即不能添加新属性、删除现有属性或改变现有属性的可枚举性、可配置性、可写性。：设置对象的原型（内部[[Prototype]]属性）。：将一个或多个源对象的所有可枚举属性复制到目标对象。：返回一个给定对象自身可枚举属性的键值对数组。：返回一个包含对象所有可枚举属性名称的数组。：返回一个包含对象所有可枚举属性值的数组。：返回一个对象的所有自身属性的描述符。：获取对象属性的详细描述。：阻止添加新属性到对象。：用于对象属性的合并。：获取对象的所有键。：获取对象的所有值。：获取对象的键值对。
ES6 async 函数详解 （十）
qq_35876316的博客
07-11 357
async 函数是什么？一句话，它就是 Generator 函数的语法糖。async 函数就是将 Generator 函数的星号（ * ）替换成 async ，将 yield 替换成 await ，仅此而已。Generator 函数的执行必须靠执行器，所以才有了 co 模块，而 async 函数自带执行器。也就是说， async 函数的执行，与普通函数一模一样，只要一行。
ES6 Symbol （十三）
qq_35876316的博客
07-15 194
内置Symbol：使用 ES6 内置的 Symbol，如 Symbol.iterator 来实现自定义迭代器。创建Symbol：使用 Symbol() 创建一个新的 Symbol 值。作为属性键：使用 Symbol 作为对象属性的键，确保属性的唯一性。
ES6常用功能/新特性
闻人放歌的三寸青草园圃
07-15 68
es6模块化，在浏览器中需要通过webpack/rollup打包。这里我们也可以比较下两者打包结果的区别。查看打包后的代码，webpack有很多自己缝状的辅助函数，而rollup除了定义的amd/umd标准函数外，其他都是自己的逻辑代码。以下例子可以看出es6中class的本质就是js构造函数的语法糖。但是使用class写法，语意更加清晰、简洁。箭头函数可以改变js函数烦人的this指向window问题，将this指向最近一层。promise用来解决js中的callback hell。
Node.js 事件循环
07-15 300
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它使用非阻塞、事件驱动的 I/O 模型，使其轻量又高效。Node.js 的核心特性之一是其事件循环机制，这使得它能够处理高并发操作，而不会因为 I/O 操作阻塞。本文将深入探讨 Node.js 的事件循环，包括其工作原理、内部机制以及如何利用这一特性来编写高效的 Node.js 应用程序。
爬虫技术探索：Node.js 的优势与实践
艾恩小灰灰的博客
07-15 190
Node.js凭借其高性能、异步处理能力以及丰富的生态库支持，成为了构建高效爬虫的优选方案。通过上述示例，我们不仅了解了Node.js在爬虫开发中的优势，还实际体验了其在具体项目中的应用。随着技术的不断进步，Node.js在爬虫领域的应用也将更加广泛和深入。
【后端开发实习】用Node.js从mongodb中读取数据并转换为excel和pdf
weixin_73074012的博客
07-15 227
如果想实现绘制一个表格，那么需要另外再安装一个叫做pdfkit-table的库。有关于pdf-kit相关的内容可以参考。
前端练习题前端练习题前端练习题周考.docx
07-01
2. **ES6新特性**: 一道题目考查了JavaScript ES6的新功能，区分了`assign`、`Array.from`和`for...of`循环，明确指出`forEach`是ES5中的原生方法，而不是ES6新增的。 3. **浏览器行为与方法**: 提到阻止浏览器默认...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值