07.ES11 08.ES12
7.1、Promise.allSettled
调用 allsettled 方法，返回的结果始终是成功的，返回的是promise结果值
<script>
//声明两个promise对象
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("商品数据 - 1");
}, 1000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
// resolve("商品数据 - 2");
reject('出错啦!');
}, 1000);
});
//调用 allsettled 方法，返回的结果始终是成功的，返回的是promise结果值
const res = Promise.allSettled([p1, p2]);
console.log(res,'res');
//调用all方法，返回的结果要根据Promise状态来决定，必须要全部成功，才能成功
const res1 = Promise.all([p1, p2]);
console.log(res1,'res1');
</script>
7.2、动态 import 导入
标准用法的 import 导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度）。有些场景中，你可能希望根据条件导入模块或者按需导入模块，这时你可以使用动态导入代替静态导入。
即：动态导入是我需要的时候，再导入进来，然后调用，不需要的时候，我不导入
html文件
<body>
<button id="btn">登录</button>
<script>
// 用户输入用户名,密码
function login() {
return "普通用户";
}
let btn = document.querySelector("#btn");
btn.onclick = function () {
// 拿到用户名密码
let role = login();
// 将拿到的用户密码放到处理函数里
render(role); //处理函数
};
async function render(role) {
if (role == "管理员") {
// 第一种写法
// let res1 = import("./js/1.js"); //返回一个Promise对象
// res1.then((res) => {
// console.log(res);
// });
// 第二种写法
let res1 = await import("./js/1.js");
console.log(res1);
} else {
// let res2 = import("./js/2.js"); //返回一个Promise对象
// res2.then((res) => {
// console.log(res);
// });
// 第二种写法
let res2 = await import("./js/2.js");
console.log(res2);
}
}
</script>
</body>1.js 需要动态导入的js逻辑文件
console.log('hello.js');
export default{
name:'管理员'
}}2.js 需要动态导入的js逻辑文件
console.log("2.js");
export default {
name: "普通用户",
};7.3、BigInt
7.3.1、概念
BigInt数据类型提供了一种方法来表示大于2^53-1的整数。BigInt可以表示任意大的整数
适用场景：更加准确的使用时间戳和数值比较大的ID
7.3.2、BigInt()构造函数
- 传递给BigInt()的参数将自动转换为BigInt
- 无法转换的数据类型和值会引发异常
- 除了不能使用一元加号运算符外，其他的运算符都可以使用
- BigInt和Number之间不能进行混合操作
<script>
//大整形（用来做更大的数值运算）
//语法：数字+n
// let n = 521n;
// console.log(n, typeof(n));//521n 'bigint'
//（1）传递给BigInt()的参数将自动转换为BigInt
// let n = 123;
// console.log(BigInt(n));//123n
//（2）无法转换的数据类型和值会引发异常
// console.log(BigInt(1.2));// 不能有浮点数子，会报错
//BigInt(null); //报错
//BigInt("a"); // 报错
//（3）BigInt除了不能使用一元加号运算符外，其他的运算符都可以使用
// console.log(BigInt(+1n));//报错
let max = Number.MAX_SAFE_INTEGER; //最大安全整数
console.log(max, "max"); //9007199254740991
console.log(max + 1); //9007199254740992
console.log(max + 2); 9007199254740992 不可以运算正确的结果了
console.log(BigInt(max)); //9007199254740991n
console.log(BigInt(max) + BigInt(1)); //9007199254740992n
console.log(BigInt(max) + BigInt(2)); //9007199254740993n
// （4）BigInt和Number之间不能进行混合操作
console.log(1n + 5); //报错
</script>7.4、globalThis 对象
globalThis 提供了一个标准的方式来获取不同环境下的全局 this 对象（也就是全局对象自身）。不像 window 或者 self这些属性，它确保可以在有无窗口的各种环境下正常工作。所以，你可以安心的使用 globalThis，不必担心它的运行环境。为便于记忆，你只需要记住，全局作用域中的 this 就是 globalThis。
<script>
console.log(globalThis);//Window
</script>7.5、String.matchAll
matchAll() 方法返回一个包含所有匹配正则表达式的结果的迭代器。可以使用 for...of 遍历，或者使用 展开运算符(...) 或者 Array.from 转换为数组.
<script>
// 需求，提取li中的内容
let str = `<ul>
<li>1111</li>
<li>2222</li>
</ul>`;
//声明正则
const reg = /<li>(.*)<\/li>/g;
//调用方法
const result = str.matchAll(reg);
console.log(result, "result");//result里有next()方法，可遍历
for (let v of result) {
//返回一个数组，[0]符合条件的每一项，[1]每一项里面的值
// console.log(v, "v");
}
</script>7.6、可选链操作符
语法：?.
判断前面的值有没有传入，如果传了继续读取后面的属性，如果没有传，那就返回undefined，也不会报错 ，免去了做层层判断
<script>
function main(obj) {
const person = obj?.one?.name;
// const person = obj?.one?.name?.age;//undefined
console.log(person);//张三
}
main({
one: {
name: "张三",
sex: "男",
},
two: {
name: "李四",
sex: "男",
},
});
</script>7.7、空值合并运算符
空值合并运算符（??）是一个逻辑运算符。
当左侧操作数为 null 或 undefined 时，其返回右侧的操作数。否则返回左侧的操作数。
<script>
let obj = {
name: "张三",
age: 18,
};
// ||或运算符 像亲情，找true &&与运算符 像爱情，找false
// console.log(obj.age || "年龄不详"); //18
// console.log(obj.age && "年龄不详"); //'年龄不详'
// ??
// console.log(obj.age ?? "19"); // 18
// console.log(obj.age1 ?? "19"); //19
// || 或运算符无法区分false、0、空字符串和null/undefined
// ??无法识别null/undefined
// console.log(false ||'你好');//你好
// console.log(false ??'你好');//false
// console.log(''||'hello');//hello
// console.log(''??'hello');//返回空
// console.log(0 || "你好"); //你好
// console.log(0 ?? "hello"); //0
// console.log(null || "你好1"); //你好
// console.log(null ?? "hello1"); //hello
// console.log(undefined || "你好2"); //你好
// console.log(undefined ?? "hello2"); //hello
</script>??和 || 的区别是什么呢?
他们两个最大的区别就是 ' '和 0，??的左侧 为 ' '或者为 0 的时候，依然会返回左侧的值；
|| 会对左侧的数据进行boolean类型转换，所以’ '和 0 会被转换成false,返回右侧的值
8.1、逻辑赋值操作符
逻辑赋值操作符 ??=、&&=、 ||=
<script>
let a = true;
let b = false;
//console.log(a || b);//true
//console.log(a && b);//false
a ||= b; //a=a||b
//console.log(a); //true
a &&= b; //a=a&&b
//console.log(a); //false
let obj = {
name: "章三",
};
// obj.name ??= "李四";
// console.log(obj.name);
obj.age ??= 18;
console.log(obj.age);
</script>8.2、数字分隔符
这个新特性是为了方便程序员看代码而出现的，如果数字比较大，那么看起来就不是那么一目了然
分隔符不仅可以分割十进制，也可以分割二进值或者十六进值的数据，非常好用
<script>
let num=123456789
let num1=123_456_789
console.log(num===num1);//true
</script>8.3、 replaceAll
所有匹配都会被替代项替换。模式可以是字符串或正则表达式，而替换项可以是字符串或针对每次匹配执行的函数。并返回一个全新的字符串
<script>
let str = "Lorem,Lorem ipsum dolor sit Lorem.";
let newStr = str.replaceAll("Lorem",'*');
console.log(newStr);//*,* ipsum dolor sit *.
</script>8.4、Promise.any
只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。
<script>
let ajax1 = function () {
return new Promise((resolve, reject) => {
reject("失败1");
});
};
let ajax2 = function () {
return new Promise((resolve, reject) => {
reject("失败2");
});
};
let ajax3 = function () {
return new Promise((resolve, reject) => {
reject("失败3");
// resolve('成功')
});
};
Promise.any([ajax1(), ajax2(), ajax3()])
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log("err", err);
});
</script>