• 前端ES6-ES11新特性

    ES6新特性

    变量声明

    let a;
let b,c,d;
let e = 100;
let f = 521, g = 'iloveyou', h = [];

    • 1
    • 2
    • 3
    • 4

    块级作用域

    {
	let girl = '周扬青';
}

console.log(girl); //这里会报错，变量不在作用域内,用var声明就可以

    • 1
    • 2
    • 3
    • 4
    • 5

    常量声明

    const NAME = 'tom'; //必须赋予初始值，变量名大写，变量值不能被修改

    • 1

    解构赋值

    数组：

    const F4 = [1, 2, 3, 4];
let [a, b, c, d] = F4; //此时abcd的值分别对应1234

    • 1
    • 2

    对象：

    const person = {
    name: 'tom',
    age: 10,
    say: function(){
        console.log('i can say hello');
    }
};

let {name, age, say} = person;//此时分别对应对象的属性

//也可以这样
let {say} = person; //say必须与person.say()相同
say();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    简化对象

    let name = 'tom';
let change  = function(){
    console.log('hello');
}

//直接对象赋值
const school = {
    name,
    change，
    improve(){
        console.log('123');
    },
    age:10	//旧的写法
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    箭头函数

    let fn = function(){
    ...
}
    
//新特性
let fn = (a, b) => {
    return a+b;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    注意：

    1.箭头函数不能作为构造实例化对象，例如：

    let me = new Person('tom'); //Person不能用箭头函数声明

    • 1

    2.不能使用·arguments·变量

    let fn = () => {
    console.log(arguments);
}
fn(1,2,3);

    • 1
    • 2
    • 3
    • 4

    3.只有一个参数时，（）可以省略

    let add = n =>{
    return n+n;
}

    • 1
    • 2
    • 3

    4.只有一条语句时，return必须省略

    let pow = n => n * n;

    • 1

    rest参数

    //ES5获取实参
function date(){
    console.log(arguments);
}
date(1,2,3);

//ES6
function date(...args){
    console.log(args);
}
date(1,2,3);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    注意：rest参数必须放到参数最后

    function fn(a, b, ...args){}

    • 1

    扩展运算符

    const arr = [1,2,3,4];
function ex(){
    console.log(arguments);
}

ex(...arr);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    Symbol的使用

    创建：

    let s = Symbol();
let s2 = Symbol('hello');
let s3 = Symbol.for('hi');                
                

    • 1
    • 2
    • 3
    • 4

    使用场景：

    迭代器

    生成器

    生成器是一个特殊的函数，用于一步编程，纯回调函数。

    function * gen(){ //*号的其中一边可以不用空格，不做要求
    console.log('123');
}
let iterator = gen();
iterator.netx(); // 调用

    • 1
    • 2
    • 3
    • 4
    • 5

    传参：

    解决回调地狱（嵌套）问题：

    异步编程

     //模拟获取  用户数据  订单数据  商品数据 
        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();
            let orders = yield getOrders();
            let goods = yield getGoods();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    Promise

    Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数， 用来封装异步操作并可以获取其成功或失败的结果。

    1. Promise 构造函数: Promise (excutor) {}
    2. Promise.prototype.then 方法
    3. Promise.prototype.catch 方法

    基础语法

    		//实例化 Promise 对象
        const p = new Promise(function(resolve, reject){ //resolve:用于执行成功返回参数，reject用于执行失败返回参数，reject和resolve都会改变p的状态
            setTimeout(function(){
                // let data = '数据库中的用户数据';
                // resolve
                // resolve(data);

                let err = '数据读取失败';
                reject(err);
            }, 1000);
        });

        //调用 promise 对象的 then 方法
        p.then(function(value){ //Promise执行成功执行的回调方法，value是resolve返回的数据
            console.log(value);
        }, function(reason){ //Promise执行失败执行的回调方法，reason是reject返回的数据
            console.error(reason);
        })

		//链式调用
        p.then(value => {
            
        }, reason => {
            
        }).then(value => {
            
        }, reason => {
            
        });

		//直接获取错误,相当于then不传第一个参数
		p.catch(function(reason){
            console.log(reason);
        });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    Promise封装异步ajax

    		   const p = new Promise((resolve, reject) => {
            //1. 创建对象
            const xhr = new XMLHttpRequest();

            //2. 初始化
            xhr.open("GET", "https://api.apiopen.top/getJoke");

            //3. 发送
            xhr.send();

            //4. 绑定事件, 处理响应结果
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState === 4) {
                    //判断响应状态码 200-299
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //表示成功
                        resolve(xhr.response);
                    } else {
                        //如果失败
                        reject(xhr.status);
                    }
                }
            }
        })
        
        //指定回调
        p.then(function(value){
            console.log(value);
        }, function(reason){
            console.error(reason);
        });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    集合Set

    类似数组，但是元素是唯一的。基础方法：

    		//声明一个 set
        let s = new Set();
        let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);

        //元素个数
        // console.log(s2.size);
        //添加新的元素
        // s2.add('喜事儿');
        //删除元素
        // s2.delete('坏事儿');
        //检测
        // console.log(s2.has('糟心事'));
        //清空
        // s2.clear();
        // console.log(s2);

        for(let v of s2){
            console.log(v);
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    去重、交集、并集、差集

    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);// 4 5 6
        //     if(s2.has(item)){
        //         return true;
        //     }else{
        //         return false;
        //     }
        // });
        // let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        // console.log(result);

        //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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    Map

    //声明 Map
        let m = new Map();

        //添加元素
        m.set('name','尚硅谷');
        m.set('change', function(){
            console.log("我们可以改变你!!");
        });
        let key = {
            school : 'ATGUIGU'
        };
        m.set(key, ['北京','上海','深圳']);

        //size
        // console.log(m.size);

        //删除
        // m.delete('name');

        //获取
        // console.log(m.get('change'));
        // console.log(m.get(key));

        //清空
        // m.clear();

        //遍历
        for(let v of m){
            console.log(v);
        }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    类Class

    		//ES5定义类
        function Phone(brand, price){
            this.brand = brand;
            this.price = price;
        }

        //添加方法
        Phone.prototype.call = function(){
            console.log("我可以打电话!!");
        }

        //实例化对象
        let Huawei = new Phone('华为', 5999);
        Huawei.call();
        console.log(Huawei);

        //ES6 class
        class Shouji{
            //构造方法 名字不能修改
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }

            //方法必须使用该语法, 不能使用 ES5 的对象完整形式
            call(){
                console.log("我可以打电话!!");
            }
        }

        let onePlus = new Shouji("1+", 1999);

        console.log(onePlus);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    静态成员

    		// function Phone(){

        // }
        // Phone.name = '手机'; 这样定义的是静态属性只属于类，不属于实例化对象
        // Phone.change = function(){ //静态方法
        //     console.log("我可以改变世界");
        // }
        // Phone.prototype.size = '5.5inch';//实例化对象可以使用的属性要这样定义，对象方法同理

        // let nokia = new Phone();

        // console.log(nokia.name); //这里会报错
        // // nokia.change();//这里会报错
        // console.log(nokia.size);//这里会成功

        class Phone{
            //静态属性
            static name = '手机';
            static change(){
                console.log("我可以改变世界");
            }
        }

        let nokia = new Phone();
        console.log(nokia.name);
        console.log(Phone.name);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    继承

    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("拍照");
            }

            playGame(){
                console.log("玩游戏");
            }

            call(){
                console.log('我可以进行视频通话');
            }
        }

        const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
        // console.log(xiaomi);
        xiaomi.call();
        xiaomi.photo();
        xiaomi.playGame();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    模块化

    模块功能主要由两个命令构成：export 和 import。

    • export 命令用于规定模块的对外接口 （暴露功能）
    • import 命令用于输入其他模块提供的功能（引入暴露的功能）

    基本语法：

    首先在html文件中引入js文件,并声明type=“module”

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

    • 1

    引入和暴露模块

    	    //1. 通用的导入方式
        //引入 m1.js 模块内容
         import * as m1 from "./src/js/m1.js";
         //引入 m2.js 模块内容
         import * as m2 from "./src/js/m2.js";
         //引入 m3.js 
         import * as m3 from "./src/js/m3.js";

        //2. 解构赋值形式
         import {school, teach} from "./src/js/m1.js";
         import {school as guigu, findJob} from "./src/js/m2.js";
         import {default as m3} from "./src/js/m3.js"; //针对默认暴露

        //3. 简便形式  针对默认暴露
         import m3 from "./src/js/m3.js";
         console.log(m3);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    //2.暴露的几种方式
