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 學習更多技能請點選下方公衆号
