ECMAScript 11 新特性

1. String.prototype.matchAll

// matchAll 用于字符串批量匹配正则, 返回一个 可迭代对象
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);

const arr = [...result];
console.log(arr);

2. 类的私有属性

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

const boy = new Person('张三',22,'80kg');
console.log(boy.name);
// Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class
// console.log(boy.#age);
// console.log(boy.#weight);

boy.intro();

3. Promise.allSettled

// Promise.allSettled()不管参数中的promise是fulfilled还是rejected，都会等参数中的实例都返回结果，包装实例才会结束。

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

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('出错啦');
    }, 1000)
});

// 调用 allSettled 方法
const result = Promise.allSettled([p1,p2]);
console.log(result);
/*
Promise {<pending>}
    __proto__: Promise
    [[PromiseState]]: "fulfilled"
    [[PromiseResult]]: Array(2)
    0: {status: "fulfilled", value: "商品数据 -1"}
    1: {status: "rejected", reason: "出错啦"}
    length: 2
    __proto__: Array(0)
*/

4. 可选链操作符

// 项目中经常会遇到深层次嵌套属性的验证，我们所能做的就是通过&&每层依次验证，这样看起来代码很繁琐，但又不得不这样做。
// 为了简化代码, 使用" ?. "可选链式操作符, 会自动检测 ? 前面的对象是否存;  存在 则调用 , 不存在 则为 undefined
function main(config){
	// const dbHost = config && config.db && config.db.host;
	const dbHost = config?.db?.host;
	console.log(dbHost); // 192.168.1.100
}

main({
	db:{
		host:'192.168.1.100',
		user:'root'
	},
	cache:{
		host:'192.168.1.200',
		user:'admin'
	}
});

5. 动态 import 导入

// 动态 import ,用于模块懒加载, 用到一个模块的时候再加载, 没用到就不加载
// 使用 improt(路径) 方法, 返回一个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>
    <button id="btn">点击按钮</button>

</body>
<script>
    let btn = document.getElementById('btn');
    btn.onclick = function(){
        import('./34.ES11-动态import.js').then(module=>{
            console.log(module);
            module.hello();
        });
    }
</script>
</html>

// 34.ES11-动态import.js
export function hello() {
    console.log('hello');
}

6. bigInt

用于大数值运算

// 大整型
let n = 123n;
console.log(n, typeof (n)); // 123n "bigint"

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

// 大数值运算
let max = Number.MAX_SAFE_INTEGER;
console.log(max); // 9007199254740991
console.log(max + 1); // 9007199254740992
console.log(max + 2); // 9007199254740992

console.log(BigInt(max)); //9007199254740991n
console.log(BigInt(max) + 1n); // 9007199254740992n
console.log(BigInt(max) + 2n); //9007199254740993n

7. globalThis 对象

// global 是一个变量, 永远指向顶级对象

// 在js中 
   console.log(globalThis); // window

// 在node中
   console.log(globalThis); // global

链接: https://fly63.com/article/detial/10661

ECMAScript 11 新特性

1. String.prototype.matchAll

2. 类的私有属性

3. Promise.allSettled

4. 可选链操作符

5. 动态 import 导入

6. bigInt

7. globalThis 对象

CSS新特性contain，控制页面的重绘与重排

Html5、Css3、ES6的新特性

ES6新特性--var、let、const

Js即将到来的3个新特性

Angular 8的新特性介绍

使用 React 要懂的 Js特性

ES2019 新特性汇总

Js的用途和特性

十个超级实用的 JS 特性

解密HTTP/2与HTTP/3 的新特性