ECMAScript 2022

Số phiên bản JavaScript

Phiên bản ECMAScript cũ được đặt tên theo số: ES5 và ES6.

Từ năm 2016, phiên bản được đặt tên theo năm: ES2016, 2018, 2020, 2022.

Tính năng mới của ES2022

Cảnh báo:

Những tính năng này tương đối mới.

Trình duyệt cũ có thể cần mã thay thế (Polyfill).

JavaScript Array at()

ES2022 đã giới thiệu phương thức mảng at():

Ví dụ 1

Lấy phần tử thứ ba của mảng fruits:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);

Thử ngay

Ví dụ 2

Lấy phần tử thứ ba của mảng fruits:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

Thử ngay

at() Phương thức trả về phần tử tại chỉ số xác định từ mảng.

at() Phương pháp với [] Kết quả trả về là giống nhau.

Từ tháng 3 năm 2022, tất cả các trình duyệt hiện đại đều hỗ trợ at() Phương pháp:

Chrome Edge Firefox Safari Opera
Chrome 92 Edge 92 Firefox 90 Safari 15.4 Opera 78
Tháng 4 năm 2021 tháng 7 năm 2021 tháng 7 năm 2021 tháng 3 năm 2022 tháng 8 năm 2021

Lưu ý:

Nhiều ngôn ngữ cho phép sử dụng chỉ số âm (ví dụ như [-1]) Truy cập vào phần tử cuối cùng của đối tượng/mảng/chuỗi.

Điều này không thể thực hiện được trong JavaScript vì [] Để truy cập vào mảng và đối tượng. obj[-1] chỉ là giá trị của khóa -1, không phải là thuộc tính cuối cùng của đối tượng.

at() Phương thức được giới thiệu trong ES2022 để giải quyết vấn đề này.

JavaScript String at()

ES2022 đã giới thiệu phương thức chuỗi at():

Ví dụ 1

Lấy chữ cái thứ ba của chuỗi name:

const name = "W3Schools";
let letter = name.at(2);

Thử ngay

Ví dụ 2

Lấy chữ cái thứ ba của chuỗi name:

const name = "W3Schools";
let letter = name[2];

Thử ngay

at() Phương pháp từ chuỗi trả về ký tự tại chỉ số cụ thể.

at() Phương pháp với [] Kết quả trả về là giống nhau.

Từ tháng 3 năm 2022, tất cả các trình duyệt hiện đại đều hỗ trợ at() Phương pháp:

Chrome Edge Firefox Safari Opera
Chrome 92 Edge 92 Firefox 90 Safari 15.4 Opera 78
Tháng 4 năm 2021 tháng 7 năm 2021 tháng 7 năm 2021 tháng 3 năm 2022 tháng 8 năm 2021

Điều chỉnh d của RegExp

ES2022 đã thêm /d Điều chỉnh, được sử dụng để biểu thị bắt đầu và kết thúc của khớp.

Mẫu

let text = "aaaabb";
let result = text.match(/(aa)(bb)/d);

Thử ngay

Điều chỉnh RegExp được sử dụng để chỉ định không phân biệt chữ hoa-chữ thường, và các tìm kiếm toàn cục khác:

Điều chỉnh Mô tả Thử ngay
g Thực hiện khớp toàn cục (tìm tất cả). Thử ngay
i Thực hiện khớp không phân biệt chữ hoa-chữ thường. Thử ngay
d Thực hiện khớp chuỗi con (thêm vào ES2022). Thử ngay
m Thực hiện khớp đa dòng. Thử ngay

Object.hasOwn()

ES2022 cung cấp một phương pháp an toàn để kiểm tra thuộc tính có phải thuộc tính tự có của đối tượng hay không.

Object.hasOwn() Tương tự như Object.prototype.hasOwnPropertyNhưng hỗ trợ tất cả các loại đối tượng.

Mẫu

Object.hasOwn(myObject, age)

Thử ngay

Nguyên nhân lỗi

ES2022 cho phép chỉ định nguyên nhân cơ bản của lỗi thông qua error.cause.

Mẫu

try { 
  connectData(); 
} 
  throw new Error("Connecting failed.", { cause: err }); 
}

Thử ngay

JavaScript await import

JavaScript module bây giờ có thể chờ các tài nguyên cần导入 trước khi chạy:

import {myData} from './myData.js';
const data = await myData();

Khai báo trường lớp JavaScript

class Hello {
  counter = 0; // trường lớp
}
const myClass = new Hello();
let x = myClass.counter;

Từ tháng 4 năm 2021, tất cả các trình duyệt hiện đại đều hỗ trợ khai báo trường lớp:

Chrome Edge Firefox Safari Opera
Chrome 72 Edge 79 Firefox 69 Safari 14.1 Opera 60
2019 tháng 1 Tháng 1 năm 2020 2019 năm 9 tháng Tháng 4 năm 2021 Tháng 1 năm 2020

Cách sử dụng phương pháp và trường riêng tư trong JavaScript

class Hello {
  #counter = 0;  // Trường riêng tư
  #myMethod() {} // Phương pháp riêng tư
}
const myClass = new Hello();
let x = myClass.#counter; // Lỗi
myClass.#myMethod();      // Lỗi

Từ tháng 6 năm 2021, tất cả các trình duyệt hiện đại đều hỗ trợ các phương pháp và trường riêng tư:

Chrome Edge Firefox Safari Opera
Chrome 74 Edge 79 Firefox 90 Safari 14.1 Opera 62
Tháng 4 năm 2019 Tháng 1 năm 2020 Tháng 6 năm 2021 Tháng 4 năm 2021 Tháng 6 năm 2019