JavaScript - ECMAScript 2017: Hướng dẫn cho người mới bắt đầu

Xin chào các bạnfuture programmers! 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 thú vị vào thế giới của ECMAScript 2017. Là một ai đó đã dạy khoa học máy tính hơn một thập kỷ, tôi có thể đảm bảo với bạn rằng việc học JavaScript giống như解锁 một siêu năng lực trong kỷ nguyên số. Vậy, hãy cùng nhau lặn vào và khám phá những tính năng tuyệt vời được giới thiệu trong ECMAScript 2017!

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

ECMAScript 2017, còn được gọi là ES8, đã mang lại một số tính năng thay đổi lớn cho JavaScript. Hãy tưởng tượng nó như một bộ công cụ mới được thêm vào hộp công cụ lập trình của bạn. Những tính năng này làm cho cuộc sống của chúng tôi như những nhà phát triển trở nên dễ dàng hơn và mã của chúng tôi hiệu quả hơn. Hãy cùng phân tích chúng một bằng một!

Phương thức String Padding: padStart() và padEnd()

Bạn có bao giờ cần thêm các ký tự vào đầu hoặc cuối một chuỗi để làm cho nó có độ dài nhất định không? ECMAScript 2017 đã có giải pháp cho bạn với các phương thức padStart() và padEnd()!

padStart()

Phương thức padStart() thêm ký tự vào đầu chuỗi hiện tại cho đến khi chuỗi kết quả đạt được độ dài đã cho. Ký tự điền được áp dụng từ đầu của chuỗi hiện tại.

let str = '5';
console.log(str.padStart(3, '0')); // Output: '005'

Trong ví dụ này, chúng ta đang thêm các số không vào chuỗi '5' cho đến khi nó có 3 ký tự. Nó giống như thêm các số không ở đầu một số!

padEnd()

Tương tự, padEnd() thêm ký tự vào cuối chuỗi hiện tại.

let price = '99';
console.log(price.padEnd(5, '.00')); // Output: '99.00'

Ở đây, chúng ta đang thêm '.00' vào cuối '99' để làm cho nó trông giống như một giá cả với phần cents.

Những phương thức này rất hữu ích khi bạn cần định dạng chuỗi cho hiển thị hoặc căn chỉnh văn bản theo một cách nào đó.

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

Bây giờ, hãy nói về Object.entries(). Phương thức này giống như một phù thủy có thể biến một đối tượng thành một mảng các cặp khóa-giá trị. Nó vô cùng hữu ích khi bạn cần duyệt qua các thuộc tính của một đối tượng.

let person = {
name: 'Alice',
age: 30,
city: 'New York'
};

console.log(Object.entries(person));
// Output: [['name', 'Alice'], ['age', 30], ['city', 'New York']]

Trong ví dụ này, Object.entries() biến đối tượng person của chúng ta thành một mảng mà mỗi phần tử là một mảng khác chứa một cặp khóa-giá trị. Nó giống như unpacking một vali và trải ra tất cả nội dung của nó!

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

Object.values() là cousin của Object.entries(). Thay vì cung cấp cho chúng ta các cặp khóa-giá trị, nó trả về một mảng chỉ chứa các giá trị trong một đối tượng.

let fruits = {
apple: 5,
banana: 3,
orange: 2
};

console.log(Object.values(fruits)); // Output: [5, 3, 2]

Phương thức này hoàn hảo khi bạn chỉ quan tâm đến các giá trị trong một đối tượng而不是 các khóa của chúng. Nó giống như nhận một danh sách mua sắm mà không có giá cả!

JavaScript async và await

Bây giờ, chúng ta đang bước vào thế giới của JavaScript không đồng bộ với async và await. Những từ khóa này làm cho việc làm việc với Promises (một cách để xử lý các thao tác không đồng bộ) trở nên dễ dàng và dễ đọc hơn.

async function fetchUserData() {
try {
let response = await fetch('https://api.example.com/user');
let userData = await response.json();
console.log(userData);
} catch (error) {
console.error('Failed to fetch user data:', error);
}
}

fetchUserData();

Trong ví dụ này, async告诉 JavaScript rằng hàm này sẽ làm việc với mã không đồng bộ. Từ khóa await dừng việc thực thi của hàm cho đến khi Promise được giải quyết. Nó giống như nói với JavaScript, "Đợi ở đây cho đến khi nhiệm vụ này hoàn thành trước khi tiếp tục."

Điều này làm cho mã không đồng bộ trông và hành xử giống như mã đồng bộ, điều này dễ đọc và hiểu hơn!

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

Phương thức này có thể听起来 đáng sợ, nhưng nó thực sự rất hữu ích! Nó trả về tất cả các mô tả thuộc tính sở hữu của một đối tượng cho trước.

let obj = {
name: 'John',
get age() { return 30; }
};

console.log(Object.getOwnPropertyDescriptors(obj));
/* Output:
{
name: {
value: 'John',
writable: true,
enumerable: true,
configurable: true
},
age: {
get: [Function: get age],
set: undefined,
enumerable: true,
configurable: true
}
}
*/

Phương thức này đặc biệt hữu ích khi bạn cần sao chép các thuộc tính từ một đối tượng sang một đối tượng khác, bao gồm cả các mô tả (như getters và setters).

JavaScript Shared Memory và Atomics

Cuối cùng, hãy nói về Shared Memory và Atomics. Những tính năng này cho phép các luồng khác nhau trong JavaScript chia sẻ cùng một không gian bộ nhớ và thực hiện các thao tác nguyên tử.

// Tạo một bộ nhớ chia sẻ
let sharedBuffer = new SharedArrayBuffer(4);
let sharedArray = new Int32Array(sharedBuffer);

// Thực hiện các thao tác nguyên tử
Atomics.store(sharedArray, 0, 42);
console.log(Atomics.load(sharedArray, 0)); // Output: 42

Đây là những thứ phức tạp, chủ yếu được sử dụng trong các kịch bản mà bạn cần hiệu suất tính toán cao trong JavaScript. Nó giống như nhiều đầu bếp làm việc trong cùng một nhà bếp, có thể chia sẻ nguyên liệu mà không làm phiền nhau!

Tóm tắt các phương thức mới

Dưới đây là bảng tóm tắt các phương thức mới mà chúng ta đã thảo luận:

Phương thức	Mô tả
String.prototype.padStart()	Điền ký tự vào đầu của chuỗi cho đến khi đạt được độ dài đã cho
String.prototype.padEnd()	Điền ký tự vào cuối của chuỗi cho đến khi đạt được độ dài đã cho
Object.entries()	Trả về một mảng của các cặp khóa-giá trị của các thuộc tính enumerable string-keyed của một đối tượng
Object.values()	Trả về một mảng của các giá trị enumerable của một đối tượng
Object.getOwnPropertyDescriptors()	Trả về tất cả các mô tả thuộc tính sở hữu của một đối tượng cho trước
Atomics methods	Cung cấp các thao tác nguyên tử dưới dạng các phương thức tĩnh trên đối tượng Atomics

Và thế là bạn đã có! Chúng ta đã bao gồm các tính năng chính được giới thiệu trong ECMAScript 2017. Nhớ rằng, học lập trình là một hành trình, không phải là đích đến. Hãy tiếp tục thực hành, tiếp tục khám phá, và quan trọng nhất, hãy vui vẻ với nó! Chúc bạn lập trình vui vẻ!

Credits: Image by storyset