jses6新特性和方法，JS:ES11新特性-基礎知識庫-匯編語言學習筆記

jses6新特性和方法，JS:ES11新特性

2023-10-15 阅读 33 评论 0

摘要：概述： 1、String.prototype.matchAll：用來得到正則批量匹配的結果； 2、類的私有屬性：私有屬性外部不可訪問直接； 3、Promise.allSettled：獲取多個promise執行的結果集； 4、可選鏈操作符：簡化對象存在的判斷邏輯

概述：

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>

jses6新特性和方法，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();
});
}

es6js 新特性、動態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>

原文链接：https://hbdhgg.com/5/139927.html

发表评论: