关键词：
新的 ES13 规范终于发布了。
JavaScript 不是一种开源语言，它是一种需要遵循 ECMAScript 标准规范编写的语言，TC39 委员会负责讨论和批准新功能的发布， 那TC39他们是谁？
“ECMA International 的 TC39 是一群 JavaScript 开发人员、实施者、学者等，他们与社区合作维护和发展 JavaScript 的定义。” — TC39.es
他们的发布过程由五个阶段组成，自 2015 年以来，他们一直在进行年度发布，它们通常发生在春天举行发布。
有两种方法可以引用任何 ECMAScript 版本：
- 按年份：这个新版本将是 ES2022。
- 按其迭代次数：这个新版本将是第 13 次迭代，所以它可以被称为 ES13。
那么这次这个版本有什么新东西呢？我们可以对哪些功能感到兴奋？
01、正则表达式匹配索引
目前，在 JavaScript 中使用 JavaScript Regex API 时，仅返回匹配的开始索引。但是，对于一些特殊的高级场景，这还不够。
作为这些规范的一部分，添加了一个特殊的标志 d。通过使用它，正则表达式 API 将返回一个二维数组作为名索引的键。它包含每个匹配项的开始和结束索引。如果在正则表达式中捕获了任何命名组，它将在 indices.groups 对象中返回它们的开始/结束索引， 命名的组名将是它的键。
const result =
// ✅ shows start-end matches + named group match
console.log(result.indices);
// prints [Array(2), Array(2), groups: …]// ✅ showing the named ‘B’ group match
console.log(result.indices.gr
oups[‘B’])
// prints [3, 6]// ✅ a regex with a B named group capture
const expr = /a+(?<B>b+)+c/d;
const result =
// ✅ shows start-end matches + named group match
console.log(result.indices);
// prints [Array(2), Array(2), groups: …]// ✅ showing the named ‘B’ group match
console.log(result.indices.gr
oups[‘B’])
// prints [3, 6]
复制代码
查看原始提案，github.com/tc39/propos… indices
02、Top-level await
在此提案之前，不接受Top-level await，但有一些变通方法可以模拟这种行为，但其有缺点。
Top-level await 特性让我们依靠模块来处理这些 Promise。这是一个直观的功能。
但是请注意，它可能会改变模块的执行顺序， 如果一个模块依赖于另一个具有Top-level await 调用的模块，则该模块的执行将暂停，直到 promise 完成。
让我们看一个例子：
// users.js
export const users = await fetch(/users/lists);
// usage.js
import users from “./users.js”;
// ✅ the module will wait for users to be fullfilled prior to executing any code
console.log(users);
复制代码
在上面的示例中，引擎将等待用户完成操作，然后，再执行 usage.js 模块上的代码。
总之，这是一个很好且直观的功能，需要小心使用，我们不要滥用它。
在此处查看原始提案。github.com/tc39/propos…
03、.at( )
长期以来，一直有人要求 JavaScript 提供类似 Python 的数组负索引访问器。而不是做 array[array.length-1] 来做简单的 array[-1]。这是不可能的，因为 [] 符号也用于 JavaScript 中的对象。
被接受的提案采取了更实际的方法。Array 对象现在将有一个方法来模拟上述行为。
const array = [1,2,3,4,5,6]
// ✅ When used with positive index it is equal to [index]
array.at(0) // 1
array[0] // 1// ✅ When used with negative index it mimicks the Python behaviour
array.at(-1) // 6
array.at(-2) // 5
array.at(-4) // 3
复制代码
查看原始提案，github.com/tc39/propos…
顺便说一句，既然我们在谈论数组，你知道你可以解构数组位置吗？
const array = [1,2,3,4,5,6];
// ✅ Different ways of accessing the third position
const 3: third = array; // third = 4
array.at(3) // 4
array[3] // 4
复制代码
04、可访问的 Object.prototype.hasOwnProperty
以下只是一个很好的简化， 已经有了 hasOwnProperty。但是，它需要在我们想要执行的查找实例中调用。因此，许多开发人员最终会这样做是很常见的：
const x = foo: "bar" ;
// ✅ grabbing the hasOwnProperty function from prototype
const hasOwnProperty = Object.prototype.hasOwnProperty// ✅ executing it with the x context
if (hasOwnProperty.call(x, “foo”))
…
复制代码
通过这些新规范，一个 hasOwn 方法被添加到 Object 原型中，现在，我们可以简单地做：
const x = foo: "bar" ;
// ✅ using the new Object method
if (Object.hasOwn(x, “foo”))
…
复制代码
查看原始提案，github.com/tc39/propos…
05、Error Cause
错误帮助我们识别应用程序的意外行为并做出反应，然而，理解深层嵌套错误的根本原因，正确处理它们可能会变得具有挑战性，在捕获和重新抛出它们时，我们会丢失堆栈跟踪信息。
没有关于如何处理的明确协议，考虑到任何错误处理，我们至少有 3 个选择：
async function fetchUserPreferences()
try
const users = await fetch(//user/preferences)
.catch(err =>
// What is the best way to wrap the error?
// 1. throw new Error(Failed to fetch preferences + err.message);
// 2. const wrapErr = new Error(Failed to fetch preferences);
// wrapErr.cause = err;
// throw wrapErr;
// 3. class CustomError extends Error
// constructor(msg, cause)
// super(msg);
// this.cause = cause;
//
//
// throw new CustomError(Failed to fetch preferences, err);
)
fetchUserPreferences();
复制代码
作为这些新规范的一部分，我们可以构造一个新错误并保留获取的错误的引用。我们只需将对象 cause: err 传递给 Errorconstructor。
这一切都变得更简单、标准且易于理解深度嵌套的错误， 让我们看一个例子：
async function fetcUserPreferences()
try
const users = await fetch(//user/preferences)
.catch(err =>
throw new Error(Failed to fetch user preferences, cause: err);
)
fetcUserPreferences();
复制代码
了解有关该提案的更多信息，github.com/tc39/propos…
06、Class Fields
在此版本之前，没有适当的方法来创建私有字段， 通过使用提升有一些方法可以解决它，但它不是一个适当的私有字段。但现在很简单， 我们只需要将 # 字符添加到我们的变量声明中。
class Foo
#iteration = 0;
increment()
this.#iteration++;
logIteration()
console.log(this.#iteration);
const x = new Foo();
// ❌ Uncaught SyntaxError: Private field ‘#iteration’ must be declared in an enclosing class
x.#iteration// ✅ works
x.increment();// ✅ works
x.logIteration();
复制代码
拥有私有字段意味着我们拥有强大的封装边界， 无法从外部访问类变量，这表明 class 关键字不再只是糖语法。
我们还可以创建私有方法：
class Foo
#iteration = 0;
.#auditIncrement()
console.log(‘auditing’);
increment()
this.#iteration++;
this.#auditIncrement();
const x = new
// ❌ Uncaught SyntaxError: Private field ‘#auditIncrement’ must be declared in an enclosing class
x.#auditIncrement// ✅ works
x.increment();
复制代码
该功能与私有类的类静态块和人体工程学检查有关，我们将在接下来的内容中看到。
了解有关该提案的更多信息，github.com/tc39/propos…
07、Class Static Block
作为新规范的一部分，我们现在可以在任何类中包含静态块，它们将只运行一次，并且是装饰或执行类静态端的某些字段初始化的好方法。
我们不限于使用一个块，我们可以拥有尽可能多的块。
// ✅ will output one two three
class A
static
console.log(one);
static
console.log(two);
static
console.log(three);
复制代码
他们有一个不错的奖金，他们获得对私有字段的特权访问， 你可以用它们来做一些有趣的模式。
let getPrivateField;
class A
#privateField;
constructor(x)
this.#privateField = x;
static
// ✅ it can access any private field
getPrivateField = (a) => a.#privateField;
const a = new A(‘foo’);
// ✅ Works, foo is printed
console.log(getPrivateField(a));
复制代码
如果我们尝试从实例对象的外部范围访问该私有变量，我们将得到无法从类未声明它的对象中读取私有成员#privateField。
了解有关该提案的更多信息，github.com/tc39/propos…
08、Private Fields
新的私有字段是一个很棒的功能，但是，在某些静态方法中检查字段是否为私有可能会变得很方便。
尝试在类范围之外调用它会导致我们之前看到的相同错误。
class Foo
#brand;
static isFoo(obj)
return #brand in obj;
const x = new Foo();
// ✅ works, it returns true
Foo.isFoo(x);// ✅ works, it returns false
Foo.isFoo()// ❌ Uncaught SyntaxError: Private field ‘#brand’ must be declared in an enclosing class
#brand in x
复制代码
最后的想法
这是一个有趣的版本，它提供了许多小而有用的功能，例如 at、private fields和error cause。当然，error cause会给我们的日常错误跟踪任务带来很多清晰度。
一些高级功能，如top-level await，在使用它们之前需要很好地理解。它们可能在你的代码执行中产生不必要的副作用。
我希望这篇文章能让你和我一样对新的 ES2022 规范感到兴奋，请记得点赞我，关注我。
- End -
python3.11即将发布，这5个实用新功能，你还不知道嘛
Python3.11即将发布，这5个实用新功能，你还不知道嘛Python3.11快发布了，每个新版本都带有新功能。在本文中，我们将介绍令人期待的Python3.11的5个很酷的新功能。1.比3.10版本快了60%具体取决于工作负载。平均来说... 查看详情
es6的几个实用技巧，你了解吗？(代码片段)
本文给大家分享了es6的几个实用技巧，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧 Hack#1交换元素利用数组解构来实现值的互换leta=‘world‘,b=‘hello‘[a,b]=[b,a]console.log(a)//->helloconsole.log(b)//->worldHack#2调试我们... 查看详情
九个超级实用的es6特性(代码片段)
1、展开操作符顾名思义，用于对象或数组之前的展开操作符（…），将一个结构展开为列表。演示一下：letfirstHalf=[one,two];letsecondHalf=[three,four,...firstHalf]; 这种写法够优雅，够简洁吧？如果不用展开操作符我们得这么写：... 查看详情
分享8个非常实用的vue自定义指令(代码片段)
本文在github做了收录github.com/Michael-lzg…demo源码地址github.com/Michael-lzg…在Vue，除了核心功能默认内置的指令(v-model和v-show)，Vue也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作。Vue自... 查看详情
微软公布win10“发布预览”新规：一周年更新版是新基准
微软WindowsInsider预览体验计划包含三个通道，分别是快、慢和发布预览，其中前两个通道可以接收全新开发版本，区别在于快速版更新频繁，功能新颖，慢速版只推送较稳定的版本，新颖程度稍差，而“发布预览”版则是在当前... 查看详情
获取 Javascript 中两 (2) 个日期之间*每年*的月数 [例如：2019 年 8 月 - 2022 年 8 月]
...umberofMonths*PerYear*betweenTwo(2)DatesinJavascript[Ex:Aug2019-Aug2022]【发布时间】：2019-08-0504:13:31【问题描述】：这可能与DifferenceinMonthsbetweentwodatesinJavaScript重复， 查看详情
python3.11即将发布，这5个实用新功能，你还不知道嘛
Python3.11即将发布，这5个实用新功能，你还不知道嘛Python3.11快发布了，每个新版本都带有新功能。在本文中，我们将介绍令人期待的Python3.11的5个很酷的新功能。1.比3.10版本快了60%具体取决于工作负载。平均来说... 查看详情
8个纹理单元的opengl es多纹理着色器的思考
...英文标题】：Thoughtsonopenglesmultitextureshaderwith8textureunits【发布时间】：2013-02-1216:36:31【问题描述】：下面是一个表现不佳的片段着色器。删除条件分支似乎并没有提高性能。只有150个多边形，我在KindleFire上获得10fps，在GalaxyS3上... 查看详情
分享一款绝对实用的文件管理工具--es文件浏览器。
《ES文件浏览器》介绍：这是一款绝对实用的文件管理工具，不管是图片、音乐，还是视频、文档都能够统一管理，清楚明了的分类，超高的内存储存空间，让你手机文件不再乱七八糟。功能：1、程序... 查看详情
8个原生js/jquery实用技巧
选择所有子元素（排除最后一个）element:not(:last-child){}自定义原生input="file"的样式//自定义上传样式<liid="upload-btn"class="default-image"><imgsrc="="alt=""><div>请上传图片< 查看详情
九个前端开发必学超级实用的es6特性
1、展开操作符顾名思义，用于对象或数组之前的展开操作符（…），将一个结构展开为列表。这种写法够优雅，够简洁吧？如果不用展开操作符我们得这么写：展开操作符也适用于合并对象的属性... 查看详情
九个前端开发必学超级实用的es6特性
1、展开操作符顾名思义，用于对象或数组之前的展开操作符（…），将一个结构展开为列表。这种写法够优雅，够简洁吧？如果不用展开操作符我们得这么写：展开操作符也适用于合并对象的属性... 查看详情
es2022正式发布！有哪些新特性？(代码片段)
2022年6月22日，第123届ECMA大会批准了ECMAScript2022语言规范，这意味着它现在正式成为标准。下面就来看看ECMAScript2022有哪些新特性！总览：Top-levelAwaitObject.hasOwn()at()error.cause正则表达式匹配索引类1.Top-levelAwait在ES2017... 查看详情
es2022正式发布！有哪些新特性？(代码片段)
2022年6月22日，第123届ECMA大会批准了ECMAScript2022语言规范，这意味着它现在正式成为标准。下面就来看看ECMAScript2022有哪些新特性！总览：Top-levelAwaitObject.hasOwn()at()error.cause正则表达式匹配索引类1.Top-levelAwait在ES2017... 查看详情
8个非常实用的vue自定义指令
...nbind:只调用一次，指令与元素解绑时调用。下面分享几个实用的Vue自定义指令复制粘贴指令v-copy长按指令v-longpress输入框防抖指令v-debounce禁止表情及特殊字符v-emoji图片懒加载v-LazyLoad权限校验指令v-premission实现页面水印v-waterMarker... 查看详情
2022-04-25
...，话筒放大器、耳机放大器、数字音效、模拟混合和增益功能。ES8388采用先进的多位Δ∑调制技术实现数字与模拟之间的数据转换。多比特Δ∑调制器使器件对时钟抖动和低带外噪声的灵敏度低。它应用于：MID，MP3,MP4,PMP，无线音... 查看详情
visualstudio2022预览版2发布啦
...供有关个人和团队生产力、现代开发和不断创新等主题的新功能。在本文中，我们将重点介绍VisualStudio2022的一些新功能。我们希望您下载并试用它， 查看详情
8个非常实用的vue自定义指令
...令定义函数提供了几个钩子函数（可选）：下面分享几个实用的Vue自定义指令需求：实现一键复制文本内容，用于鼠标右键粘贴。思路：使用：给Dom加上v-copy及复制的文本即可需求：实现长按，用户需要按下并按住按钮几秒钟，... 查看详情