【前端】ES13:ES13新特性

文章目录

  • 1 类新增特性
    • 1.1 私有属性和方法
    • 1.2 静态成员的私有属性和方法
    • 1.3 静态代码块
    • 1.4 使用in来判断某个对象是否拥有某个私有属性
  • 2 支持在最外层写await
  • 3 at函数来索引元素
  • 4 正则匹配的开始和结束索引
  • 5 findLast() 和 findLastIndex() 函数
  • 6 Error对象的Cause属性

1 类新增特性

1.1 私有属性和方法

class Cache{#obj = {}get(key){return this.#obj[key]}set(key, value){this.#obj[key] = value}
}let cache = new Cache()
cache.set("name", "kerwin")
class Person{//不需要外部传参进来的,一开始就初始化的,可以在类的最外层作用域声明这个成员state = { // es13可以直接提出来写a: 1,b: 2}// a = 1;// b = 2;constructor(name, age){this.name = namethis.age = age//	this.state = { // 不需要传参//                 	a: 1,//                	b: 2//             	}}
}

1.2 静态成员的私有属性和方法

我们还可以给类定义静态成员和静态私有函数。类的静态方法可以使用this关键字访问其他的私有或者公有静态成员。

class Cache{static #count = 0; // Cache.#count访问不到,报错static getCount(){return this.#count // Cache.#getCount访问不到,报错}#obj = {}get(key){return this.#obj[key]}set(key, value){this.#obj[key] = value}
}let cache = new Cache()
cache.set("name", "kerwin")console.log(Cache.getCount())

1.3 静态代码块

ES13允许在类中通过static关键字定义一系列静态代码块,这些代码块只会在类被创造的时候执行一次。这其实有点像一些其他的如C#和Java等面向对象的编程语言的静态构造函数的用法。

一个类可以定义任意多的静态代码块,这些代码块会和穿插在它们之间的静态成员变量一起按照定义的顺序在类初始化的时候执行一次。我们还可以使用super关键字来访问父类的属性。

 class Cache{static obj = new Map()static {this.obj.set("name","kerwin")this.obj.set("age",100)}static{console.log(this.obj)}
}console.log(Cache.obj)

1.4 使用in来判断某个对象是否拥有某个私有属性

class Cache {#obj = {}get(key) {return this.#obj[key]}set(key, value) {this.#obj[key] = value}hasObj(){return #obj in this // in关键字:判断某个属性是不是私有属性}
}let cache = new Cache()
console.log(cache.hasObj()) // true

2 支持在最外层写await

顶层await只能用在ES6模块,不能用在CommonJS模块。这是因为CommonJS模块的require()是同步加载,如果有顶层await,就没法处理加载了。

<script type="module">function ajax() {return new Promise((resolve) => {setTimeout(() => {resolve("data-1111");}, 1000);})
}let res = await ajax();
console.log(res)
</script>
//1.js
function ajax(){return new Promise((resolve)=>{setTimeout(()=>{resolve("data-11111")},2000)})
}let data = await ajax() // 2秒之后模块才会导出export default {name:"moduleA",data
}<script type="module">console.log("开始")// await写起来是同步,执行是异步的感觉let moduleA = await import("./1.js") // 动态导入,导入promise对象console.log(moduleA) // 2秒之后拿到结果,不耽误上面代码执行
</script>

3 at函数来索引元素

let arr = ["kerwin","tiechui","gangdan","xiaoming"]console.log(arr[1])
console.log(arr[arr.length - 1]) 
console.log(arr[arr.length - 2]) console.log(arr.at(1))
console.log(arr.at(-1))
console.log(arr.at(-2))let str = "kerwin"console.log(str.at(-1))
console.log(str.at(-2))

4 正则匹配的开始和结束索引

let str = "今天是2022-11-10"
// 多了一个属性:indices:0: [3, 13], 1: [3, 7], 2: [8, 10], 3: [11, 13]
let reg = /(?<year>[0 - 9]{4}) - (?<month>[0 - 9]{2}) - (?<day>[0 - 9]{2})/d//exec
let res = reg.exec(str)
// console.log(res)
let {year, month, day} = res.groups // group -> index = 3
console.log(res) // day: [11, 13], month: [8, 10], year: [3, 7]

5 findLast() 和 findLastIndex() 函数