//m1.js 分别暴露
export let school = '尚硅谷';

export function teach() {
    console.log("我们可以教给你开发技能");
}

//m2.js 统一暴露
let school = '尚硅谷';

function findJob(){
    console.log("我们可以帮助你找工作!!");
}

export {school, findJob};

//m3.js 默认暴露
export default {
    school: 'ATGUIGU',
    change: function(){
        console.log("我们可以改变你!!");
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    注意：

    1.一般不在html中直接引入模块，而是在入口文件app.js文件中统一引入，然后在html文件中引入app.js文件

    2.模块化不是所有浏览器都支持，一般开发完需要通过工具转为ES5代码再上线，工具例如：babel

    ES7新特性

    includes

    Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值

    指数运算符

    在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同

    示例：

    		// includes   indexOf
        // const mingzhu = ['西游记','红楼梦','三国演义','水浒传'];

        //判断
        // console.log(mingzhu.includes('西游记'));
        // console.log(mingzhu.includes('金瓶梅'));

        // **
        console.log(2 ** 10);// 
        console.log(Math.pow(2, 10));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    ES8新特性

    async函数

    1. async 函数的返回值为 promise 对象
    2. promise 对象的结果由 async 函数执行的返回值决定

    await 表达式

    1. await 必须写在 async 函数中
    2. await 右侧的表达式一般为 promise 对象
    3. await 返回的是 promise 成功的值
    4. await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理

    async和await结合读取文件案例：

    //1. node引入 fs 模块
const fs = require("fs");

//读取『为学』
function readWeiXue() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/为学.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

function readChaYangShi() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/插秧诗.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

function readGuanShu() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/观书有感.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

//声明一个 async 函数
async function main(){
    //获取为学内容
    let weixue = await readWeiXue();
    //获取插秧诗内容
    let chayang = await readChaYangShi();
    // 获取观书有感
    let guanshu = await readGuanShu();

    console.log(weixue.toString());
    console.log(chayang.toString());
    console.log(guanshu.toString());
}

main();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    对象方法扩展

    1. Object.values()方法返回一个给定对象的所有可枚举属性值的数组
    2. Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组
    		//声明对象
        const school = {
            name:"尚硅谷",
            cities:['北京','上海','深圳'],
            xueke: ['前端','Java','大数据','运维']
        };

        //获取对象所有的键
        // console.log(Object.keys(school));
        //获取对象所有的值
        // console.log(Object.values(school));
        //entries:将对象键值转为数组键值，类似map
        // console.log(Object.entries(school));
        //创建 Map
        // const m = new Map(Object.entries(school));
        // console.log(m.get('cities'));

        //对象属性的描述对象
        // console.log(Object.getOwnPropertyDescriptors(school));

        // const obj = Object.create(null, {
        //     name: {
        //         //设置值
        //         value: '尚硅谷',
        //         //属性特性
        //         writable: true,
        //         configurable: true,
        //         enumerable: true
        //     } 
        // });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    ES9新特性

    Rest/Spread 属性

    Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组， 在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符

    //rest 参数,将...后面的参数放到另一个对象中
        function connect({host, port, ...user}){
            console.log(host);
            console.log(port);
            console.log(user);
        }

        connect({
            host: '127.0.0.1',
            port: 3306,
            username: 'root',
            password: 'root',
            type: 'master'
        });


        //对象合并
        const skillOne = {
            q: '天音波'
        }

        const skillTwo = {
            w: '金钟罩'
        }

        const skillThree = {
            e: '天雷破'
        }
        const skillFour = {
            r: '猛龙摆尾'
        }

        const mangseng = {...skillOne, ...skillTwo, ...skillThree, ...skillFour};

        console.log(mangseng)

        // ...skillOne   =>  q: '天音波', w: '金钟罩'


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    正则表达式命名捕获组

    ES9 允许命名捕获组使用符号(?),这样获取捕获结果可读性更强

    //声明一个字符串
        // let str = '尚硅谷';

        // //提取 url 与 『标签文本』
        // const reg = /(.*)<\/a>/;

        // //执行
        // const result = reg.exec(str);

        // console.log(result);
        // console.log(result[1]); //获取到url
        // console.log(result[2]); //获取到text

        
        let str = '尚硅谷';
        //分组命名
        const reg = /(?.*)<\/a>/;

        const result = reg.exec(str);

        console.log(result.groups.url);

        console.log(result.groups.text);

    正则表达式反向断言

    	//声明字符串
        let str = 'JS5211314你知道么555啦啦啦';
        //正向断言
        const reg = /\d+(?=啦)/; //获取'啦'前面的数字
        const result = reg.exec(str);

        //反向断言
        const reg = /(?<=么)\d+/; //获取'么'后面的数字
        const result = reg.exec(str);
        console.log(result);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    正则表达式 dotAll 模式

    正则表达式中点.匹配除回车外的任何单字符，标记『s』改变这种行为，允许行 终止符出现

    //dot  .  元字符  除换行符以外的任意单个字符
        let str = `
        `;
        //声明正则
        // const reg = /
  • \s+(.*?)<\/a>\s+
    (.*?)<\/p>/;
        const reg = /
  • .*?(.*?)<\/a>.*?
    (.*?)<\/p>/gs;
        //执行匹配
        // const result = reg.exec(str);
        let result;
        let data = [];
        while(result = reg.exec(str)){
            data.push({title: result[1], time: result[2]});
        }
        //输出结果
        console.log(data);

    • ES10新特性

    Object.fromEntries

    用entries创建对象

    	//二维数组
        // const result = Object.fromEntries([
        //     ['name','尚硅谷'],
        //     ['xueke', 'Java,大数据,前端,云计算']
        // ]);

        //Map
        // const m = new Map();
        // m.set('name','ATGUIGU');
        // const result = Object.fromEntries(m);

        //Object.entries ES8
        const arr = Object.entries({
            name: "尚硅谷"
        })
        console.log(arr);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    trimStart 和 trimEnd

    与trim类似，分别是用于清除左右空格

    // trim
        let str = '   iloveyou   ';

        console.log(str);
        console.log(str.trimStart());
        console.log(str.trimEnd());

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    Array.prototype.flat 与 flatMap

            //将多维数组转化为低位数组
        // const arr = [1,2,3,4,[5,6]];
        // 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]); //每个元素*10
        console.log(result);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    Symbol.prototype.description

    获取Symbol描述

    	//创建 Symbol
        let s = Symbol('尚硅谷');

        console.log(s.description);

    • 1
    • 2
    • 3
    • 4

    ES11新特性

    私有属性

    		//公有属性
            name;
            //私有属性
            #age;
            #weight;
            //构造方法
            constructor(name, age, weight){
                this.name = name;
                this.#age = age;
                this.#weight = weight;
            }

            intro(){
                console.log(this.name);
                console.log(this.#age);
                console.log(this.#weight);
            }
        }

        //实例化
        const girl = new Person('晓红', 18, '45kg');

        // console.log(girl.name);
        // console.log(girl.#age); //打印报错
        // console.log(girl.#weight);//打印报错

        girl.intro();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    Promise.allSettled

    		//声明两个promise对象
        const p1 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('商品数据 - 1');
            },1000)
        });

        const p2 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('商品数据 - 2');
                // reject('出错啦!');
            },1000)
        });

        //调用 allsettled 方法
        // const result = Promise.allSettled([p1, p2]);//不管如何，返回结果都是成功的promise
        
        // const res = Promise.all([p1, p2]); //两个promise都成功才会返回成功

        console.log(res);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    String.prototype.matchAll

    用于正则批量匹配

    //声明正则
        const reg = /
  • .*?(.*?)<\/a>.*?
    (.*?)<\/p>/sg

        //调用方法
        const result = str.matchAll(reg);

        // for(let v of result){
        //     console.log(v);
        // }

        const arr = [...result];

        console.log(arr);

    • 可选链操作符

    如果操作对象属性的层级比较深，可以用来简化访问

    		// ?. //属性不存在也不会报错
        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'
            }
        })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    动态import

    可以实现模块化按需加载

    // import * as m1 from "./hello.js"; //静态引入
