【ES6+】013-ES11新特性：matchAll、类的私有属性、Promise.allSettled、可选链操作符、动态import导入、BigInt、globalThis对象

迈不过友情╰ 2023-10-05 16:16 12阅读 0赞

# **目录** #

一、功能概述

二、String.prototype.matchAll

1、概述

2、代码实现

3、运行结果

三、类的私有属性

1、概述

2、代码实现

3、运行结果

四、Promise.allSettled

1、概述

2、代码实现

3、运行结果

五、可选链操作符

1、概述

2、代码实现

3、运行结果

六、动态import导入

1、概述

2、代码实现

hello.js：

app.js：

动态import加载.html：

3、运行结果

七、BigInt

1、概述

2、代码实现

3、运行结果

八、globalThis 对象

1、概述

2、代码实现

3、运行结果

--------------------

# 一、功能概述 #

**1、String.prototype.matchAll**

*  用来得到正则批量匹配的结果；

**2、类的私有属性**

*  私有属性外部不可访问直接；

**3、Promise.allSettled**

*  获取多个promise执行的结果集；

**4、可选链操作符**

*  简化对象存在的判断逻辑；

**5、动态 import 导入**

*  动态导入模块，什么时候使用什么时候导入；

**6、BigInt**

*  大整型；

**7、globalThis 对象**

*  始终指向全局对象window；

# 二、**String.prototype.matchAll** #

## 1、概述 ##

用来得到正则批量匹配的结果；

## 2、代码实现 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>String.prototype.matchAll</title>
    	</head>
    	<body>
    		<script>
    			// String.prototype.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);
    			// 返回的是可迭代对象，可用扩展运算符展开
    			// console.log(...result);
    			// 使用for...of...遍历
    			for(let v of result){
    				console.log(v);
    			}
    		</script>
    	</body>
    </html>

## 3、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

# 三、类的私有属性 #

## 1、概述 ##

私有属性外部不可访问直接；

## 2、代码实现 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>类的私有属性</title>
    	</head>
    	<body>
    		<script>
    			// 类的私有属性
    			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 girl = new Person("小兰",18,"90kg");
    			console.log(girl);
    			// 公有属性的访问
    			console.log(girl.name);
    			// 私有属性的访问
    			console.log(girl.age); // undefined
    			// 报错Private field '#age' must be declared in an enclosing class
    			// console.log(girl.#age);
    			girl.intro();
    		</script>
    	</body>
    </html>

## 3、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

# 四、Promise.allSettled #

## 1、概述 ##

获取多个promise执行的结果集；

## 2、代码实现 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Promise.allSettled</title>
    	</head>
    	<body>
    		<script>
    			// Promise.allSettled
    			// 获取多个promise执行的结果集
    			// 声明两个promise对象
    			const p1 = new Promise((resolve,reject)=>{
    				setTimeout(()=>{
    					resolve("商品数据——1");
    				},1000);
    			});
    			const p2 = new Promise((resolve,reject)=>{
    				setTimeout(()=>{
    					reject("失败啦");
    				},1000);
    			});
    			// 调用Promise.allSettled方法
    			const result = Promise.allSettled([p1,p2]);
    			console.log(result);
    			const result1 = Promise.all([p1,p2]); // 注意区别
    			console.log(result1);
    		</script>
    	</body>
    </html>

## 3、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

# 五、**可选链操作符** #

## 1、概述 ##

如果存在则往下走，省略对对象是否传入的层层判断；

## 2、代码实现 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>可选链操作符</title>
    	</head>
    	<body>
    		<script>
    			// 可选链操作符
    			// ?.
    			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"
    				}
    			});
    		</script>
    	</body>
    </html>

## 3、运行结果 ##

![20201221230149283.png][]

# 六、动态import导入 #

## 1、概述 ##

动态导入模块，什么时候使用时候导入；

## 2、代码实现 ##

### hello.js： ###

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

### app.js： ###

// import * as m1 from "./hello.js"; // 传统静态导入
    //获取元素
    const btn = document.getElementById('btn');
    
    btn.onclick = function(){
        import('./hello.js').then(module => {
            module.hello();
        });
    }

### 动态import加载.html： ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动态 import </title>
    </head>
    <body>
        <button id="btn">点击</button>
        <script src="app.js" type="module"></script>
    </body>
    </html>

## 3、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

# 七、BigInt #

## 1、概述 ##

更大的整数；

## 2、代码实现 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>BigInt</title>
    	</head>
    	<body>
    		<script>
    			// BigInt
    			// 大整型
    			let n = 100n;
    			console.log(n,typeof(n));
    			
    			// 函数：普通整型转大整型
    			let m = 123;
    			console.log(BigInt(m));
    			
    			// 用于更大数值的运算
    			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)); 
    		</script>
    	</body>
    </html>

## 3、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

# 八、globalThis 对象 #

## 1、概述 ##

始终指向全局对象window；

## 2、代码实现 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>globalThis 对象</title>
    	</head>
    	<body>
    		<script>
    			// globalThis 对象 : 始终指向全局对象window
    			console.log(globalThis);
    		</script>
    	</body>
    </html>

## 3、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201221225930661.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201221225858507.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201221230038688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[20201221230149283.png]: https://img-blog.csdnimg.cn/20201221230149283.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201221230421207.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020122123051754.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201221230605868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70