【前端】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;并做到独立完成项目开发的能力。 上篇文章我们讨论了操作目录的相关知识。今天我们将学习一下高级文…

性能监控之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 配置…

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…

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…

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

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

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

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

解决方案:如何区分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;&…

re轻松拆分四则运算expression(^从头匹配、(?:xxxx)非捕获组、| 交替运算符联合演习)

与ai对抵聊“算式匹配”&#xff0c;发现^从头匹配、(?:xxxx)非捕获组、| “交替”运算符联合使用的妙处。 (笔记模板由python脚本于2024年09月27日 18:35:32创建&#xff0c;本篇笔记适合喜欢python喜欢正则的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;…

【RabbitMQ】死信队列、延迟队列

死信队列 死信&#xff0c;简单理解就是因为种种原因&#xff0c;无法被消费的消息。 有死信&#xff0c;自然就有死信队列。当一个消息在一个队列中变成死信消息之后&#xff0c;就会被重新发送到另一个交换器中&#xff0c;这个交换器就是DLX&#xff08;Dead Letter Excha…

连锁收银系统的五大功能 选择开源收银系统三要素

连锁收银系统的五大功能&#xff0c;很多新手是不清楚的&#xff0c;老手也只是知道一些大概&#xff0c;今天&#xff0c;商淘云为大家分享收银系统的五大功能&#xff0c;尤其是第五个&#xff0c;大部分人不清楚&#xff0c;有的企业前面选了不合适的收银系统&#xff0c;导…

如何在iPad上设置Chrome为默认浏览器

将Chrome设置为iPad上的默认浏览器&#xff0c;不仅能够享受到谷歌强大的搜索功能和丰富的扩展生态&#xff0c;还能通过一系列自定义设置来进一步提升浏览体验。本文将详细介绍如何在iPad上完成这一设置&#xff0c;并探讨如何通过优化Chrome浏览器的相关功能&#xff0c;让您…

c语言200例 64

大家好&#xff0c;欢迎来到无限大的频道。 今天带领大家来学习c语言。 题目要求&#xff1a; 设计一个进行候选人的选票程序。假设有三位候选人&#xff0c;在屏幕上输入要选择的候选人姓名&#xff0c; 有10次投票机会&#xff0c;最后输出每个人的得票结果。好的&#xff…

【LLM多模态】视频理解模型Cogvlm-video和MVBench评测基准

note Cogvlm-video模型通过视频抽帧&#xff08;24帧&#xff0c;每帧大小为224 x 224&#xff09;后经过ViT进行图像编码&#xff08;ViT中添加了2x2的卷积核更好的压缩视觉信息&#xff09;&#xff0c;使用adapter模块更好的将视觉特征和文本特征对齐&#xff0c;得到的图像…

5--苍穹外卖-SpringBoot项目中菜品管理 详解(一)

目录 公共字段自动填充 问题分析 实现思路 代码开发 步骤一 步骤二 功能测试 新增菜品 需求分析和设计 代码开发 文件上传接口 功能测试 1--苍穹外卖-SpringBoot项目介绍及环境搭建 详解-CSDN博客 2--苍穹外卖-SpringBoot项目中员工管理 详解&#xff08;一&#…