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"); //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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/62683.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

qt QGraphicsRotation详解

1、概述 QGraphicsRotation 是 Qt 框架中 QGraphicsTransform 的一个子类&#xff0c;它专门用于处理图形项的旋转变换。通过 QGraphicsRotation&#xff0c;你可以对 QGraphicsItem&#xff08;如形状、图片等&#xff09;进行旋转操作&#xff0c;从而创建动态和吸引人的视觉…

Unity Plane API解释

构造函数解释&#xff0c;d的解释为&#xff1a;距离是沿着平面法线从平面到原点的距离。注意&#xff0c;这意味着为正值的distance值将导致平面朝向原点。负的距离值会导致平面朝向远离原点。 试验&#xff1a; GetSide方法检测点是否位于平面的正向侧&#xff0c;结果显示…

通讯专题4.1——CAN通信之计算机网络与现场总线

从通讯专题4开始&#xff0c;来学习CAN总线的内容。 为了更好的学习CAN&#xff0c;先从计算机网络与现场总线开始了解。 1 计算机网络体系的结构 在我们生活当中&#xff0c;有许多的网络&#xff0c;如交通网&#xff08;铁路、公路等&#xff09;、通信网&#xff08;电信、…

深度学习模型:LSTM (Long Short-Term Memory) - 长短时记忆网络详解

一、引言 在深度学习领域&#xff0c;循环神经网络&#xff08;RNN&#xff09;在处理序列数据方面具有独特的优势&#xff0c;例如语音识别、自然语言处理等任务。然而&#xff0c;传统的 RNN 在处理长序列数据时面临着严重的梯度消失问题&#xff0c;这使得网络难以学习到长…

算法笔记:力扣24. 两两交换链表中的节点

思路&#xff1a; 本题最简单的就是通过递归的形式去实现 class Solution {public ListNode swapPairs(ListNode head) {if(head null || head.next null){return head;}ListNode next head.next;head.next swapPairs(next.next);next.next head;return next;} } 对于链…

ehr系统建设方案,人力资源功能模块主要分为哪些,hrm平台实际案例源码,springboot人力资源系统,vue,JAVA语言hr系统(源码)

eHR人力资源管理系统&#xff1a;功能强大的人力资源管理工具 随着企业规模的不断扩大和业务需求的多样化&#xff0c;传统的人力资源管理模式已无法满足现代企业的需求。eHR人力资源管理系统作为一种先进的管理工具&#xff0c;能够为企业提供高效、准确、实时的人力资源管理。…

【Android】从事件分发开始:原理解析如何解决滑动冲突

【Android】从事件分发开始&#xff1a;原理解析如何解决滑动冲突 文章目录 【Android】从事件分发开始&#xff1a;原理解析如何解决滑动冲突Activity层级结构浅析Activity的setContentView源码浅析AppCompatActivity的setContentView源码 触控三分显纷争&#xff0c;滑动冲突…

OGRE 3D----2. QGRE + QQuickView

将 OGRE(面向对象图形渲染引擎)集成到使用 QQuickView 的 Qt Quick 应用程序中,可以在现代灵活的 UI 框架中提供强大的 3D 渲染功能。本文将指导您如何在 QQuickView 环境中设置 OGRE。 前提条件 在开始之前,请确保您已安装以下内容: Qt(版本 5.15 )OGRE(版本14.2.5)…

GAGAvatar: Generalizable and Animatable Gaussian Head Avatar 学习笔记

1 Overall GAGAvatar&#xff08;Generalizable and Animatable Gaussian Avatar&#xff09;&#xff0c;一种面向单张图片驱动的可动画化头部头像重建的方法&#xff0c;解决了现有方法在渲染效率和泛化能力上的局限。 旋转参数 现有方法的局限性&#xff1a; 基于NeRF的方…

论文笔记-WWW2024-ClickPrompt

