ES11扩展

私有属性

声明方式:# 属性名

  • 私有属性无法是直接通过实例.属性访问到,我们一般通过方法调用进行访问
        class Person{
    
    
            // 共有属性:直接写
            name;
            // 私有属性
            #age;
            #weight;
            // 构造方法
            constructor(name,age,weigth){
    
    
                this.name = name;
                this.#age =age;
                this.#weight=weigth
            }
            getWeigth(){
    
    
                return this.#weight
            }
            getAge(){
    
    
                return this.#age
            }
        }
        // 实例化
        const girl = new Person('小红',18,'45kg')
        console.log(girl)
        console.log(girl.name)
        console.log(girl.age)
        console.log(girl.weight)
        console.log(girl.getAge())
        console.log(girl.getWeigth())

输出:
在这里插入图片描述

Promise.allSettled

Promise.allSettled()接收一个Promise数组,返回结果也是一个Promise对象。
但是返回的Promise状态一直是成功的,返回的Promise值是接收的所有的Promised的状态和结果。
eg:

        const p1 = new Promise((reslove,reject)=>{
    
    
            setTimeout(()=>{
    
    
                reslove('商品数据1')
            },1000)
        })
        const p2 = new Promise((reslove,reject)=>{
    
    
            setTimeout(()=>{
    
    
               reject('出错了')
            },1000)
        })

        const result = Promise.allSettled([p1,p2])
        console.log(result)

在这里插入图片描述

Promise.all

Promise.all()也是接收一个Promise数组,返回结果也是一个Promise对象。
但是当接收的所有的Promised的状态和结果都为成功时Promise.all()返回的Promise状态才为成功。
否则为失败,并且值之是失败的promise传回来的值。

        const p1 = new Promise((reslove,reject)=>{
    
    
            setTimeout(()=>{
    
    
                reslove('商品数据1')
            },1000)
        })
        const p2 = new Promise((reslove,reject)=>{
    
    
            setTimeout(()=>{
    
    
               reject('出错了')
            },1000)
        })

        const result = Promise.all([p1,p2])
        console.log(result)

在这里插入图片描述

        const p1 = new Promise((reslove,reject)=>{
    
    
            setTimeout(()=>{
    
    
                reslove('商品数据1')
            },1000)
        })
        const p2 = new Promise((reslove,reject)=>{
    
    
            setTimeout(()=>{
    
    
                reslove('商品数据2')
            },1000)
        })

        const result = Promise.all([p1,p2])
        console.log(result)

在这里插入图片描述

字符串扩展

String.prototype.matchAll()用来处理正则批量匹配数据的结果。
eg:

        let str=`
        <ul>
            <li>
                <a>肖生克的救赎</a>
                <p>上映时间:1994-09-10</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)
        }
        const arr = [...result]
        console.log(arr)

在这里插入图片描述

可选链操作符?.

?.用来判断钱一个对象是否存在,若存在再读取它的属性,不存在就不读取,且不会报错。
eg:

        function main (config){
    
    
            // 必须确保传值了
            // 不使用可选连传值 
           const dbHost = config&&config.db&&config.db.host
           console.log(dbHost)  
        //    使用可选链操作符?.
            const dbHost2 = config?.db?.host
            console.log(dbHost2)  
            }
        main({
    
    
            db:{
    
    
                host:'192.168.1.100',
                username:'root'
            },
            cache:{
    
    
                host:'192.168.1.200',
                username:'admin'
            }
        })

输出:
在这里插入图片描述

动态import

动态import,实现按需加载。
动态import是一个函数,有一个url参数,返回值是一个Promise对象,Promise对象的值是url对应的文件中暴露出来的属性。
调用格式:

import'调用的文件路径'.then(()=>{
    
    
实现内容
})

静态import,不管用不用先进来再说:
eg:

// 静态引入
import * as m1 from "./hello.js"

eg:
hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button id='btn'>点击</button>
    <script type='text/javascript' src='./app2.js'></script>
    
</body>
</html>

app2.js

// 静态引入
// import * as m1 from "./hello.js"

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

hello.js

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

输出:
在这里插入图片描述

BigInt大整型

ES11引入新的数据类型BigInt大整型,用来更大的整数计算。

  • 定义格式 :let 变量名 = 整数n
    在整数后面加一个n
    eg:
        let n = 521n
        console.log(n,typeof(n))

在这里插入图片描述

  • BigInt()函数
    将普通整形转换成大整形。
    eg:
        let m =123
        console.log(BigInt(m))

在这里插入图片描述

  • 应用:大整数运算
    BigInt类型的数据不能直接和普通整形做运算。
        let max = Number.MAX_SAFE_INTEGER
        console.log(max)
        console.log(max+1)
        // 加到1就不能再加了
        console.log(max+2)

        console.log(BigInt(max))
        console.log(BigInt(max)+BigInt(1))
        // 加到1还能再加了
        console.log(BigInt(max)+BigInt(2))
       console.log(BigInt(max)+BigInt(3))

在这里插入图片描述

绝对全局对象

globalThis:全局的this,始终指向全局对象

浏览器:

<script>
       console.log(globalThis)     
 </script>

输出:
在这里插入图片描述
node.js

console.log(globalThis)

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/mantou_riji/article/details/124808856
今日推荐