第 7 章 ECMASript 11 新特性

7.1 类的私有属性

私有属性在类的外部不可访问
可以通过类的内部方法访问私有属性

javascript 复制代码

class Person {
    // 公有属性
    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);
    }
}

// 实例化
let person = new Person("张三", 18, 60);

//私有属性在类的外部不可访问
// console.log(person.name);
// console.log(person.#age);
// console.log(person.#weight);

// 通过类内方法访问私有属性
person.intro();

7.2 Promise.allSettled

接受Promise的一个数组，返回的结果也是一个Promise对象
返回的结果永远是一个成功的状态，成功的值是里面每一个Promise里面他们的状态和结果

7.2.1 allSettled

如果每一个异步任务都想要知道结果，就可以使用 allSettled 方法
它会返回一个 Promise 对象，这个 Promise 对象会在所有异步任务都完成后返回一个结果数组
每个结果对象都包含了任务的状态和结果

7.2.2 all

返回的结果是根据里面每一个Promise的状态来决定的
只要有一个失败了，就会返回失败的结果，都成功才会返回成功的结果
如果要求异步任务都成功，就可以使用 all 方法
它会返回一个 Promise 对象，这个 Promise 对象会在所有异步任务都完成后返回一个结果数组
每个结果对象都包含了任务的状态和结果

7.2.3 案例

javascript 复制代码

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

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("商品数据 - 2");
  }, 2000);
});

// 调用 allSettled 方法
const result = Promise.allSettled([p1, p2]);

console.log(result);

// 调用all方法
const res = Promise.all([p1, p2]);

console.log(res);

7.3 String.prototype.matchAll

用来得到正则批量匹配结果的一个方法

javascript 复制代码

let str = `
<ul>
  <li>
    <a>肖申克的救赎</a>
    <p>上映日期：1994-09-10</p>
  </li>
</ul>
<ul>
  <li>
    <a>阿甘正传</a>
    <p>上映日期：1994-07-06</p>
  </li>
</ul>`;

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

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

// 用let of 遍历结果
for (let v of result) {
  console.log(v);
}

// 用扩展运算符展开结果
const arr = [...result];
console.log(arr);

7.4 可选链操作符

.?
当我们应对对象类型的参数的时候，对象的层级比较深，用这个可以不用做层级判断
判断前面的值是否传入，如果传入了就读取后边的属性
免去了进行层层判断的一个烦恼，即使没有传参也不会报错，因为他会先进行判断

javascript 复制代码

// ?.
function main(config) {
    // 一般写法：为了获取db下的host需要做层层判断，而且如果没有传入参数会报错
    // const dbHost = config && config.db && config.db.host;

    // 可选链写法：如果没有传入参数会返回undefined
    const dbHost = config?.db?.host;
    console.log(dbHost);
}

main({
    db: {
        host: 'IP_ADDRESS',
        username:'root'
    },
    cache: {
        host: '111',
        username:'admin'
    }
})

7.5 动态 import 导入

可以按需加载，即懒加载，用到的时候再加载，不用的时候不加载

功能函数 hello.js

javascript 复制代码

// 暴露该函数
export function hello() {
    alert('Hello');
}

入口文件 app.js 并且进行动态导入。import函数的返回结果是一个Promise对象，这个Promise对象成功的值就是这个模块里面暴露出来的那个对象即hello.js

javascript 复制代码

// 获取元素
const btn = document.getElementById('btn');

btn.onclick = function() {
    import('./hello.js').then(module => {
        // 调用暴露的函数
        module.hello();
    });
}

html文件调用入口文件app.js

javascript 复制代码

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

7.6 BigInt类型

主要用来进行更大的数值运算
在数字后面加一个n，表示大整型数字
BigInt(n)将数字转换成大整型的一个函数

javascript 复制代码

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

// 函数
let n1 = 123;
console.log(BigInt(n1));  // 123n
console.log(BigInt(1.2));  // 报错，不能用小数

// 大数值运算
let max = Number.MAX_SAFE_INTEGER;
console.log(max);
console.log(max + 1);  // 报错，超出了最大安全整数
console.log(max + 2);  // 报错，超出了最大安全整数

// 解决办法
// 将最大安全整数转换为大整型

let max1 = BigInt(Number.MAX_SAFE_INTEGER);
console.log(max1);
console.log(max1 + 1n);  // 1234567891011121314151617181920n
console.log(max1 + 2n);  // 1234567891011121314151617181922n

7.7 globalThis 绝对全局对象

始终是指向全局对象的
如果想对全局对象做一个操作，这个时候可以忽略环境直接使用globalThis就可以了

console.log(globalThis);