快来看看ECMAScript 2024(ES13)有哪些新标准？，前端开发环境

static blue = Symbol(‘blue’);

static _ = this.collectStaticFields(); // (A)

static logColors() {

for (const enumKey of this.enumKeys) { // (B)

console.log(enumKey);

}

}

}

ColorEnum.logColors();

// Output:

// ‘red’

// ‘green’

// ‘blue’

4、ECMScript 类静态初始化块

---

类静态块提议提供了一种优雅的方式，在类声明/定义期间评估静态初始化代码块，可以访问类的私有字段

class Person {

static name;

age;

}

try {

Person.name = getNameA();

} catch {

Person.name = getNameB();

}

5、检测私有字段

---

当我们试图访问一个没有被声明的公共字段时，会得到未定义的结果，同时访问私有字段会抛出一个异常。我们根据这两个行为来判断是否含有公共字段和私有字段。但是这个建议引入了一个更有趣的解决方案，它包括使用in操作符，如果指定的属性/字段在指定的对象/类中，则返回真，并且也能判断私有字段

class Person {

name;

#age;

get #age(){

return #age;

}

$initValue(){

this.name = ‘’;

this.#age = 12;

}

static hasAge(person){

return #gae in person;

}

}

6、正则匹配索引

---

该提案提供了一个新的 /dflag，以获得关于输入字符串中每个匹配的开始和索引位置结束的额外信息。

const reg = /test(\d)/g;

const reg2022 = /test(\d)/dg;

const srt = ‘test1test2’;

const arr = […str.matchAll(reg)];

const arr2022 = […str.matchAll(reg2022)];

arr[0] //

arr2022[0] //

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

---

新增一个新的数组方法，通过给定的索引来获取一个元素。当给定的索引为正数时，这个新方法的行为与使用括号符号的访问相同，但是当我们给定一个负整数的索引时，它就像python的 "负数索引 "一样工作，这意味着at()方法以负整数为索引，从数组的最后一项往后数。所以该方法可以被执行为array.at(-1)，它的行为与array[array.length-1]相同，在下面的例子中可以看到。

const list = [1,2,3,4,5,6];

console.log(list.at(-1)); // 6

console.log(list.at(-2)); // 5

8、Object.hasOwn(object, property)

---

简单讲就是使用 Object.hasOwn 替代 Object.prototype.hasOwnProperty.call

const person = {name: ‘lxm’}

console.log(Object.prototype.hasOwnProperty.call(person, ‘name’)) // true

console.log(Object.hasOwn(person, ‘name’)) // true

9、Error Cause

---

proposal-error-cause这一提案，目的主要是为了便捷的传递导致错误的原因，如果不使用这个模块，想要清晰的跨越多个调用栈传递错误上下文信息，通常要这么做：

async function doJob() {

const rawResource = await fetch(‘//domain/resource-a’)

.catch(err => {

// How to wrap the error properly?

// 1. throw new Error('Download raw resource failed: ’ + err.message);

// 2. const wrapErr = new Error(‘Download raw resource failed’);

// wrapErr.cause = err;

// throw wrapErr;

// 3. class CustomError extends Error {

// constructor(msg, cause) {

// super(msg);

// this.cause = cause;

// }

// }

// throw new CustomError(‘Download raw resource failed’, err);

})

const jobResult = doComputationalHeavyJob(rawResource);

await fetch(‘//domain/upload’, { method: ‘POST’, body: jobResult });

}

await doJob(); // => TypeError: Failed to fetch

而按照这一提案的语法：

sync 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) {

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体免费获取

jpg" />

最后的最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体免费获取

[外链图片转存中…(img-soECrG6w-1712342507831)]

[外链图片转存中…(img-KViVFdsY-1712342507831)]

[外链图片转存中…(img-knvyyJxd-1712342507831)]

[外链图片转存中…(img-3lAWN6bh-1712342507831)]