ECMAScript 2022 会有哪些新特性?

console.log(Shape.color); // blue

console.log(Shape.getColor()); // blue

console.log(‘color’ in Shape); // true

console.log(‘getColor’ in Shape); // true

console.log(‘getMessage’ in Shape); // false

实例不能访问静态字段和方法:

const shapeInstance = new Shape();

console.log(shapeInstance.color); // undefined

console.log(shapeInstance.getColor); // undefined

console.log(shapeInstance.getMessage());// color:undefined

静态字段只能通过静态方法访问:

console.log(Shape.getColor()); // blue

console.log(Shape.getMessage()); //TypeError: Shape.getMessage is not a function

这里的 Shape.getMessage() 就报错了,这是因为 getMessage 不是一个静态函数,所以它不能通过类名 Shape 访问。可以通过以下方式来解决这个问题:

getMessage() {

return color:${Shape.color} ;

}

静态字段和方法是从父类继承的:

class Rectangle extends Shape { }

console.log(Rectangle.color); // blue

console.log(Rectangle.getColor()); // blue

console.log(‘color’ in Rectangle); // true

console.log(‘getColor’ in Rectangle); // true

console.log(‘getMessage’ in Rectangle); // false

4. 静态私有字段和方法

与私有实例字段和方法一样,静态私有字段和方法也使用哈希 (#) 前缀来定义:

class Shape {

static #color = ‘blue’;

static #getColor() {

return this.#color;

}

getMessage() {

return color:${Shape.#getColor()} ;

}

}

const shapeInstance = new Shape();

shapeInstance.getMessage(); // color:blue

私有静态字段有一个限制:只有定义私有静态字段的类才能访问该字段。这可能在我们使用 this 时导致出乎意料的情况:

class Shape {

static #color = ‘blue’;

static #getColor() {

return this.#color;

}

static getMessage() {

return color:${this.#color} ;

}

getMessageNonStatic() {

return color:${this.#getColor()} ;

}

}

class Rectangle extends Shape {}

console.log(Rectangle.getMessage()); // Uncaught TypeError: Cannot read private member #color from an object whose class did not declare it

const rectangle = new Rectangle();

console.log(rectangle.getMessageNonStatic()); // TypeError: Cannot read private member #getColor from an object whose class did not declare it

在这个例子中,this 指向的是 Rectangle 类,它无权访问私有字段 #color。当我们尝试调用 Rectangle.getMessage() 时,它无法读取 #color 并抛出了 TypeError。可以这样来进行修改:

class Shape {

static #color = ‘blue’;

static #getColor() {

return this.#color;

}

static getMessage() {

return ${Shape.#color};

}

getMessageNonStatic() {

return color:${Shape.#getColor()} color;

}

}

class Rectangle extends Shape {}

console.log(Rectangle.getMessage()); // color:blue

const rectangle = new Rectangle();

console.log(rectangle.getMessageNonStatic()); // color:blue

静态字段目前是比较稳定的,并且提供了各种实现:

80821785ac5be125c8e090a334f004c8.png

5. 类静态初始化块

静态私有和公共字段只能让我们在类定义期间执行静态成员的每个字段初始化。如果我们需要在初始化期间像 try … catch 一样进行异常处理,就不得不在类之外编写此逻辑。该提案就提供了一种在类声明/定义期间评估静态初始化代码块的优雅方法,可以访问类的私有字段。

先来看一个例子:

class Person {

static GENDER = “Male”

static TOTAL_EMPLOYED;

static TOTAL_UNEMPLOYED;

try {

// …

} catch {

// …

}

}

上面的代码就会引发错误,可以使用类静态块来重构它,只需将try…catch包裹在 static 中即可:

class Person {

static GENDER = “Male”

static TOTAL_EMPLOYED;

static TOTAL_UNEMPLOYED;

static {

try {

// …

} catch {

// …

}

}

}

此外,类静态块提供对词法范围的私有字段和方法的特权访问。这里需要在具有实例私有字段的类和同一范围内的函数之间共享信息的情况下很有用。

let getData;

class Person {

#x

constructor(x) {

this.#x = { data: x };

}

static {

getData = (obj) => obj.#x;

}

}

function readPrivateData(obj) {

return getData(obj).data;

}

const john = new Person([2,4,6,8]);

readPrivateData(john); // [2,4,6,8]

这里,Person 类与 readPrivateData 函数共享了私有实例属性。

三、Temporal


JavaScript 中的日期处理 Date() 对象一直是饱受诟病,该对象是1995 年受到 Java 的启发而实现的,自此就一直没有改变过。虽然Java已经放弃了这个对象,但是 Date() 仍保留在 JavaScript 中来实现浏览器的兼容。

Date() API 存在的问题:

  • 只支持UTC和用户的PC时间;

  • 不支持公历以外的日历;

  • 字符串到日期解析容易出错;

  • Date 对象是可变的,比如:

const today = new Date();

const tomorrow = new Date(today.setDate(today.getDate() + 1));

console.log(tomorrow);

console.log(today);

此时,两个时间输出是一样的,不符合我们的预期。正因为 Date() 对象存在的种种问题。平时我们经常需要借助moment.jsDay.js等日期库,但是它们的体积较大,有时一个简单的日期处理就需要引入一个库,得不偿失。

目前,由于Date API 在很多库和浏览器引擎中的广泛使用,没有办法修复API的不好的部分。而改变Date API 的工作方式也很可能会破坏许多网站和库。

正因如此,TC39提出了一个全新的用于处理日期和时间的标准对象和函数——Temporal。新的Temporal API 提案旨在解决Date API的问题。它为 JavaScript 日期/时间操作带来了以下修复:

  • 仅可以创建和处理不可变Temporal对象;

  • 提供用于日期和时间计算的简单 API;

  • 支持所有时区;

  • 从 ISO-8601 格式进行严格的日期解析;

  • 支持非公历。

Temporal 将取代 Moment.js 之类的库,这些库很好地填补了 JavaScript 中的空白,这种空白非常普遍,因此将功能作为语言的一部分更有意义。

由于该提案还未正式发布,所以,可以借助官方提供的prlyfill来测试。首选进行安装:

npm install @js-temporal/polyfill

导入并使用:

import { Temporal } from ‘@js-temporal/polyfill’;

console.log(Temporal);

Temporal 对象如下:

ca012d497e385d81af41f59005ccf698.png

下面就来看看 Temporal 对象有哪些实用的功能。

1. 当前时间和日期

Temporal.Now 会返回一个表示当前日期和时间的对象:

// 自1970年1月1日以来的时间(秒和毫秒)

Temporal.Now.instant().epochSeconds;

Temporal.Now.instant().epochMilliseconds;

// 当前位置的时间

Temporal.Now.zonedDateTimeISO();

// 当前时区

Temporal.Now.timeZone();

// 指定 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 时区的当前时间

Temporal.Now.zonedDateTimeISO(‘Europe/London’);

2. 实例时间和日期

Temporal.Instant 根据 ISO 8601 格式的字符串返回一个表示日期和时间的对象,结果会精确到纳秒:

Temporal.Instant.from(‘2022-02-01T05:56:78.999999999+02:00[Europe/Berlin]’);

// 输出结果:2022-02-01T03:57:18.999999999Z

Temporal.Instant.from(‘2022-02-011T05:06+07:00’);

// 输出结果:2022-01-31T22:06:00Z

除此之外,我们还可以获取纪元时间的对应的日期(UTC 1970年1月1日0点是纪元时间):

Temporal.Instant.fromEpochSeconds(1.0e8);

// 输出结果:1973-03-03T09:46:40Z

3. 时区日期和时间

Temporal.ZonedDateTime 返回一个对象,该对象表示在特定时区的日期/时间:

new Temporal.ZonedDateTime(

1234567890000, // 纪元时间

Temporal.TimeZone.from(‘Europe/London’), // 时区

Temporal.Calendar.from(‘iso8601’) // 默认日历

);

Temporal.ZonedDateTime.from(‘2025-09-05T02:55:00+02:00[Africa/Cairo]’);

Temporal.Instant(‘2022-08-05T20:06:13+05:45’).toZonedDateTime(‘+05:45’);

// 输出结果:

Temporal.ZonedDateTime.from({

timeZone: ‘America/New_York’,

year: 2025,

month: 2,

day: 28,

hour: 10,

minute: 15,

second: 0,

millisecond: 0,

microsecond: 0,

nanosecond: 0

});

// 输出结果:2025-02-28T10:15:00-05:00[America/New_York]

4. 简单的日期和时间

我们并不会总是需要使用精确的时间,因此 Temporal API 提供了独立于时区的对象。这些可以用于更简单的活动。

  • Temporal.PlainDateTime:指日历日期和时间;

  • Temporal.PlainDate:指特定的日历日期;

  • Temporal.PlainTime:指一天中的特定时间;

  • Temporal.PlainYearMonth:指没有日期成分的日期,例如“2022 年 2 月”;

  • Temporal.PlainMonthDay:指没有年份的日期,例如“10 月 1 日”。

它们都有类似的构造函数,以下有两种形式来创建简单的时间和日期:

new Temporal.PlainDateTime(2021, 5, 4, 13, 14, 15);

Temporal.PlainDateTime.from(‘2021-05-04T13:14:15’);

new Temporal.PlainDate(2021, 5, 4);

Temporal.PlainDate.from(‘2021-05-04’);

new Temporal.PlainTime(13, 14, 15);

Temporal.PlainTime.from(‘13:14:15’);

new Temporal.PlainYearMonth(2021, 4);

Temporal.PlainYearMonth.from(‘2019-04’);

new Temporal.PlainMonthDay(3, 14);

Temporal.PlainMonthDay.from(‘03-14’);

5. 日期和时间值

所有 Temporal 对象都可以返回特定的日期/时间值。例如,使用ZonedDateTime:

const t1 = Temporal.ZonedDateTime.from(‘2025-12-07T03:24:30+02:00[Africa/Cairo]’);

t1.year;        // 2025

t1.month;       // 12

t1.day;         // 7

t1.hour;        // 3

t1.minute;      // 24

t1.second;      // 30

t1.millisecond; // 0

t1.microsecond; // 0

t1.nanosecond;  // 0

其他有用的属性包括:

  • dayOfWeek(周一为 1 至周日为 7)

  • dayOfYear(1 至 365 或 366)

  • weekOfYear(1 到 52,有时是 53)

  • daysInMonth(28、29、30、31)

  • daysInYear(365 或 366)

  • inLeapYear(true或false)

6. 比较和排序日期

所有 Temporal 对象都可以使用 compare() 返回整数的函数进行比较。例如,比较两个ZonedDateTime对象:

Temporal.ZonedDateTime.compare(t1, t2);

这个比较结果会有三种情况:

  • 当两个时间值相等时,返回 0;

  • 当 t1 在 t2 之后时,返回 1;

  • 当 t1 在 t2 之前时,但会 -1;

const date1 = Temporal.Now,

const date2 = Temporal.PlainDateTime.from(‘2022-05-01’);

Temporal.ZonedDateTime.compare(date1, date2); // -1

compare() 的结果可以用于数组的 sort() 方法来对时间按照升序进行排列(从早到晚):

const t = [

‘2022-01-01T00:00:00+00:00[Europe/London]’,

‘2022-01-01T00:00:00+00:00[Africa/Cairo]’,

‘2022-01-01T00:00:00+00:00[America/New_York]’

].map(d => Temporal.ZonedDateTime.from(d))

.sort(Temporal.ZonedDateTime.compare);

7. 日期计算

提案还提供了几种方法来对任何 Temporal 对象执行日期计算。当传递一个Temporal.Duration对象时,它们都会返回一个相同类型的新的 Temporal,该对象使用years, months, weeks, days, hours, minutes, seconds, milliseconds, microseconds 和 nanoseconds 字段来设置时间。

const t1 = Temporal.ZonedDateTime.from(‘2022-01-01T00:00:00+00:00[Europe/London]’);

t1.add({ hours: 8, minutes: 30 }); // 往后8小时30分

t1.subtract({ days: 5 });  // 往前5天

t1.round({ smallestUnit: ‘month’ });  // 四舍五入到最近的月份

until() 和 since() 方法会返回一个对象,该 Temporal.Duration 对象描述基于当前日期/时间的特定日期和时间之前或之后的时间,例如:

t1.until().months; // 到t1还有几个月

t2.until().days;  // 到t2还有几天

t3.since().weeks; // t3已经过去了几周

equals() 方法用来确定两个日期/时间值是否相同:

const d1 = Temporal.PlainDate.from(‘2022-01-31’);

const d2 = Temporal.PlainDate.from(‘2023-01-31’);

d1.equals(d2);  // false

8. 使用国际化 API 格式化日期

虽然这不是 Temporal API 的一部分,但 JavaScript Intl(国际化)API提供了一个 DateTimeFormat() 构造函数,可以用于格式化 Temporal 或 Date 对象:

const d = new Temporal.PlainDate(2022, 3, 14);

// 美国日期格式:3/14/2022

new Intl.DateTimeFormat(‘en-US’).format(d);

// 英国日期格式:14/3/2022

new Intl.DateTimeFormat(‘en-GB’).format(d);

// 西班牙长日期格式:miércoles, 14 de abril de 2022

new Intl.DateTimeFormat(‘es-ES’, { dateStyle: ‘full’ }).format(d);

附:

  • TC39 关于 Temporal 的提案进度:https://tc39.es/proposal-temporal/

  • Chrome 关于 Temporal 的实现进度:https://chromestatus.com/feature/5668291307634688#details

四、内置对象


1. Object.hasOwn()

在ES2022之前,可以使用 Object.prototype.hasOwnProperty() 来检查一个属性是否属于对象。

提案中的 Object.hasOwn 特性是一种更简洁、更可靠的检查属性是否直接设置在对象上的方法。

const example = {

property: ‘123’

};

console.log(Object.prototype.hasOwnProperty.call(example, ‘property’));

console.log(Object.hasOwn(example, ‘property’));

2. at()

at() 是一个数组方法,用于通过给定索引来获取数组元素。当给定索引为正时,这种新方法与使用括号表示法访问具有相同的行为。当给出负整数索引时,就会从数组的最后一项开始检索:

const array = [0,1,2,3,4,5];

console.log(array[array.length-1]);  // 5

console.log(array.at(-1));  // 5

console.log(array[array.lenght-2]);  // 4

console.log(array.at(-2));  // 4

除了数组,字符串也可以使用at()方法进行索引:

const str = “hello world”;

console.log(str[str.length - 1]);  // d

console.log(str.at(-1));  // d

3. cause

在 ECMAScript 2022 提案中,new Error() 中可以指定导致它的原因:

function readFiles(filePaths) {

return filePaths.map(

(filePath) => {

try {

// ···

} catch (error) {

throw new Error(

While processing ${filePath},

{cause: error}

);

}

});

}

4. 正则表达式匹配索引

这个新提案已经进入第 4 阶段,它将允许我们利用 d 字符来表示我们想要匹配字符串的开始和结束索引。以前,我们只能在字符串匹配操作期间获得一个包含提取的字符串和索引信息的数组。在某些情况下,这是不够的。因此,在这个新提案中,如果设置标志 /d,将额外获得一个带有开始和结束索引的数组。

const matchObj = /(a+)(b+)/d.exec(‘aaaabb’);

console.log(matchObj[1]) // ‘aaaa’

console.log(matchObj[2]) // ‘bb’

由于 /d 标识的存在,matchObj还有一个属性.indices,它用来记录捕获的每个编号组:

console.log(matchObj.indices[1])  // [0, 4]

console.log(matchObj.indices[2])  // [4, 6]

我们还可以使用命名组:

const matchObj = /(?a+)(?b+)/d.exec(‘aaaabb’);

console.log(matchObj.groups.as);  // ‘aaaa’

console.log(matchObj.groups.bs);  // ‘bb’

这里给两个字符匹配分别命名为as和bs,然后就可以通过groups来获取到这两个命名分别匹配到的字符串。

它们的索引存储在 matchObj.indices.groups 中:

console.log(matchObj.indices.groups.as);  // [0, 4]

console.log(matchObj.indices.groups.bs);  // [4, 6]

匹配索引的一个重要用途就是指向语法错误所在位置的解析器。下面的代码解决了一个相关问题:它指向引用内容的开始和结束位置

const reQuoted = /“([^”]+)”/dgu;

function pointToQuotedText(str) {

const startIndices = new Set();

const endIndices = new Set();

for (const match of str.matchAll(reQuoted)) {

const [start, end] = match.indices[1];

startIndices.add(start);

endIndices.add(end);

}

let result = ‘’;

for (let index=0; index < str.length; index++) {

if (startIndices.has(index)) {


版权声明:本文为m0_70646869原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。