论文笔记-WWW2024-ClickPrompt: CTR Models are Strong Prompt Generators for Adapting Language Models to CTR Prediction ClickPrompt: CTR模型是大模型适配CTR预测任务的强大提示生成器摘要1.引言2.预备知识2.1传统CTR预测2.2基于PLM的CTR预测 3.方法3.1概述3.2模态转换3.…

预训练模型与ChatGPT:自然语言处理的革新与前景

目录 一、ChatGPT整体背景认知 &#xff08;一&#xff09;ChatGPT引起关注的原因 &#xff08;二&#xff09;与其他公司的竞争情况 二、NLP学习范式的发展 &#xff08;一&#xff09;规则和机器学习时期 &#xff08;二&#xff09;基于神经网络的监督学习时期 &…

GRAG: Graph Retrieval-Augmented Generation

GRAG: Graph Retrieval-Augmented Generation 摘要 简单检索增强生成 (Naive RAG) 聚焦于单一文档的检索&#xff0c;因此在处理网络化文档时表现不足&#xff0c;例如引用图、社交媒体和知识图谱等应用中非常常见的场景。为了解决这一限制&#xff0c;我们提出了图检索增强生…

使用Python OpenCV实现图像形状检测

目录 一、环境准备 二、读取和预处理图像 读取图像 灰度化 滤波去噪 三、边缘检测 四、查找轮廓 五、绘制轮廓 六、形状分类 七、显示结果 八、完整代码示例 九、总结 图像形状检测是计算机视觉领域中的一项关键技术,广泛应用于工业自动化、机器人视觉、医学图像处…

11.25.2024刷华为OD

文章目录 HJ76 尼科彻斯定理&#xff08;观察题&#xff0c;不难&#xff09;HJ77 火车进站&#xff08;DFS&#xff09;HJ91 走格子方法&#xff0c;&#xff08;动态规划&#xff0c;递归&#xff0c;有代表性&#xff09;HJ93 数组分组&#xff08;递归&#xff09;语法知识…

多线程篇-8--线程安全(死锁,常用保障安全的方法,安全容器,原子类,Fork/Join框架等)

1、线程安全和不安全定义 &#xff08;1&#xff09;、线程安全 线程安全是指一个类或方法在被多个线程访问的情况下可以正确得到结果&#xff0c;不会出现数据不一致或其他错误行为。 线程安全的条件 1、原子性&#xff08;Atomicity&#xff09; 多个操作要么全部完成&a…

自动驾驶决策规划算法-路径决策算法:二次规划

本文为学习自动驾驶决策规划算法第二章第四节(中) 路径二次规划算法》的学习笔记。 1 二次型 二次型的形式为 1 2 x T H x f T x \begin{equation} \frac{1}{2}\boldsymbol{x}^TH\boldsymbol{x}f^T\boldsymbol{x} \end{equation} 21​xTHxfTx​​ 约束 A e q x b e q \be…

AI开发-数据可视化库-Seaborn

1 需求 概述 Seaborn 是一个基于 Python 的数据可视化库&#xff0c;它建立在 Matplotlib 之上。其主要目的是使数据可视化更加美观、方便和高效。它提供了高层次的接口和各种美观的默认主题&#xff0c;能够帮助用户快速创建出具有吸引力的统计图表&#xff0c;用于数据分析和…

相交链表和环形链表

&#xff08;一&#xff09;相交链表 相交链表 思路&#xff1a;先分别计算出A列表和B列表的长度&#xff0c;判断它们的尾节点是否相等&#xff0c;如果不相等就不相交&#xff0c;直接返回空。然后让两个列表中的长的列表先走它们的差距步&#xff0c;然后再一起走&#xff…

[Redis#12] 常用类型接口学习 | string | list

目录 0.准备 1.string get | set set_with_timeout_test.cpp set_nx_xx_test.cpp mset_test.cpp mget_test.cpp getrange_setrange_test.cpp incr_decr_test.cpp 2.list lpush_lrange_test.cpp rpush_test.cpp lpop_rpop_test.cpp blpop_test.cpp llen_test.cpp…

A054-基于Spring Boot的青年公寓服务平台的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…