ECMAScript 2022: Hướng dẫn dành cho người mới bắt đầu về các tính năng mới nhất của JavaScript

Xin chào bạn, tương lai của ngôi sao lập trình! ? Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình đầy thú vị này qua các tính năng mới và tuyệt vời nhất của JavaScript, cụ thể là ECMAScript 2022. Đừng lo lắng nếu bạn là người mới bắt đầu lập trình - chúng ta sẽ cùng nhau học từng bước, và tôi hứa sẽ làm cho nó thú vị và dễ hiểu nhất có thể. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu!

ECMAScript 2022 là gì?

Trước khi chúng ta nhảy vào các tính năng mới, hãy nhanh chóng thảo luận về ECMAScript là gì. Hãy tưởng tượng ECMAScript là tên sang trọng, chính thức của JavaScript. Mỗi năm, ngôn ngữ JavaScript nhận được một số bản cập nhật mới và thú vị, và ECMAScript 2022 (cũng được gọi là ES13) là phiên bản mới nhất. Nó giống như JavaScript đã có một bộ quần áo mới lấp lánh và một số siêu năng lực!

Các tính năng mới được thêm vào trong ECMAScript 2022

ECMAScript 2022 mang đến cho chúng ta nhiều tính năng mới thú vị giúp cuộc sống lập trình của chúng ta dễ dàng và thú vị hơn. Hãy cùng khám phá từng tính năng với một số ví dụ mà ngay cả bà nội của bạn cũng có thể hiểu (ít nhất là nếu bà nội của bạn là một bà nội thông thạo công nghệ)!

Phương thức Array at()

Hãy tưởng tượng bạn có một hộp bút chì màu sắc, và bạn muốn chọn một cây cụ thể mà không cần đếm từ đầu mỗi lần. Đó chính xác là điều mà phương thức at() làm cho mảng!

const crayons = ['red', 'blue', 'green', 'yellow', 'purple'];

console.log(crayons.at(2)); // Output: 'green'
console.log(crayons.at(-1)); // Output: 'purple'

Trong ví dụ này, crayons.at(2) cho chúng ta cây bút chì thứ ba (nhớ rằng chúng ta bắt đầu đếm từ 0 trong lập trình), đó là 'green'. Điều thú vị là chúng ta cũng có thể sử dụng số âm để đếm từ cuối. Vậy, crayons.at(-1) cho chúng ta cây bút chì cuối cùng, 'purple'.

Phương thức String at()

Phương thức at() không chỉ dành cho mảng - chuỗi cũng được tham gia vào bữa tiệc! Nó hoạt động theo cùng một cách, cho phép chúng ta chọn ra các ký tự cụ thể từ chuỗi.

const greeting = 'Hello, World!';

console.log(greeting.at(0)); // Output: 'H'
console.log(greeting.at(-1)); // Output: '!'

Ở đây, greeting.at(0) cho chúng ta ký tự đầu tiên 'H', và greeting.at(-1) cho chúng ta ký tự cuối cùng '!'. Nó giống như có một con trỏ ma thuật có thể nhảy đến bất kỳ phần nào của chuỗi!

Phương thức và trường riêng tư

Bây giờ, hãy tưởng tượng chúng ta đang tạo một thiết bị gián điệp siêu bí mật. Chúng ta muốn một số phần của thiết bị này phải được giấu khỏi tầm mắt của những kẻ tò mò. Đó là khi các phương thức và trường riêng tư phát huy tác dụng!

class SpyGadget {
#secretCode = '007'; // Trường riêng tư

#activateInvisibility() { // Phương thức riêng tư
console.log('Invisibility activated!');
}

useGadget() {
console.log(`Using gadget with code: ${this.#secretCode}`);
this.#activateInvisibility();
}
}

const gadget = new SpyGadget();
gadget.useGadget();
// Output:
// Using gadget with code: 007
// Invisibility activated!

// Điều này sẽ gây ra lỗi:
// console.log(gadget.#secretCode);
// gadget.#activateInvisibility();

