当前位置：首页 > news >正文

07.ES11 08.ES12

news 2025/7/3 19:30:48

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"); //9007199254740991console.log(max + 1); //9007199254740992console.log(max + 2); 9007199254740992  不可以运算正确的结果了console.log(BigInt(max)); //9007199254740991nconsole.log(BigInt(max) + BigInt(1)); //9007199254740992nconsole.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;//undefinedconsole.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);//falsea ||= b; //a=a||b//console.log(a); //truea &&= b; //a=a&&b//console.log(a); //falselet obj = {name: "章三",};//   obj.name ??= "李四";//   console.log(obj.name);obj.age ??= 18;console.log(obj.age);</script>

8.2、数字分隔符

这个新特性是为了方便程序员看代码而出现的，如果数字比较大，那么看起来就不是那么一目了然

分隔符不仅可以分割十进制，也可以分割二进值或者十六进值的数据，非常好用

  <script>let num=123456789let num1=123_456_789console.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>