让我们来看一看ECMAScript2022(ES13)中的新特性

#toggle(){

this.#value = !this.#value

}

set #setFalseValue(){

this.#value = false;

}

}

const button = new ButtonToggle();

// SyntaxError - cannot be accessed or modified from outside the class

button.#toggle();

// SyntaxError - cannot be accessed or modified from outside the class

button.#setFalseValue;

在代码中，我们将toggle方法用#标记变为私有的。这样一来，#toggle方法只能类的内部进行调用，否则也将抛出异常。

静态属性和方法

======================================================================

静态属性和方法这个概念在其它的编程语言中早就已经有了，Javascript也会在2022的标准中加入它。（早就该加了😅）

在过往，静态属性或方法只能通过原型链来调用。如果我们想给类定义一个静态的方法，我们需要在类的外部进行声明，如下代码所示：

class ButtonToggle extends HTMLElement {

// … class body

}

ButtonToggle.toggle(){

// static method define outside of the class body

}

在ES2022中提供了static关键字来允许开发人员在类中声明一个静态属性或方法，可以直接通过类来调用，如下代码所示：

class ButtonToggle extends HTMLElement {

#value = true;

static toggle(){

this.#value = !this.#value

}

}

// this will work

ButtonToggle.toggle();

// SyntaxError - private static field

const button = new ButtonToggle();

button.toggle();

科学检查私有变量的方式

==========================================================================

正如我们在上面的例子中看到的，如果我们尝试访问类之外的私有字段，它将抛出异常并且不会像访问公共字段那样返回 undefined。💡

我们可以在类中使用try/catch来检查字段是否存在，如下代码所示：

class ButtonToggle extends HTMLElement {

// initialised as null

#value = null;

get #getValue(){

if(!this.#value){

throw new Error(‘no value’);

}

return this.#value

}

static isButtonToggle(obj){

try {

obj.#getValue;

return true;

} catch {

// could be an error internal to the getter

return false;

}

}

}

在上面的代码中，我们通过在isButtonToggle方法中加上try/catch来捕获当getValue不存在时的异常。但这样实现会在实际应用中遇到一个问题：try/catch中往往还有其它代码逻辑，当异常发生时，开发人员无法判断是由于属性不存在或者仅仅只是其它的异常。因此，ES2022提供了一个更加科学的方式来应对这种情况。可以来看下面的例子：

class ButtonToggle extends HTMLElement {

// initialised as null

value = null;

get #getValue(){

if(!this.#value){

throw new Error(‘no value’);

}

return this.#value;

}

static isButtonToggle(obj){

return #value in obj && #getValue in obj

}

}

类静态代码块

=====================================================================

这里其实原文说了很多，我个人觉得弄复杂了。简单来讲，就是可以在类中直接用逻辑初始化静态属性。

class Translator {

static translations = {

yes: ‘ja’,

no: ‘nein’,

maybe: ‘vielleicht’,

};

static englishWords = [];

static germanWords = [];

static { // (A)

for (const [english, german] of Object.entries(this.translations)) {

this.englishWords.push(english);

this.germanWords.push(german);

}

}

}

正则匹配返回下标

=======================================================================

可以通过给正则表达式加上 d 字符来让返回的结果中带上匹配字符的开始下标和结束下标。我们来看一组返回的对比：

const fruits = ‘Fruits: mango, mangosteen, orange’

const regex = /(mango)/g;

// .exec

RegExp(regex).exec(fruits);

// [

// ‘mango’,

// index: 8,

// input: ‘Fruits: mango, mangosteen, orange’,

// groups: undefined

// ]

// matchAll

const matches = […fruits.matchAll(regex)];

matches[0];

// [

// ‘mango’,

// ‘mango’,

// index: 8,

// input: ‘Fruits: mango, mangosteen, orange’,

// groups: undefined

// ]

⚡vs⚡

const fruits = ‘Fruits: mango, mangosteen, orange’

// /gd instead of the previous /g

const regex = /(mango)/gd;

const matches = […fruits.matchAll(regex)];

matches[0];

// [

// “mango”,

// “mango”,

// groups: undefined

// index: 8

// indices:[]

// [8, 13],

// [8, 13]

// ]

// groups: undefined

可以看到加了 d 字符后，返回结果中多了indices字段，里面包含了命中的下标数组。

在async外部使用await

==============================================================================

在这之前，await只能在async方法中使用。在ES2022的标准中，可以在async方法之外使用await。例如，我们可以推迟一个模块及其父模块的执行，直到导入其它内容。

这在一些场景中非常有用，例如你需要引入一个动态路径的资源：

// we need to get the appropriate translation keys based on the language

const translationKeys = await import(/i18n/${navigator.language});

或者想要在一些资源引入失败时，替换成其它资源：

let jQuery;

try {

jQuery = await import(‘https://cdn-a.com/jQuery’);

} catch {

jQuery = await import(‘https://cdn-b.com/jQuery’);

}

在所有内置的可索引数据上新增.at()方法

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-fQzCibbF-1726080748356)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-hvry9M6x-1726080748358)]