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://www.uj5u.com/qiye/298030.html
標籤：其他
上一篇：Git 使用規范