chuck
/
es6-11study


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!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>
    <script src="./src/index.js" type="module"></script>
</head>
<body>
    <button id="btn"> hello </button>
    <script>
        /**
         * 1、es11私有属性
         */
        class Person{
            name
            #age   //私有
            #weight
            constructor(name,age,weight){
                this.name = name
                this.#age = age
                this.#weight = weight
            }
            intro(){
                console.log(this.#age)
            }
        }
        const girl = new Person('lily',18,'45kg')
        console.log(girl)
        //console.log(girl.#age)  //私有 无法访问
        girl.intro() //18
        /**
         * 2、Promise.allSettled
         */
        const p1 = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('goods1')
            },1000)
        })
        const p2 = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('goods2')
            },1000)
        })
        const result1 = Promise.allSettled([p1,p2])  //无论reject与否，都会返回结果及状态
        console.log(result1)
        // Promise.all()
        const result2 = Promise.all([p1,p2])  //当有一个reject时，则终断程序，全部成功时只返回结果
        console.log(result2)
        /**
         * 3、String.prototype.matchAll   正则批量匹配
         */
         let str = `
        <ul>
            <li>
                <a>123</a>
                <p>1</p>
            </li>
            <li>
                <a>5345</a>
                <p>2</p>
            </li>
        </ul>`
        const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
        const result4 = str.matchAll(reg)
        console.log(result4) //可迭代对象
        for(let v of result4){
            console.log(v)
        }
        let r4 = [...result4]
        console.log(r4)
        /**
         * 4、可选链操作符 ?. 
         */
        function main(config){
            const dbHost = config?.db?.host  //免去层层判断
            //等价于cosnt dbHost = config && config.db && config.db.host
        }
        main({
            db:{
                host:'23443243243',
                usernmae:'root'
            },
            catch:{
                host:'34343',
                username:'admin'
            }
        })
        /**
         * 5、动态import
         */
        //示例：./src/index.js
        /**
         * 6、BigInt类型 
         * 应用于大数值运算
         */
        let n = 521n
        console.log(n,typeof(n))
        console.log(BigInt(123))  //123n  不支持浮点

        let max = Number.MAX_SAFE_INTEGER  //最大安全整数
        console.log(max+2)  //无法再加
        console.log(BigInt(max)+BigInt(2))
        /**
         * 7、globalThis  全局 浏览器 node
         */
        console.log(globalThis)  //widnow  global

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