let arr = [11,12,13,14,15]// let res = arr.find(function(value){
//   return value % 2 === 0
// })
// let res = arr.findIndex(function(value){
//   return value % 2 === 0
// })
// let res = arr.findLast(function(value){
//   return value % 2 === 0
// })
let res = arr.findLastIndex(function(value){return value % 2 === 0
})let res1 = arr.find(value => value > 13) // 14
let res2 = arr.findIndex(value => value > 13) // 3
let res3 = arr.findLast(value => value > 13) // 15
let res4 = arr.findLastIndex(value => value > 13) // 4let res5= arr.find(value => value % 2 === 0) // 12
let res= arr.findLast(value => value % 2 === 0) // 14
console.log(res)

6 Error对象的Cause属性

Error对象多了一个cause属性来指明错误出现的原因。这个属性可以帮助我们为错误添加更多的上下文信息,从而帮助使用者们更好地定位错误。

function getData(){try{console.log(kerwin)}catch(e){throw new Error('New error 1111111',{cause:"这是因为,,,,,,,,,"});}
}try{getData()
}catch(e){console.log(e.cause)
}

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

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

相关文章

Python 从入门到实战30(高级文件的操作)

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;通过熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 上篇文章我们讨论了操作目录的相关知识。今天我们将学习一下高级文…

(SERIES13)基于DMASM的DMDSC搭建

1 集群规划 1.1 规划内容 在宿主机上创建磁盘映像、并使用该磁盘映像创建虚拟块设备&#xff0c;按照losetup -f可用顺序分别关联到loop0, loop1, loop2, loop3&#xff1b;也可以直接挂载四个云虚拟磁盘vdb, vdc, vdd, vde&#xff1b;   配置UDEV规则&#xff0c;通过.img…

2、electron vue3 怎么创建子窗口,并给子窗口路由传参

接上回初始化vue3 electron项目&#xff0c;创建完vue3 electron项目后&#xff0c;现在要实现在渲染进程中点击按钮创建一个新的子窗口 开始 子窗口创建操作只能在主线程内完成&#xff0c;而创建操作是在渲染线程触发&#xff0c;因此就需要进行两者间的通讯。 1、创建子窗…

性能监控之Python实战SkyWalking链路追踪

文章目录 一、介绍二、SkyWalking支持的语言三、SkyWalking安装3.1 前提准备3.2 先安装ElasticSearch7.X3.3 Skywalking-OAP 安装3.4 Skywalking-UI 界面安装3.5 访问页面检查SkyWalking是否可以访问 四、Python 项目接入SkyWalking4.1 演示项目代码4.2 验证 sw-python4.3 配置…

uviewui2.x上传的坑

<u-upload:fileList"fileList3"afterRead"afterRead"delete"deletePic"name"3"multiple:maxCount"10":previewFullImage"true" ></u-upload> 其中&#xff0c;afterRead&#xff0c;deletePic方法&a…

AI会议时代:企业如何搭上快车?

“我 们认为&#xff0c;AI绝不仅是会议的辅助工具&#xff0c;而更会是重塑会议流程的关键力量。通过AI的个性化定制、大规模支持、智能分析这些技术&#xff0c;AI会议将大大提升会议的智能化与高效性&#xff0c;进而成为企业数字化转型的核心驱动力。” 作者|斗斗 编辑…

webdav解说

WebDAV&#xff08;Web Distributed Authoring and Versioning&#xff09;是一种基于HTTP/1.1协议的扩展&#xff0c;它允许用户通过网络进行文件的上传、删除、编辑等操作&#xff0c;从而实现远程文件管理。 WebDAV 是一种网络文件共享协议&#xff0c;它扩展了HTTP协议&am…

golang context管理channel

如果多个协程之间有一定的生命周期关系&#xff0c;可以使用context去做退出管理。 如下图&#xff0c;上游的ctx只能执行很快就被cancel了&#xff0c;此时那启动的子协程也没有继续运行的必要&#xff0c;所以此时子协程也监控上游的状态&#xff0c;上游一结束&#xff0c;子…

THREE.JS法线Shader

以普通情况而论 vNormal normal;//...gl_FragColor vec4( vNormal, 1. );vNormal normal;//...gl_FragColor vec4( normalize( vNormal ) * 0.5 0.5, 1. );vNormal normalMatrix * normal;//...gl_FragColor vec4( normalize( vNormal ) * 0.5 0.5, 1. );normalMa…

为什么IP首部的源IP地址和目的IP地址不变而MAC层的源MAC地址和目的MAC地址变

