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;从而创建动态和吸引人的视觉…

【概率论】分布函数的定义与应用:从直观到数学形式

目录 1. 分布函数的直观引入1.1 从一个例子出发 1.2 累积分布与分布函数2. 分布函数的定义2.1 数学定义2.2 分布函数的图像 3. 分布函数的性质4. 离散型与连续型分布函数4.1 离散型分布函数4.2 连续型分布函数 5. 应用与计算5.1 由分布函数计算概率5.2 分布函数求导 6. 总结与展…

Unity Plane API解释

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

文本内容处理命令和正则表达式

文本内容处理命令 grep 用来过滤文本内容&#xff0c;以匹配要查询的结果。 -m 数字 匹配几次后停止&#xff1a; grep -m 1 /root/etc/passwd #查找包含root的行 -v 取反 -i 忽略字符的大小写&#xff0c;默认的&#xff0c;可以不加 -n 显示匹配的行号 -c 统计匹配的…

大数据治理:解锁数据价值,引领未来创新

目录 引言 一、大数据治理的定义 二、大数据治理的重要性 三、大数据治理的核心组件 四、大数据治理的实践案例 1. 数据标准化 2. 数据质量管理 案例一&#xff1a;医疗行业的大数据治理——智能医疗助手守护健康 引言 在数字化时代&#xff0c;数据已成为企业最宝贵的…

如何在 Ubuntu 18.04 上设置 Apache 虚拟主机

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 Apache Web 服务器是一种流行的在互联网上提供网站服务的方法。截至2019年&#xff0c;据估计&#xff0c;它为所有活跃网站的29%…

【Leetcode Top 100】142. 环形链表 II

问题背景 给定一个链表的头节点 h e a d head head&#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 n u l l null null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 n e x t next next 指针再次到达&#xff0c;则链表中存在环。 为了…

「网络安全入门」什么是网络安全

如今&#xff0c;组织的信息系统和数据面临着许多威胁。而人们了解网络安全的所有基本要素是应对这些威胁的第一步。 网络安全是确保信息完整性、机密性和可用性(ICA)的做法。它代表了应对硬盘故障、断电事故&#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.…

基于若依框架和Vue2 + Element-UI 实现图片上传组件的重写与优化

背景 在使用 若依分离版Element-UI 的图片上传组件时,需要根据业务需求进行定制化处理,比如: 需要传递额外的业务参数到后端需要对上传路径进行修改需要对上传组件进行样式定制 实现步骤 1. 创建本地组件 首先在业务模块下创建本地的图片上传组件: src/views/xxx/compone…

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

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

同时在github和gitee配置密钥

同时在github和gitee配置密钥 1. 生成不同的 SSH 密钥 为每个平台生成单独的 SSH 密钥。 # 为 GitHub 生成密钥&#xff08;默认文件路径为 ~/.ssh/github_id_rsa&#xff09; ssh-keygen -t rsa -b 4096 -C "your_github_emailexample.com" -f ~/.ssh/github_id_…

GRAG: Graph Retrieval-Augmented Generation

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