关键词：
摘要：本文主要介绍几个已经进入stage4的提案，这几个提案有望在2022年逐步纳入标准。
本文分享自华为云社区《2022 年你应该尝试的 8个 JavaScript 新功能》，作者：前端picker。
1995年12月4日，Netscape 公司与 Sun 公司联合发布JavaScript 以来，JavaScript从推出就开始了飞速的发展，2015年6，ES6正式发布，此后JavaScript正式进入新阶段，成为企业级大规模开发语言，并仍以高速度不断发展。
下面的表格对应这版本变化：
本文主要介绍几个已经进入stage4的提案，这几个提案有望在2022年逐步纳入标准。（请注意：纳入标准并不等同于浏览器支持）
PS：科普-Javascript的新语法，从提出到纳入标准一共经历下面几个stage
stage-0：新语法还是一个设想，（只能由TC39成员或TC39贡献者提出）
stage-1:：提案阶段，比较正式的提议，只能由TC39成员发起，这个提案要解决的问题必须有正式的书面描述。
stage-2：草案，有了初始规范，必须对功能语法和语义进行正式描述，包括一些实验性的实现。
stage-3：候选，该提议基本已经实现，需要等待实验验证，用户反馈及验收测试通过。
stage-4：已完成，必须通过 Test262 验收测试，下一步就纳入ECMA标准。
.at()
TC39建议在所有基本可索引类，例如：数组、字符串、类数组（arguments）中添加.at（）方法。
例如
lat arr=[1,2,3,4,5]之前我们想获取数组中的第二位
arr[1] //2最后一位的话，可能就是
arr[4] // 5但是如果arr长度是动态的呢？我们要如何让取出最后一位? 通常的写法是：
arr[arr.length-1]但是有了.at()方法就很简单了，.at()支持正索引和负索引。
例如
arr.at(-1) //5
arr.at(-2) //4Object.hasOwn(object, property)
Object.hasOwn(object, property)主要是用来替代Object.prototype.hasOwnProperty()。
目前我们想要判断对象是否具有指定的对象，主要写法如下：
if (Object.prototype.hasOwnProperty.call(object, "fn"))
console.log('有')
而Object.hasOwn的写法：
if (Object.hasOwn(object, "fn"))
console.log("有")
具体提案：GitHub - tc39/proposal-accessible-object-hasownproperty: Object.hasOwn() proposal for ECMAScript
目前来看，V8引擎的9.3版本已经开始支持，所以说chrome应该会很快支持。
类的私有方法和getter/setter
类是所有支持面向对象语言的基本，而Javascript虽然支持使用class定义类，但是并没有提供 定义私有属性/方法的的 方案。本提案提出使用**#**来定义私有属性/方法
class Person
name = '小芳';
#age = 16;
consoleAge()
console.log(this.#age)
const person = new Person();
console.log(person.name); //小芳
console.log(button.#value); //报错
button.#value = false;//报错具体提案：GitHub - tc39/proposal-private-methods: Private methods and getter/setters for ES6 classes
检查私有属性和方法
因为新的标准会支持私有属性和方法，当我们访问不存在的私有属性/方法会报错，而在新标准中也考虑了这个情况，提供了in来检查私有属性和方法是否存在
class C
#brand;
#method()
get #getter()
static isC(obj)
return #brand in obj && #method in obj && #getter in obj;
具体提案：https://github.com/tc39/proposal-private-fields-in-in
Top-level await（顶层await）
目前，我们使用await必须是在申明async的函数中，本提案，主要是支持在没有async的情况下使用await
例如下面几种使用场景：
动态引入依赖
const strings = await import(`/i18n/$navigator.language`);这允许模块使用运行时值来确定依赖关系。这对于开发/生产拆分、国际化、环境拆分等非常有用。
资源初始化
const connection = await dbConnector();这允许模块表示资源，并在模块永远无法使用的情况下产生错误。
加载依赖
let jQuery;
try
jQuery = await import('https://cdn-a.com/jQuery');
catch
jQuery = await import('https://cdn-b.com/jQuery');
具体提案：https://github.com/tc39/proposal-top-level-await
正则匹配索引
该提案提供了一个新的/d，用来获取每个匹配的开始位置和结束位置信息。
const str = 'The question is TO BE, or not to be, that is to be.';
const regex = /to be/gd;
const matches = [...str.matchAll(regex)];
matches[0];
具体提案：https://github.com/tc39/proposal-regexp-match-indices
new Error()抛出异常的具体原因
new Error(),可能大家第一反应是，这不是已经存在的语法嘛，是的，没错！只是新的提案：将错误与原因相关联，，向具有属性的Error() 构造函数添加一个附加选项参数cause，其值将作为属性分配给错误实例。
async function doJob()
const rawResource = await fetch('//domain/resource-a')
.catch(err =>
throw new Error('Download raw resource failed', cause: err );
);
const jobResult = doComputationalHeavyJob(rawResource);
await fetch('//domain/upload', method: 'POST', body: jobResult )
.catch(err =>
throw new Error('Upload job result failed', cause: err );
);
try
await doJob();
catch (e)
console.log(e);
console.log('Caused by', e.cause);
// Error: Upload job result failed
// Caused by TypeError: Failed to fetch具体提案：https://github.com/tc39/proposal-error-cause
类static初始化块
本田针对静态字段和静态私有字段的提供了一种在 ClassDefinitionEvaluation 期间执行类静态端的每个字段初始化的机制-static blocks.例如官方提供的例子：
在没有static blocks之前，我们想给静态变量初始化（非直接赋值，可能是表达式赋值）的话，可能是放在外部实现：
// without static blocks:
class C
static x = ...;
static y;
static z;
try
const obj = doSomethingWith(C.x);
C.y = obj.y
C.z = obj.z;
catch
C.y = ...;
C.z = ...;
有了static block的情况下：我们可以直接在static blocks中初始化变量：
class C
static x = ...;
static y;
static z;
static
try
const obj = doSomethingWith(this.x);
this.y = obj.y;
this.z = obj.z;
catch
this.y = ...;
this.z = ...;
21进行误差分析
...人工检查一下你的算法犯的错误也许可以让你了解接下来应该做什么。这个过程称为错误分析，我们从一个例子开始讲吧。假设你正在调试猫分类器，然后你取得了90%准确率，相当于10%错误，在你的开发集上做到这样，这离你希... 查看详情
初学者要注意这8个web前端javascrip陷阱
...2,5,10].sort()的结果是[1,10,2,5]。 如果你想正确的排序，应该这样做：[1,2,5,10].sort((a,b)=>a-b) 2.newDate()十分好用 查看详情
这几个网站怎么使用?
...编写程序分析数据。如果你的研究和直系同源基因相关，应该使用1，3如果和基因的功能注释相关应该使用4，如果关系测序基因组情况应该去Ensembl，比较全。我的感觉1、2、4这三个数据库用的比较多，对3不甚了解。参考技术AGOO... 查看详情
asp.net在线编辑器（ckeditor）的内容显示问题
...~然后再跟踪一下保存时控件的内容再进行相应处理!一般应该不存在你说的那种情况,如果这个编辑器不支持后台取值你话,你添加的时候应该就保存不了!还有,你赋值的语句写在Page_Load事件中,请写在下面的代码里面:if(!IsPostBack)//... 查看详情
谁能介绍一下thinkpade40按键功能
点下按键新建．可以得到按键编辑器．最上方一横有（保存）（保存退出）（录制）（调试）（注释）（附件）（捉色捉点）（帮助）这8个功能，现在说说这些功能的用法. 第一个功能(保存).这个功能是保存当前编辑的... 查看详情
去it公司面试应该，是不是应该穿得不修边幅一点？
去IT公司面试应该穿得不修边幅一点，头发蓬乱一点，眼圈描黑一点，神情装的憔悴一点，不要问我为什么？至少这样看上去像个程序员！~呜呜~ 一天妻子让程序员丈夫去买东西，对丈夫说：... 查看详情
你应该知道的es2020中的10个javascript新特性(代码片段)
好消息–ES2020的新功能现已完成！这意味着我们现在对ES2020中发生的变化有了完整的了解，ES2020是JavaScript的新的和改进的规范。因此，让我们看看这些变化是什么。1.BigIntBigInt是JavaScript中最令人期待的功能之一，... 查看详情
sqlserver2016新功能——内置的temporaltables
放假之前老大跟我提起了一下2016有个有趣的功能叫TemporalTable，今天去看了一下资料整理一下。这个功能看上去像是临时表，但是其实是系统维护的一个历史记录表。(在某个程度上面比起我们手动维护的历史表应该方便了一点的... 查看详情
ios微信8.0.10版本唤醒隐藏功能，还有这几个变化
...天iOS微信更新到v8.0.10版本，当时我也发文给大家说了一下，最近我发现啦一个功能iOS微信8.0.10版本还含有一些隐藏的功能，比如聊天时的「边写边译」，以及朋友圈视频封面（内测中...）。边写边译之前... 查看详情
ios微信8.0.10版本唤醒隐藏功能，还有这几个变化
...天iOS微信更新到v8.0.10版本，当时我也发文给大家说了一下，最近我发现啦一个功能iOS微信8.0.10版本还含有一些隐藏的功能，比如聊天时的「边写边译」，以及朋友圈视频封面（内测中...）。边写边译之前... 查看详情
想学习unity，需要掌握啥知识
...去深入的学一下c#，设计模式，lua，socket以及不断推出的新功能了！加油吧！参考技术A初学者应先对c#有基本的了解，不要求深入，但起码应了解循环语句，类的封装继承，接口，委托等知识。了解unity3d的使用这方面可以看官方... 查看详情
hashcode与equals
...过来的：1.hashcode是用来查找的，如果你学过数据结构就应该知道，在查找和排序这一章有例如内存中有这样的位置01234567而我有个类，这个类有个字段叫ID,我要把这个类存放在以上8个位置之一，如果不用hashcode而任意存放，那么... 查看详情
初识函数(代码片段)
....什么是函数1.我们到?前为?,已经可以完成?些软件的基础功能了.那么我们来完成这样?个功能:约x:print("拿出?机")print("打开陌陌")print("找个漂亮的妹?")print("问她,约不约啊?")print("oK.?你!") #再来?次print("拿出?机")print("打开陌... 查看详情
javaweb项目，有个批量选项功能，不会做特此向大师或者老师请教。jsp页面
...置 追答如果你的选项间存在归属关系，应该使用li做。checkbox能实现选择，但是不具备层级关系。你可以去jquery之家搜“手风琴”能得到你要的样式。但是建议使用bootstrap上的样式，Collapse套用li，li里面使用checkbo... 查看详情
js中8个常见的陷阱(代码片段)
...陷阱。如果你已经是一个砖家，也可以读一读。1.你是否尝试过对数组元素进行排序？JavaScript默认使用字典序(alphanumeri 查看详情
js写一个通讯录
...：最近我在用H5重构一个公司APP前端，遇到了类似通讯录功能。经过三天的奋战，已经把功能实现了。我将会从思考，可行性，具体代码，调试这四个方面去写，因为我就是从这四个方面去写代码的。文章会很长，平时比较忙，... 查看详情
超棒！这8个python装饰器值得一试！(代码片段)
...标的一个很好的例子就是Python的装饰器。今天我们详细聊一下它，欢迎收藏学习，喜欢点赞支持。文末提供技术交流群。装饰器是什么&# 查看详情
你应该了解的前端标准化
前言 ：之前某次跟狼叔闲聊，聊到前端和后端的对比，还有前端职业的发展。狼叔说，到现在都没有人将前端的体系讲的很清楚，大家都在应用层竞争：前端去搞Serverless，前端去搞AI，前端去搞客户端。我就在想，能不能将... 查看详情