Trong ví dụ này, #secretCode và #activateInvisibility() là riêng tư - chúng chỉ có thể được sử dụng bên trong lớp SpyGadget. Nó giống như có một ngăn bí mật trong thiết bị gián điệp của bạn mà chỉ bạn mới biết cách mở!

Phương thức Object.hasOwn()

Hãy tưởng tượng bạn là một thám tử đang cố gắng tìm ra xem một nghi phạm có sở hữu một vật phẩm cụ thể hay không. Phương thức Object.hasOwn() giống như kính lúp đáng tin cậy của bạn, giúp bạn xác định xem một đối tượng có một thuộc tính cụ thể hay không.

const suspect = {
name: 'John Doe',
age: 30
};

console.log(Object.hasOwn(suspect, 'name')); // Output: true
console.log(Object.hasOwn(suspect, 'address')); // Output: false

Trong trường hợp này, đối tượng suspect có thuộc tính name nhưng không có thuộc tính address. Object.hasOwn() giúp chúng ta xác nhận điều này nhanh chóng và dễ dàng.

Thuộc tính error.cause

Khi mọi thứ đi sai hướng trong mã của chúng ta (và tin tôi đi, chúng sẽ), việc biết tại sao là rất hữu ích. Thuộc tính error.cause giống như sổ tay của một thám tử, cung cấp thêm thông tin về nguyên nhân gây ra lỗi.

function fetchData() {
throw new Error('Failed to fetch data', { cause: 'Network disconnected' });
}

try {
fetchData();
} catch (error) {
console.log(error.message); // Output: 'Failed to fetch data'
console.log(error.cause); // Output: 'Network disconnected'
}

Ở đây, chúng ta không chỉ ném một lỗi thông thường. Chúng ta cung cấp thêm thông tin về nguyên nhân gây ra lỗi, giúp việc gỡ lỗi dễ dàng hơn. Nó giống như để lại những mẩu bánh mì cho phiên bản tương lai của bạn!

Tính năng Await Import

Cuối cùng nhưng không kém phần quan trọng, hãy cùng thảo luận về tính năng await import() mới. Nó giống như đặt hàng một pizza - bạn bây giờ có thể chờ đợi "toppings" (hoặc trong trường hợp này là các mô-đun) của bạn đến trước khi bạn bắt đầu "ăn" (sử dụng chúng trong mã của bạn).

const button = document.querySelector('button');

button.addEventListener('click', async () => {
const module = await import('./api-module.js');
module.callAPI();
});

Trong ví dụ này, chúng ta chỉ tải api-module.js khi nút được nhấp. Điều này có thể giúp trang web của chúng ta tải nhanh hơn, vì chúng ta không tải tất cả mọi thứ upfront. Nó giống như có dịch vụ giao pizza theo yêu cầu cho mã của bạn!

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau đi qua một hành trình nhanh chóng qua các tính năng mới thú vị của ECMAScript 2022. Nhớ rằng, học lập trình là một hành trình, không phải là đích đến. Đừng lo lắng nếu mọi thứ không ngay lập tức hiểu được - hãy tiếp tục thực hành, tiếp tục thử nghiệm, và quan trọng nhất, hãy vui vẻ!

Dưới đây là bảng tóm tắt các phương thức và tính năng chúng ta đã học, dưới dạng bảng:

Phương thức/Tính năng	Mô tả
Array.at()	Truy cập các phần tử mảng sử dụng số nguyên dương và âm
String.at()	Truy cập các ký tự chuỗi sử dụng số nguyên dương và âm
Phương thức và trường riêng tư	Tạo các thành viên riêng tư trong lớp bằng cách sử dụng tiền tố #
Object.hasOwn()	Kiểm tra xem một đối tượng có một thuộc tính cụ thể hay không
error.cause	Cung cấp thêm thông tin về nguyên nhân gây ra lỗi
await import()	Nhập các mô-đun một cách linh hoạt trong ngữ cảnh không đồng bộ

Tiếp tục lập trình, tiếp tục học hỏi, và trước khi bạn biết, bạn sẽ tạo ra những điều kỳ diệu với JavaScript. Đến gặp lại lần sau, chúc các bạn lập trình vui vẻ! ??

Credits: Image by storyset