IP首部的源IP地址和目的IP地址不变&#xff0c;而MAC层的源MAC地址和目的MAC地址变化的原因‌主要涉及到计算机网络中的分层结构和数据包传输过程。在OSI&#xff08;开放系统互联&#xff09;模型中&#xff0c;计算机网络被分为不同的层&#xff0c;每层都有其特定的功能。IP…

【Java异常】(简简单单拿捏)

【Java异常】&#xff08;简简单单拿捏&#xff09; 1. 异常的简单介绍2. 异常的抛出2.1 语法 3. 异常的处理3.1 异常声明throws3.2 try-catch捕获并处理 4. 例子&#xff08;try-catch自定义异常&#xff09; 1. 异常的简单介绍 程序员在运行代码时会遇到很多异常&#xff0c…

MySQL知识点复习 - 索引分类

索引 可以把书开头的目录比喻成索引&#xff0c;那么在数据库中&#xff0c;索引就可以理解为数据的目录。 索引的分类 可以按照四个角度来进行分类 数据结构&#xff1a;b&#x1f332;、hash、full-text索引物理存储&#xff1a;聚簇、二级索引字段特性&#xff1a;主键、…

Linux系统安装MySQL8.40(保姆级教程)

前言&#xff1a; 说明&#xff1a;本文章是在阿里云ecs上安装MySQL&#xff0c;即&#xff1a;Linux是在联网状态下。 一、安装前环境准备 1.查看MySQL应用是否已存在 rpm -qa |grep mysql说明&#xff1a;若返回空信息&#xff0c;就说明当前环境没有安装MySQL。 2.查看ma…

如何要进行源代码加密?源代码加密的必要性

由于研发人员比普通办公人员要精通电脑&#xff0c;除了常见的网络&#xff0c;邮件&#xff0c;U盘&#xff0c;QQ等数据扩散方法外&#xff0c;还有很多对于研发人员来说非常容易的方法&#xff08;未列全&#xff09;&#xff1a; 物理方法&#xff1a; — 网线直连&#…

解决方案:如何区分python里面绝对路径跟相对路径的不同

文章目录 一、现象二、解决方案 一、现象 在工作中&#xff0c;会经常混淆绝对路径跟相对路径的区别&#xff0c;我也是找了资料之后就懂了&#xff0c;但时间一长就混淆了&#xff0c;于是&#xff0c;我在这里记录下 二、解决方案 在Python中&#xff0c;绝对路径和相对路…

关于el-card的height设置100%后, el-card内容超出高度后,内容被隐藏这件事

1. 解决方法 全局样式添加以下代码 .el-card__body{height: 100%;width: 100%; }2. 问题原因 代码 <el-card style"height: 100%"><!-- ... --> </el-card>选中.el-card 元素发现这里的 .el-card 的 overflow:hidden 而内部 .el-card__body除…

WiFi无线连接管理安卓设备工具:WiFiADB

介绍 WiFi ADB 使您能够通过 WiFi TCP/IP 连接直接在设备上轻松调试和测试 Android 应用&#xff0c;无需使用 USB 数据线。在启用 WiFi 上的 ADB 后&#xff0c;打开控制台将电脑连接到设备。 手机和电脑在同一个WiFi然后电脑上运行adb connect x.x.x.x:x命令即可 下载 谷…

七段 LED 显示器(7段数码管)

7 段 LED 显示器, 通常简称为 LED 数码管 或 数码管. 通过 菜单--绘制--数字芯片--添加 7 段 LED 显示器 可以引入它. 普通模式 它内部其实就是七盏长条状的 LED 灯, 有的横着放, 有的竖着放. 七个灯用 a b c d e f g 分别表示. 灯的位置从上到下, 从里到外顺时针下来, 如上图…

青年女演员白澜闪耀亮相第五届庐山电影节红毯

2024年9月25日&#xff0c;演员白澜受邀出席了第五届庐山电影节盛典晚会&#xff0c;在这个星光熠熠的夜晚&#xff0c;青年演员白澜以一袭精心设计的礼服惊艳亮相&#xff0c;成为红毯瞩目的焦点。 整个第五届庐山国际爱情电影周以“庐山&#xff0c;你的爱情靠山”为主题&…

帆软通过JavaScript注入sql,实现数据动态查询

将sql语句设置为参数 新建数据库查询 设置数据库查询的sql语句 添加控件 JavaScript实现sql注入 添加事件 编写JavaScript代码 //获取评价人id var pjrid this.options.form.getWidgetByName("id").getValue();//显示评价人id alert("评价人&#xff1a;&…