JS:ES11新特性

最新推荐文章于 2024-04-11 17:23:08 发布

小白目

最新推荐文章于 2024-04-11 17:23:08 发布

阅读量566

点赞数 1

分类专栏： ES6 -- 11 文章标签： javascript 前端 es6 ecmascript 原型模式

本文链接：https://blog.csdn.net/qq_37974755/article/details/122217498

版权

ES6 -- 11 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

概述：

1、String.prototype.matchAll：用来得到正则批量匹配的结果；
2、类的私有属性：私有属性外部不可访问直接；
3、Promise.allSettled：获取多个promise执行的结果集；
4、可选链操作符：简化对象存在的判断逻辑；
5、动态 import 导入：动态导入模块，什么时候使用什么时候导入；
6、BigInt：大整型；
7、globalThis 对象：始终指向全局对象window；

String.prototype.matchAll代码示例：

<!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>

类的私有属性代码示例：

<!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,"40kg");
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>

Promise.allSettled代码示例：

<!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("大数据");
},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>

可选链操作符代码示例：

<!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);   //192.168.1.100
} 
main({
db:{
host:"192.168.1.100",
username:"root"
},
cache:{
host:"192.168.1.200",
username:"admin"
}
});
</script>
</body>
</html>

动态 import 导入代码示例：

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>

BigInt代码示例：

<!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>

globalThis 对象代码示例：

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

小白目

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS:ES11新特性

概述：1、String.prototype.matchAll：用来得到正则批量匹配的结果；2、类的私有属性：私有属性外部不可访问直接；3、Promise.allSettled：获取多个promise执行的结果集；4、可选链操作符：简化对象存在的判断逻辑；5、动态 import 导入：动态导入模块，什么时候使用什么时候导入；6、BigInt：大整型；7、globalThis 对象：始终指向全局对象window；String.prototype.matchAll代码示例：<!.
复制链接

扫一扫