//获取元素
const btn = document.getElementById('btn');

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    BigInt大整形

    		//大整形
        // let n = 521n;
        // console.log(n, typeof(n));

        //函数
        // let n = 123;
        // console.log(BigInt(n));
        // console.log(BigInt(1.2));

        //大数值运算
        let max = Number.MAX_SAFE_INTEGER;
        console.log(max);
        console.log(max + 1);
        console.log(max + 2);//计算出问题

        console.log(BigInt(max))
        console.log(BigInt(max) + BigInt(1))
        console.log(BigInt(max) + BigInt(2))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    glabalThis

    操作全局对象

    console.log(globalThis);

    • 1
  • 相关阅读:
    华为云云服务器评测 宝塔+nginx 同时部署Springboot、Vue项目
    9个li+CSS实现七夕表白爱心动画&&1个h1+CSS实现跑马灯动画表白文字
    Clickhouse—聚合函数组合
    LeetCode 55. 跳跃游戏
    行列式、逆矩阵、列空间和零空间（3Blue1Brown学习笔记）
    快速修改ppt | 显得不单调
    Java已死，大模型才是未来？
    BCS 2022大湾区网络安全峰会 | 美创CTO分享数据安全风险治理实践
    2022年中职组“网络安全”赛项湖南省任务书
    使用postman测试
  • 原文地址：https://blog.csdn.net/C_jian/article/details/128075127